Vue.js 勉強メモ 5 (TypeScript で！！)

次はテンプレート構文だ。

jp.vuejs.org

テンプレートってあれね。各コンポーネントの template プロパティや、.vue の template タグで書いてた下のようなあれ。

<div>
  {{ message }}
  <ol>
    <li v-for="x in hogeeee">{{ x.text }}</li>
  </ol>
</div>

んで、これは別にテンプレートじゃなくて自分で JavaScript でこねくり回すこともできるみたい。こういうのをコードでこねくり回すのはつらいのは世の常なので、ドキュメントのインデックスの下の方に JSX についての項目があるのは、そういうことなんだろうなぁと思った。

描画関数とJSX — Vue.js

テンプレートのポイント

テキストを出力するための {{ xxx }} だけど自動で変更を検知して見た目を更新してくれる。

v-once ディレクティブを指定すると、変更を監視しなくなるらしい。たくさんの変更されないデータがあるときは、これを指定しておくと捗りそう。SIer では必須っぽいなってなんとなく思った。（偏見だけど、すごいたくさんの項目を出しまくる画面とかがありそうって思ってる）

v-html ディレクティブはエスケープされない状態で出力できるのでマークダウンエディターのプレビュー画面みたいなのを作るときに重宝する。デフォルトでエスケープしてくれるのはいいね。

タグの属性に Vue のプロパティの値を流し込みたいときは v-bind ディレクティブを使う。

例えばこんな Vue クラスのインスタンスで

import Vue from 'vue'

const app = new Vue({
  el: '#app',
  data: {
    tooltip: 'ぽっぷあっぷ！',
    text: 'ぽっぷあっぷあるよ！',
  },
});

こんなテンプレートだと

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>ts-lab</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but ts-lab doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app" v-bind:title="tooltip">{{ text }}</div>
    <!-- built files will be auto injected -->
  </body>
</html>

こうなる

f:id:okazuki:20190219174446p:plain

そして、v-bind や {{ ... }} の中には単一の式も書ける。便利。

v-if, v-for, v-bind, v-on あたりが登場してた。特に気になったのが v-on:submit.prevent みたいに修飾子という機能を使うことで、event.preventDefault() をしてくれたりとかがあること。これは知らないと謎だったわ。

そのほかに v-bind が ; で省略できたり v-on が @ になったりとか省略形がある。確かにめんどいよね v-xxx ってうつの。

:title="xxx" -> v-bind:title="xxx"
@click="onHoge" -> v-on:click="onHoge"

まとめ

本文と関係ないけど、ここらへんの変更があるということは目を通しておきながら 2.x 勉強したほうがいいかも。

qiita.com

かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Vue.js 勉強メモ 5 (TypeScript で！！)

テンプレートのポイント

まとめ