Posted in vuejs

[Vue.js] ディレクティブの種類と使い方

   Published Date: 2020年5月14日

Vue.jsにはディレクティブという仕組みがあります。htmlを出力したい場合、clickイベントを指定したい場合など、様々なものに対応しています。
これらを使うと簡潔に記載できるので便利です。

v-html

出力するdataの中にHTMLを含ませたい場合にHello World!と同じように出力すると失敗します。

失敗例

[HTML]

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
  <p>
  {{htmldata}}
  </p>
  </div>
</body>
</html>

[JavaScript]

new Vue({
el: '#app',
data:{
htmldata: '<h1>hello world!</h1>'
}
})

こちらの出力はHTMLがプレーンテキストで出力されてしまいます。

<h1>hello world!</h1>

成功例

Vue.jsのv-htmlディレクティブを使います。

[HTML]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
<div v-html="htmldata">
</div>
  </div>
</body>
</html>

[JavaScript]

new Vue({
el: '#app',
data:{
  htmldata: '<h1>hello world!</h1>'
  }
})

これでHTMLタグが反映された形での出力となります。

v-htmlはセキュリティ上の危険もあります。ユーザーが入力フォームからデータを登録できる形のサイトでそれをv-htmlで出力すると、JavaScriptなどが実行されてしまうことになります。
v-htmlは信頼のおけるコンテンツの出力（基本的には自分がチェックしたコンテンツ）に使うようにしましょう。

v-bind

[HTML]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
  <a v-bind:href="url">Google</a>
</div>

</body>
</html>

[JavaScript]

new Vue({
el: '#app',
data:{
  url: 'https://www.google.com'
  }
})

V-bindは下記のように省略することができます。

  <a :href="url">Google</a>

a hrefにidやnameなどの属性を持たせたい場合は下記のようにします。

[HTML]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
  <a v-bind="urlSample">Google</a>
</div>

</body>
</html>

[JavaScript]

new Vue({
el: '#app',
data:{
  urlSample: {
    href:'http://www.google.com',
    id:1,
    name:'googleSite'
    }
  }
})

[出力]
出力されたソースを確認してみると、指定した属性が入っています。

<a href="http://www.google.com" id="1" name="googleSite">Google</a>

v-on

v-onディレクティブは最も多く使うディレクティブの一つです。ボタンをクリックした時に発生するイベントなどはこのディレクティブを使うことになります。
v-onで指定できるイベントは下記で確認できます。
MDN イベントリファレンス

ボタンを押すとカウンターが増減するプログラムを書いてみます。
・カウンターの数字を保存する変数を準備（今回はclickNumber）
・clickNumberの初期値は0に設定
・HTMLのボタンにv-on:click=”関数名”を指定（今回はcountUp,countDownの２種類）
・
[HTML]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>クリック数:{{clickNumber}}</p>
    <button v-on:click="countUp">
    数字が増加します
    </button>
    <button v-on:click="countDown">
    数字が減少します
    </button>
  </div>
</body>
</html>

[JavaScript]

new Vue({
el: '#app',
data:{
clickNumber:0
  },
methods: {
    countUp:function(){
    this.clickNumber += 1
    },
    countDown:function(){
    this.clickNumber -= 1
    }
  }
})

[出力]
ボタンを押すとクリック数が増減します。
2020-05-14_11h36_18

なお、Vueインスタンスの中で関数を設定するにはmethodsとcomputedという2種類があります。methodsはページの中で他の関数が実行されるとその度に再描画してしまいます。実際にプログラムを書くときはcomputedをベースにして、必要のある時のみmethodsを指定するようにします。（そうしないと無駄な負荷が発生してしまいます）

{{}}の中にcomputedを書く場合は 関数名の後に括弧を付けない。
methodを書く場合は関数名()で記載。
※@click=”関数名”のところは関数名だけでも関数名()でもOK。

prevent

JavaScript(jQuery）でクリックした時に動作を行わないようにする指定（prevent）があります。
aタグをクリックした時にリンク先に飛ばないようにするなどの処理です。
v-onディレクティブにはこちらの指定方法も用意されています。

<a v-on:click.prevent="関数名">サイト名</a>

このように.preventを付けるだけでOKです。 .stopという指定も用意されています。

キー修飾子

テキストフィールドで文字を入力してエンターを押した時に関数を実行する場合にはkeyupの後に、.enterとします。こうするとエンターキーを押して放した瞬間にイベントが実行されます。

<input text="text" v-on:keyup.enter="checkText">

.enterをつけないと、文字を一文字入力するたびに関数が実行されます。入力されている文字数をリアルタイムで表示する場合などはこれで良いですが、バリデーション（入力値チェック）のときはキー修飾子を付けないと不便ですね。

省略形

v-on:clickは@clickという省略形で記載することができます。

その他のディレクティブ

「v-once」一度だけ実行する



Author: webmaster