v-text,v-html,v-bindディレクティブについて

以下の２つのコードは同じ表現になります。

   <p>{{sayYes()}}</p>
   <p v-text="message"></p>


```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
   <p>{{sayYes()}}</p>
   <p v-text="message"></p>
</div>
<script>
  new Vue({
    el: '#app',
      data: { message: "おはよう"},
      methods: {
         sayYes: function() {
            return this.message;
         }
      }
})
</script>
</body>
```

![20210505-113435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/535f0fef-c508-aff3-dd74-37e7469fa3ea.png)

v-onceディレクティブ 再代入を防ぐ
-
```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
  <p v-once>{{message}}</p>
<p>{{sayYes()}}</p>
</div>
<script>
  new Vue({
    el: '#app',
      data: { message: "おはよう"},
      methods: {
         sayYes: function() {
            this.message="おはようございます"
            return this.message;    
            }
         }
})
</script>
</body>
```

最初に代入したものしか受け付けなくなる
（this.message="おはようございます"で２度目に追加していますが）
![20210505-114324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/458f7e5c-1d10-d6fb-08c1-ccf82534a8b2.png)

v-htmlディレクティブ タグを機能させる
-

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
  <p v-html="html"></p>
<p>{{html}}</p>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
        html: '<h1>h1タグです</h1>'
      }
  })

</script>
</body>
```

*クロスサイトスクリプチィング（脆弱性）を生み出す危険性があります。
＊ユーザーから提供されたコンテンツは絶対におかないでください。信頼のあるコンテンツに使ってください。

![20210505-115045.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/9eb99892-e310-463d-cd14-154da2698bee.png)


v-bindディレクティブ Linkタグを生成
-

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
  <a v-bind:href="url">google</a>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
        url: 'https://www.google.com'
      }
  })
</script>
</body>
```

いままでとコードの仕方が違います。(引数を取ります)

```
<a v-bind:href="url">google</a>
省略形
<a href="url">google</a>
```

![20210505-120440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/650801f2-937b-955d-e304-f05d67f67cf1.png)


v-bindディレクティブを動的に扱う Linkタグを生成
-

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
  <a :[attribute]="url">google</a>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
        url: 'https://www.google.com',
        attribute: 'href'
      }
  })
</script>
</body>
```

```
  <a :[attribute]="url">google</a>
```

v-bindディレクティブ:引数を繋げることもできます
-

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
  <a :href="url" :id="number">Twitter</a>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
        url: 'https://twitter.com',
        number: 100
      }
  })
</script>
</body>
```

```
  <a :href="url" :id="number">Twitter</a>
```

v-bindディレクティブ:urlとidをオブジェクトとして扱う
-

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
  <a v-bind="{href: url, id: number}">Twitter</a>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
        url: 'https://twitter.com',
        number: 100
      }
  })
</script>
</body>
```

```vuejs
  <a v-bind="{href: url, id: number}">Twitter</a>
```

v-bindディレクティブ:urlとidをオブジェクトとして扱う(2)
-

```vuejs
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
  <a v-bind="urlObject">Twitter</a>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
        urlObject: {
        href: 'https://twitter.com',
        id: 100
        }
      }
  })
</script>
</body>
```

```vuejs
  <a v-bind="urlObject">Twitter</a>
```
中略

```vuejs
data: { 
  urlObject: {
    href: 'https://twitter.com',
      id: 100
  }
}
```