Vue.jsをかじる

2020年11月30日

Vue.jsを試してみた。

2020/11/28現在、v3.xはまだ英語版しかないようだ。

{{Mustache構文(二重中括弧)}}

See the Pen mdryrLW by haku (@t-haku) on CodePen.

Vueのアプリケーションインスタンスのmessageの値がHTMLの{{message}}に反映される。

CDN

CDNでは次のようになる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Vue</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
  {{ message }}
  </div>
  <script>
Vue.createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  }
}).mount('#app');
  </script>
</body>
</html>

ディレクティブ(v-*)

HTMLのタグの中にディレクティブを書くことでバインディング等が行える。

See the Pen RwGNGvV by haku (@t-haku) on CodePen.

HTMLのv-model="message"によりinputに入力した文字列がVueアプリケーションインスタンスのmessageに反映される。VueアプリケーションインスタンスのmessageはHTMLの{{message}}に反映される。ディレクティブは他にも色々ある。

ディレクティブ使い方
v-text要素のtextContentを更新します。
v-html要素のinnerHTMLを更新します。
v-show式の値の真偽に応じて、要素の CSS プロパティ display をトグルします。
v-ifバインディングの値の真偽値に基いて要素の描画を行います。
v-elsev-if に対応する “else block” ということを示します。
v-else-ifv-if に対応する “else if block” ということを示します。
v-forソースデータに基づき、要素またはテンプレートブロックを複数回描画します。
v-on要素にイベントリスナをアタッチします。
v-bind1つ以上の属性またはコンポーネントのプロパティと式を動的に束縛します。
v-modelform の input 要素またはコンポーネント上に双方向バインディングを作成します。
v-slot名前付きスロットあるいはプロパティを受け取るスロットとなることを示します。
v-preこの要素とすべての子要素のコンパイルをスキップします。
v-cloakこのディレクティブは関連付けられた Vue インスタンスのコンパイルが終了するまでの間残存します。
v-once要素とコンポーネントを一度だけ描画します。
v-is<table>等中の要素に制限があるときに使用します。

詳しくは公式サイトをどうぞ。

その他

  • dataは関数型、インスタンスのデータ
  • propsは親から受け入れる属性
  • 算出プロパティ(computed)はメソッド(methods)に似ているがキャッシュによる高速化

ReactもVue.jsもちょっとかじった程度だが、Reactは単方向データバインディングで、Vue.jsは双方向データバインディングなのでReactの方が考え方がシンプルなように感じた。Vue.jsはv-ディレクティブがたくさんあり、便利そうだが慣れていないせいか頭が混乱する。またどちらもかじりたいと思う。

Webvue-js