Vue.js_ディレクティブ

ディレクティブ

ディレクティブとは、 DOM要素に対する要求ライブラリに伝達するためのVueの属性です。

タグに「v-*」の属性を指定することでDOM操作を行うことができます。

v-text

v-textはテキストをレンダリングします。


<!DOCTYPE html>
<html>
<head>
  <title>Vue.js - directive</title>
  <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-text="message"></div>
    <div></div>      <!-- Mustache 構文で記述できます -->
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: { message: 'Vue.js-directive!' }
  })
  </script>
</body>
</html>

v-html

v-htmlはHTMLをレンダリングします。


  <div id="app">
    <div v-text="message"></div>  <!-- <h1>Vue.js-directive!</h1>と表示される、 -->
    <div v-html="message"></div>  <!-- <h1>が適用されたHTMLが出力される -->
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: { message: '<h1>Vue.js-directive!</h1>' }
  })
  </script>

v-bind

v-bind はHTMLにModel値を反映（出力）します。


  <div id="app">
    <div v-bind:style="styles" v-html="message"></div>
    <div :style="styles" v-html="message"></div> <!-- v-bindは省略できる -->
  </div>
  <script>
  var data = {
    styles: 'font-size:20pt; color: blue;',
    message: '<h1>Vue.js-directive!</h1>'
  };
  var app = new Vue({
    el: '#app',
    data: data
  })
  </script>

v-if

v-if & v-else

v-if は真偽値によって描画する/描画しないを制御します。

v-elseは「v-if」と組み合わせて使用します。


  <div id="app">
    <p v-if="flag">OK</p>
    <p v-else>NG</p>
  </div>
  <button onclick="clickAction();">Click</button>
  <script>
  var data = {flag: true};
  var app = new Vue({
    el: '#app',
    data: data
  });
  function clickAction() {
    data.flag = !data.flag;
  }
  </script>

v-else-if

v-else-ifは「v-if」と組み合わせて使用します。


  <div id="app">
    <input type="radio" name="app-mode" onclick="app.mode=1" checked>
    <input type="radio" name="app-mode" onclick="app.mode=2">
    <input type="radio" name="app-mode" onclick="app.mode=3">
    <span v-if="mode===1">One</span>
    <span v-else-if="mode===2">Two</span>
    <span v-else>Three</span>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {mode: 1}
  });
  </script>

v-for

v-for はループに使用します。オブジェクトや配列の個数分表示するなどが可能となります。配列のインデックスを取得することもできます。オブジェクトの場合はkeyを取得できます。


<tr v-for="(item, key) in items">

その他表示系ディレクティブ

v-show

v-showはDOMに「display:hidden;」が付与されます。


  <div id="app">
    <div v-show="show">v-show DOM</div>
    <button @click="show = !show">チェンジ</button>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{ show: true}
  });
  </script>

v-pre

v-pre は、Vue 対象の要素の中で文字列を直接表示したい場合に使用します。

v-cloak

v-cloakは画面を開いた際のちらつき（要素が一瞬だけ表示されてしまう）を抑止するために用います。

v-model

v-model は双方向データバインディングであり、Model と View（HTML）の双方向に影響します。

HTML コンポーネントの値に変更があった場合、リアルタイムに Model の値を更新します。


  <div id="app">
    <input v-model="message">
    <div>Message: </div>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{ message: 'v-model'}
  });
  </script>

v-on

v-on はイベントを処理します。

@文字で省略することができ、「v-on:click=」と「@click」は同じになります。

v-on には、イベント制御のための様々な修飾子をつけることができます。


  <div id="app">
  <button v-on:click="hello">Hello by v-on:click</button><br />
  <button @click="hello">Hello by @mark</button>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    methods: {
      hello: function() {
        alert("Hello!");
      }
    }
  });
  </script>