Vue.js テンプレート構文を勉強する

# テンプレート構文
Vue.jsではHTMLベースのテンプレート構文を使っているので、Vueインスタンスのデータと描画されたDOMを宣言的に対応させることができます。
全てのVue.jsテンプレートは、HTMLベースのテンプレート構文に準拠しているブラウザやHTMLパーサによってパースできる有効なHTMLになります。
内部では、Vue はテンプレートを[VirtualDOM](https://qiita.com/risagon/items/019942c60e9c3e6c05a5)の描画関数にコンパイルします。
リアクティブシステムと組み合わせることでVueは再描画に必要なコンポーネントを聡明に把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します。

##  展開
### テキスト
データバインディングのもっとも基本的な形は、**[Mustache構文(二重中括弧)](https://qiita.com/sengok/items/1d958348215647a5eaf0)** を利用したテキスト展開です。  

```html:html部分
<p> {{ message }} </p>
```
Mustache構文は、対応するインスタンスのmessageプロパティの値に置換えられる。  
messageプロパティが変更される時、それに応じてリアクティブに再レンダリングされます。  

#### v-onceディレクティブ
データ更新時に再レンダリングを行わず、一度だけ展開する事ができる。  
注意として同じノードが影響を受けます。

```html:html部分
<div id="app">
  <p v-once> {{ message }} </p>
</div>
```

```javascript:javascript部分
let vm = new Vue ({
  el: '#app',
  data: {
    message: 'HelloVue.js' 
  }
})
```

```console:開発者モードのConsole
vm.message = 'Good morning vue.js'
"Good morning vue.js"
```

```:ブラウザ
HelloVue.js
```

### 生のHTML
Mustache構文は、データをHTMLではなく、プレーンなテキストとして扱います。
実際のHTMLとして出力する方法がありますが、XSS 脆弱性を容易に引き起こすので、ウェブサイトで動的に任意のHTMLを描画することは、非常に危険であり推奨されていないので今回は説明しません

### 属性
Mustache構文は、HTMLタグの中で使用する事はできません。

```html:実行できないコード
<div id="app">
  <p style="{{color}}"> Hello Vue.js </p>
</div>
```

#### v-bind ディレクテブ
**v-bind**を使用する事で上記の問題は解決します。

```html:html部分
<div id="app-2" v-bind:style="message">
  Hello Vue!
</div>
```

```javascript:JavaScript部分
let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'color: red'
  }
})
```

```:結果
※テキストの色が赤色に変化しています。
Hello Vue!
```

htmlの属性はたくさん存在するので参考までに  
[htmlタグの属性一覧](https://reference.hyper-text.org/html5/attributes/)

### テンプレート構文でjavascript式の使用
テンプレート構文にキーをバインディングする事ができると説明しましたが、Vue.jsはデータバインディング内部でjsvascript式をサポートしてます。

```html:html部分
<!-- 単純な演算 -->
<div> {{ number + 1 }} </div>
<!-- メソッドチェーン -->
<div>{{ nessage.split('').reverse().join('') }} </div>
<!-- v-bind ディレクテブ -->
<div :id = "'list' + id"></div>
```

Vue.jsのdataスコープ内でjavascriptとして評価される。
ただし**単一の式**のみになるので下記のような記述は動作しません。

```html:html部分
<!-- 変数宣言文であり、式ではありません -->
{{ var a = 1 }}

<!-- フロー制御も動作しません。if”文”なので当然ですね -->
{{ if (n >= 20) { return 'big' } else {return 'small'} }}

<!-- フロー制御は三項演算子で書く -->
{{ n >= 20 ? 'big' : 'small' }}
```

#### <font color="red">【注意】</font>
テンプレート構文はサンドボックスで、MathやDateといった[標準ビルトインオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects)だけアクセスできます。
テンプレート構文内でユーザが定義したグローバルオブジェクトにアクセスしようとしないでください。

## ディレクティブ
ディレクティブは上記でも一部説明している**v-**から始まる特別な属性です。ディレクティブ属性値は、単一のJavaScriptをサポートします。（**v-for**は例外であり、後で解説を行います）
ディレクティブの役割は属性値が変化したときに、リアクティブに再レンダリングしDOMに適応する事です。

```html:html部分
<div id="app">
  <p v-if="seen"> Now you see me </p>
</div>
```

```javascript:javascript部分
let app = new Vue({
  el: '#app',
  data: {
    seen : true
  }
})
```

```:ブラウザ出力結果
Now you see me
```

```:開発者モードのConsole
app.$data.seen = false
```

```:ブラウザ出力結果

```

**v-ifディレクティブ**は属性値の真偽値によってレンダリング対象かどうかを判断します。  
今回の例では属性値である"seen"が真か否かに基づきpタブの内容をレンダリングするか判断しています。

### 引数
ディレクティブの中には"引数"を取るものがあります。これはディレクティブ名の後にコロンで表記します。例えば、**v-bind**ディレクティブは、リアクティブにHTML属性を更新します。
再度この例を使って説明します。

```html:html部分
<div id="app-2" v-bind:style="message">
  Hello Vue!
</div>
```

```javascript:JavaScript部分
let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'color: red'
  }
})
```

```:結果
※テキストの色が赤色に変化しています。
Hello Vue!
```

```:開発者モードのConsole
app.$data.message = 'color: blue'
```

```:結果
※テキストの色が青色に変化しています。
Hello Vue!
```

ここでの**style**はv-bindディレクティブにdiv要素のstyle属性に属性値'color: red'をバインディングする事を教えるための引数です。  

別の例として**v-onディレクティブ**がありますが今回は触れません。

## 動的引数
バージョン2.6.0からの新機能  
必要性に対する理解度を得られてないので気が向き次第追記します。

## 修飾子
修飾子 (Modifier) は、ディレクティブにドット(.)でつなげて特別な方法でバインディングする事ができる。

Vue.jsの修飾子は数があり１つ１つをここで説明すると記事を全部読むのモチベーションがなくなると思いますので別途記事を作成します。

## 省略記法
**v-** は、テンプレート内のVue.js独自の属性を認識するための目印です。
これは既存のマークアップに対して、Vue.jsを利用してリアクティブな動作を適応するのに便利ですが、頻繁に利用することになると冗長に感じることがあります。
Vue.jsは２つの最も使われるディレクティブ**v-bind**と**v-on**に対して特別な省略記法が提供されている。

### 省略記法

```html:v-bind省略記法
<!-- 完全な構文 -->
<a v-bind:href="url"> ... </a>

<!-- 省略記法 -->
<a :href="url"> ... </a>
```

```html:v-on省略記法
<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>
```

## あとがき
公式のリファレンスに目を通しながら理解を深められるように調べたりするのは大変だなと思いました。

## 参考資料
[Vue.js公式リファレンス](https://jp.vuejs.org/v2/guide/syntax.html)

[Vue.jsを使用しているなら必ず覚えるべき24の修飾子(サンプル付き)](https://iwb.jp/vuejs-system-modifier-keys-sample/)