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>Florian Studio</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">Florian Studio</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
	ok: true,
    message: 'ceodata',
	id : 1
  }
})
</script>

コマンド

コマンドはv-で始まる特徴があります。

コマンドは表現式の値が変更する時、特定の操作をDOMに適用するために使用されます。

例

<div id="app">
    <p v-if="seen">Hello my friend.</p>
    <template v-if="ok">
      <h1>Florian Studio</h1>
      <p>Vue.js!</p>
      <p>I love Javascript！！！</p>
    </template>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

ここで、v-ifコマンドは、表現式seenの値（trueまたはfalse）に従ってp要素を挿入するかどうかを決めます。

引数

引数は、コマンドの後にコロンで示されます。例えば、v-bindコマンドはリアクティブにHTML属性を更新するために使用されます。

例

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

ここのhrefは引数であり、要素のhref属性を表現式urlの値にバインドするようにv-bindコマンドに指示します。

もう1つの例は、DOMイベントをリッスンするために使用されるv-onコマンドです。

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

ここの引数は、リッスンされたイベント名です。

修飾子

修飾子は、半角句点で示される特別なサフィックスであり、コマンドを特別な方法でバインドする必要があることを示すために使用されます。例えば、.prevent修飾子は、トリガーされたイベントを呼び出すようにv-onコマンドに指示します。

event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>

ユーザー入力

入力ボックスで、v-modelコマンドを使用して双方向のデータバインディングを実現できます。

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

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'ceodata.com!'
  }
})
</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: 'ceodata.com!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

フィルタ

Vue.jsはフィルタをカスタマイズできます。常用なテキストフォーマットとして使用されます。 「パイプ文字」で表示されます。構文は次のとおりです。

<!-- 2つの中括弧にある -->
{{ message | capitalize }}
<!-- v-bindコマンドにある -->
<div v-bind:id="rawId | formatId"></div>

フィルタ関数は、表現式の値を最初の引数として受け入れます。

次の例では、入力する文字列の最初の文字を大文字に変換します。

例:

<div id="app">
  {{ message | capitalize }}
</div>	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'ceodata.com'
  },
  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"></a>
<!-- 略語 -->
<a :href="url"></a>

v-on の略語

<!-- もとの構文 -->
<a v-on:click="doSomething"></a>
<!-- 略語 -->
<a @click="doSomething"></a>