vue.jsの基本(テンプレート構文)
vue.jsの基本(テンプレート構文)
vue.jsでは様々なテンプレート制御ディレクティブがあります。
有名どころだと以下
v-once -> 初回だけバインディング v-pre -> 要素と全ての子要素のコンパイルをスキップ v-html -> プレーンなHYMLを挿入 v-cloak -> インスタンスの準備が終わると取り除かれる v-text -> Mustache構文の代わりに利用
v-once
初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱いたい。 つまり、初回だけテキストバインディングを行いたい時に利用する。
new Vue({ el: "#app", data: { message: "hello" }, methods: { click: function(event) { this.message = this.message.split("").reverse("").join("") } } })
<div id="app"> <p v-once> {{ message }} </p> <button v-on:click="click"> Click </button> </div> --> buttonを押しても変わらない。初回だけテンプレートを表示しているから。
v-pre
要素と全てのコンパイルをスキップする時にしよう
new Vue({ el: "#app", data: { message: "hello vue.js" } })
new Vue({
el: "#app",
data: {
message: "hello vue.js"
}
})
---> 生のmustache構文がでる
XSS対策、ディレクティブのない大量のノードをスキップするとことで、コンパイルのスピードをあげる時に利用する。
v-cloak
ページを表示開始してから、インスタンスの作成が終わるまでの間にMustacheタグなどコンパイル前のテンプレートが表示されるのを防ぐ。
<div id="app"> <h2> v-cloak </h2> <p v-cloak> {{ message }} </p> </div>
[v-cloak] { display: none; }
v-cloakで指定されているmustache構文(message)が表記揺れしなくなる。 インスタンスの準備ができたら表示する、準備ができない場合は表示させない。
v-text
Mustcheの代わりに利用可能。
<div id="app"> <p> {{ message }} </p> <p v-text="message"> </p> </div> ---> どちらもmessageが表示される。
new Vue({ el: "#app", data: { message: "hello vue.js" } })
v-textはディレクティブは配下のテキストを丸ごと置き換えるので、テキストの一部を書き換える場合はmustche構文を利用する
バインディング式
1. Javascript式(バインディング式)
データバインディング内部でJavaScript式を利用することができます。
new Vue({ el: "#app", data: { message: "hello vue.js", number: 100, ok: false } })
<div id="app"> <p> {{ message }} </p> <p> {{ number +1 }} </p> <p> {{ message.split('').reverse('').join('') }} </p> <p> {{ ok ? 'YES':'NO'}} </p> </div>
結果 hello vue.js 101 sj.euv olleh NO
注意:各バインディングは単一式のみを含むことが出来ます
{{ var = x +1 }}
これは式ではなく文なのでNG
{{ if(ok) { return message} }}
このようなフロー制御もNG
2.ローカルフィルタ式(バインディング式)
vue.jsでは式の代わりに任意のフィルタを追加することが出来ます。
{{ 式 | フィルタの名前 }}
new Vue({ el: "#app", data: { price: 29800 }, filters: { numberFormat: function(value) { return value.toLocaleString() } } })
<div id="app"> <h2> Mustache </h2> <p> {{ price | numberFormat }} </p> <h2> v-bind </h2> <input type="text" v-bind:value="price | numberFormat"> </div> ---> 1000の桁でカンマ区切りできる
2.グローバルフィルタ式(バインディング式)
Vue.filter(フィルタ名、フィルタの動作)
上のローカルフィルタをグローバルに書き換えるとこんな感じ
Vue.filter('numberFormat', function(value) { return value.toLocaleString() }) new Vue({ el: "#app", data: { price: 29800 } })
フィルタの連結
フィルタは連結できます。
Vue.filter('toUSD', function(jpy){ return jpy / 100 }) Vue.filter('numberFormat', function(value){ return value.toLocaleString() }) var app = new Vue({ el: "#app", data: { jpyPrice: 298000000 } })
<div id="app"> <p> {{ jpyPrice | toUSD | numberFormat }} </p> </div> ---> 2,980,000
フィルタは引数を持つ事も出来ます。