Vue.js テンプレート構文

Vue.js は HTML ベースのテンプレート構文を使用しており、開発者が宣言的に DOM を基盤となる Vue インスタンスのデータにバインドすることを可能にします。

Vue.js の核心は、簡潔なテンプレート構文を使用してデータを宣言的に DOM にレンダリングすることを可能にするシステムです。

リアクティブシステムと組み合わせることで、アプリケーションの状態が変化したとき、Vue は再レンダリングの最小コストをスマートに計算し、DOM 操作に適用できます。

展開

テキスト

データバインディングの最も一般的な形式は、{{...}}（二重中括弧）を使用したテキスト展開です。

テキスト展開

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

試してみる »

Html

v-html ディレクティブを使用して HTML コードを出力します：

v-html ディレクティブ

<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>サンプル</h1>' } }) </script>

試してみる »

属性

HTML 属性の値には v-bind ディレクティブを使用します。

次の例では、use の値を判定し、true の場合は class1 クラスのスタイルを適用し、それ以外の場合はそのクラスを使用しません：

v-bind ディレクティブ

<div id="app"> <label for="r1">色を変更</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}">v-bind:class ディレクティブ</div> </div> <script> new Vue({ el: '#app', data:{ use: false } }); </script>

試してみる »

式

Vue.js は完全な JavaScript 式のサポートを提供します。

JavaScript 式

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">サンプル</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'サンプル', id : 1 } }) </script>

試してみる »

ディレクティブ

ディレクティブは v- 接頭辞を持つ特別な属性です。

ディレクティブは、式の値が変わったときに特定の動作を DOM に適用するために使用します。次の例のとおりです：

例

<div id="app"> <p v-if="seen">今、あなたには私が見えています</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>

試してみる »

ここでは、v-if ディレクティブは式 seen の値（true または false）に応じて p 要素を挿入するかどうかを決定します。

引数

引数はディレクティブの後にコロンで指定します。たとえば、v-bind ディレクティブは HTML 属性をリアクティブに更新するために使用されます：

例

<div id="app"> <pre><a v-bind:href="url">サンプル</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.example.com' } }) </script>

試してみる »

ここでは href が引数であり、v-bind ディレクティブにその要素の href 属性を式 url の値にバインドするように指示します。

もう一つの例は、DOM イベントをリッスンするために使用される v-on ディレクティブです：

<a v-on:click="doSomething">

ここでは引数はリッスンするイベント名です。

修飾子

修飾子は半角ピリオド（.）.で示される特別な接尾辞であり、ディレクティブが特別な方法でバインドされるべきことを示します。例えば、.prevent修飾子はディレクティブに指示しますv-onトリガーされたイベントに対して呼び出すようにevent.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

ユーザー入力

input 入力欄では、v-model ディレクティブを使用して双方向データバインディングを実装できます：

双方向データバインディング

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'サンプル!' } }) </script>

試してみる »

v-modelディレクティブは、input、select、textarea、checkbox、radio などのフォームコントロール要素に双方向データバインディングを作成し、フォーム上の値に基づいてバインドされた要素の値を自動的に更新します。

ボタンのイベントでは、v-on を使用してイベントをリッスンし、ユーザーの入力に応答できます。

次の例では、ユーザーがボタンをクリックした後に文字列を反転する操作を行います：

文字列の反転

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">文字列を反転</button> </div> <script> new Vue({ el: '#app', data: { message: 'サンプル!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>

試してみる »

フィルター

Vue.js では、一般的なテキストフォーマットとして使用されるカスタムフィルターを定義できます。これは「パイプ記号」で示され、形式は次のとおりです：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

フィルター関数は、式の値を最初の引数として受け取ります。

次の例では、入力された文字列の最初の文字を大文字に変換します：

例

<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'サンプル' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>

試してみる »

フィルターは連結できます：

{{ message | filterA | filterB }}

フィルターは JavaScript 関数であるため、引数を受け取ることができます：

{{ message | filterA('arg1', arg2) }}

ここでは、message が最初の引数で、文字列 'arg1' はフィルターに2番目の引数として渡され、arg2 式の値は評価されてからフィルターに3番目の引数として渡されます。

略記

v-bind の略記

Vue.js は、最もよく使用される2つのディレクティブに特別な略記を提供しています：

<!-- 完整语法 -->
<a v-bind:href="url.html"></a>
<!-- 缩写 -->
<a :href="url.html"></a>

v-on の略記

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

その他の拡張