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>{{ message }}</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 はループに使用します。オブジェクトや配列の個数分表示するなどが可能となります。

   <div id="app">
    <table border="2" rules="all">
      <tr>
        <th>No</th>
        <th>Name</th>
      </tr>
      <tr v-for="item in items">
        <td>{{item.name}}</td>
        <td>{{item.mail}}</td>
      </tr>
    </table>
  </div>
  <script>
  var data = {
    items:[
      {name:1, mail:'vue'},
      {name:2, mail:'js'},
      {name:3, mail:'vue.js'},
    ]
  }
  var app = new Vue({
    el: '#app',
    data:data
  });
  </script>

配列のインデックスを取得することもできます。

<tr v-for="(item, id) in items">
  <td>{{id}}</td>
  <td>{{item.name}}</td>
</tr>

オブジェクトの場合は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 対象の要素の中で、{{ ... }} を直接表示したい場合に使用します。

  <div v-pre>Message: {{ message }}</div>

v-cloak

v-cloakは画面を開いた際に「{{ ... }}」が一瞬だけ表示されてしまうのを防ぎます。

ちらつきを抑止するために用います。

  <div id="message" v-cloak>{{ message }}</div>

v-model

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

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

  <div id="app">
    <input v-model="message">
    <div>Message: {{ 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>


関連ページ



スポンサード リンク