【Vue.js】テンプレート制御ディレクティブの色々

Vue.js JavaScript

テンプレート制御ディレクティブ

v-once

初回だけテキストバインディングを行いたい時に使う。
例えばボタンを押すと文字列が反転するfunctionを書いてみる。
HTMLコードはこう

<div id="vm">
  <p>{{ message }}</p>
  <button v-on:click="clickButton">Click!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

文字列を反転させたいのでsplitで分けてreverseで反転しjoinでくっつければ良い。

var vm = new Vue({
	el: '#vm',
  data: {
  	message: 'Hello Vue.js!'
  },
  methods: {
  	clickButton: function(event){
    	this.message = this.message.split('').reverse().join('')
    }
  }
})

ボタンを押すとHello Vue.js!が!sj.euV olleHとなる。
ここで、pタグにv-onceを付けると最初の1回しかバインディングを行わないので、ボタンを押しても反転しなくなる。

<div id="vm">
  <p v-once>{{ message }}</p>
  <button v-on:click="clickButton">Click!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

v-pre

要素と全ての子要素のコンパイルをスキップすることができる。
例えば、先ほどのpタグにv-preをつけてみる。

<div id="vm">
  <p v-pre>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

すると、Hello Vue.js!ではなく、{{ message }}がそのまま表示される。
これによりXSS対策や、コンパイルのスピードをあげることができる。

v-html

プレーンなHTMLを挿入することができる。
指定した要素のinnerHTMLを更新することができる。
例えば先ほどのmessageでVue.js!の文字色を変えてみる。

var vm = new Vue({
	el: '#vm',
  data: {
  	message: 'Hello <span style="color:red;">Vue.js!</span>'
  }
})

このままだと赤文字にならず、spanタグ表記が見えたままになってしまう。
そこでv-htmlを使ってみる。

<div id="vm">
  <p v-html="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

こうすることでmessageのhtmlが読み込まれ、Vue.js!が赤く表記される。
サーバーサイドから取得したHTMLを表示する時によく使う。
XSS脆弱性を引き起こす場合もあるので、ユーザーが入力するようなコンテンツには使ってはいけない。

v-cloak

ページを表示し始めている時に、マスタッシュタグなどのテンプレートが表示されるのを防ぐことができる。
つまり、チラツキを抑えることができる。
JavaScript

var vm = new Vue({
	el: '#vm',
  data: {
  	message: 'Hello Vue.js!'
  }
})

HTML

<div id="vm">
  <p v-cloak>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

そしてCSSを使う。

[v-cloak] {
  display: none;
}

こうすることで、表示前の読み込み中はv-cloakのついたタグは非表示となるのでチラツキを抑えることができる。

v-text

マスタッシュ構文の代わりにテキストをそのまま読み込める。
上のHTMLをこうするだけでOK。

<div id="vm">
  <p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

これでHello Vue.js!と表示できる。
ただし、マスタッシュ構文の方が使いやすい場合もある。

<div id="vm">
  <p v-text="message"></p>
  <p>{{ message }}ウホ！</p>
  <p>{{ message }}ウホホッ！</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

上記のように、message部分を共有したい場合はマスタッシュの方が良い。

v-bindの省略記法

よく使うv-bindは省略することができる。

<a v-bind:href="url">リンクページ</a>
<a :href="url">リンクページ</a>