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

以下の記事ではVue.jsの様々な制御ディレクティブを紹介していきます。

みなさまの開発の参考になれば嬉しいです。

⚠️以下の記事のHTMLファイルにはコードの最後に必ずvue.jsを読み込むコード【<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16″></script>】をつけてください!

v-once:Vueによるレンダリングを「1度だけ」に限定する

<div id="app">
<p v-once="">{{message}}</p>
<button v-on:click="clickHandler">
Click!
</button>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
clickHandler: function(event) {
this.message = this.message.split('').reverse().join('')
}
}
})

v-pre:要素とすべての子要素のコンパイルをスキップ

<div id="app">
<p v-pre="">{{ message }}</p>
</div>

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

v-html:HTMLを挿入

<div id="app">
{{ message }}
<p v-html="message"></p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
})

⚠️注意点

  • クロスサイドスクリプティングに注意
  • 一般ユーザーの入力したものをv-htmlで読み込まない

 

v-cloak:一瞬内部的なコードが見えてしまうのを防ぐ

<div id="app">
<h2>v-cloak</h2>
<p v-cloak="">{{ message }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
})
[v-cloak] {
display: none;
}/* Your code... */

v-text:{{}}の代わりに使用可能

<div id="app">
<p v-text="message"></p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
})
Hello Vue.js!
Hello Vue.js!

memo

  • どちらも同じ結果が得られるが、基本的には{{}}構文がおすすめ
  • ダブルクオーテーションで囲う時などに便利だから
  • チーム内で統一すること

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)