#はじめに
**Vue.js**で使用する基本的なディレクティブをまとめました。
Vue.js v3.0の公式ドキュメントを参考としています。

V-onやV-bindは様々な使用法があるため、詳細は今後の記事で書きます。

#V-text

<span v-text="message"></span>
<!-- 両者同様 -->
<span>{{　message　}}</span> Hello Vue!

以下のように文章の一部をプロパティで表示したい場合は”Mustache” 構文(二重中括弧)を利用することが推奨されています。

<span>Message: {{ message }}</span>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
});

#V-html
DOM 要素の内側を innerHTML として書き換えます。
v-html には XSS の危険性があるため信頼できるコンテンツだけに利用します。

<div v-html="html"></div>

var app = new Vue({
  el: '#app',
  data: {
    html: 'Hello <strong style="color: red">Vue!</strong>',
  },
});

#V-show
参照する値が true として評価され場合は表示し、false として評価される場合は display:none 等のスタイルが付いて非表示になります。

<h1 v-show="hello">Hello!</h1>

const greeting = new Vue({
  el: '#app',
  data: {
    hello: 1,
  },
});
greeting.hello = 1; // Hello!

#V-if
バインドした値が true 評価であれば DOM 要素が生成され、false であれば破棄されます。

<h1 v-show="hello">Hello!</h1>

const greeting = new Vue({
  el: '#app',
  data: {
    hello: 1,
  },
});
greeting.hello = 1;

`v-if`と`v-show`の違い

v-if は初期表示においてfalseの場合、何もしません。条件付きブロックは、条件が最初にtrueになるまで描画されません。

一方、v-showではは要素は初期条件に関わらず常に描画され、シンプルなCSSベースの切り替えとして常に要素が DOM に保存されます。

一般的に、v-ifはより高い切り替えコストを持っているのに対して、 v-showはより高い初期描画コストを持っています。そのため、切り替えの頻度が低ければv-if切り替えの頻度が高ければv-showという使い分けをします。

#V-else

v-ifの後続分岐処理としてv-elseを使用できます。

<div v-if="Math.random() > 0.5">Hello!</div>
<div v-else>Morning!</div>

#V-else-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

#V-for
このように v-for を用いて numbers の各要素を仮変数（エイリアス）num として取り出して、num を li 要素の内部に入れて表示させることができます。

<div id="app">
  <ul>
    <li v-for="num in numbers">{{ num }}</li>
  </ul>
</div>


new Vue({
  el: "#app",
  data: {
    numbers: [
      1, 2, 3, 4, 5
    ]
  });

#V-on
DOM要素にイベントリスナーを登録できます。


<div id="app" v-on="click: alert">ClickHere!</div>


new Vue({
  el: "#app",
  methods: {
    alert: function(){
         alert('clicked!');}
  });

#V-bind
aタグのhref属性やimgタグのsrc属性などを動的に変更することができます。


<img v-bind:src="imageSrc" />
<!-- 省略記法 -->
<img :src="imageSrc" />


new Vue({
  el: "#app",
  data: {
    imageSrc: "http://example/example"

#V-model
HTMLのinput要素やselect要素などのユーザーが入力した値を受け取りたい場合、v-bindディレクティブを用いることで実現しますが、v-modelを使うことでより簡潔に書くことができます。

v-bindとv-onを使った場合

<div id="app">
   名前をここに入力する
    <input  v-bind:value="name"  v-on:change="name = $event.target.value" />
</div>

v-modelを使った場合

<div id="app">
   名前をここに入力する
    <input v-model:value="name"/>
</div>

new Vue({
   el: "#app",
   data: {
       name: ''
   }
})