vue.jsを勉強する

[最終更新] 2021年7月25日

Vue.jsわかってなさすぎて死にたくなってきたので、一冊ちゃんと本を読んで勉強することにした。その備忘録。なお読んでいる本は山田祥寛著「速習Vue.js3」。

学んだことを羅列していく。

メソッドの簡略構文

Vue.createApp({
  data: function() {
    return {
      message: 'こんにちは'
    }
  }
}).mount('#app')

オブジェクトリテラルの値が関数であるとき、メソッド定義 | MDNより、こうかける。

Vue.createApp({
  data () {
    return {
      message: 'こんにちは'
    }
  }
}).mount('#app')

これよくわかってなかった。Vue以前の問題っていうね。

ディレクティブ

v-〜で始まる特別な属性。Vue.jsになんらかの指示を渡すための仕組み。

v-pre

Mustache構文の {{ … }} を無効化させる。

v-html

通常の {{ … }} によるデータバインディングと違って、文字列をhtmlとして埋め込む。外部からの入力を混在させないように注意。

v-bind:属性名

タグの属性に対しては {{ …. }} は使えない。なので、v-bindを利用すると、属性を操作できる。たとえばaタグのhref属性に、変数urlの値を入れるなら以下。

<div id="app">
  <a v-bind:href="url">サイト</a>
</div>

この場合、コロンで区切られたhrefはv-bindディレクティブの引数という扱い。v-bindはよく利用されるので省略することもできる。なんかscpでファイル名指定しない時みたいになってわかりづらいので使わないほうがいい気がする。

v-bind=”attrs” （attrsはdata()で定義するオブジェクト）みたいに、オブジェクトを入れることで、複数の属性をまとめて指定することもできる。

v-bind:style

v-bindでstyle属性を設定する時のもので、スタイルバインディングと呼ばれる。キャメルケースで設定する。

<div v-bind:style=”{ backgroudColor: ‘Yellow’, fontSize: ‘1.5em’ }”>{{ message }}</div

みたいな感じ。ベンダープレフィックスの自動補完機能とかもある。

手軽なスタイル設定方法だが、見通しが悪いので、あくまでプロト用として割り切る。

v-bind:class

本格的にスタイル適用させていくならこちらで。

v-cloak

初期化のタイミングでv-cloak属性を見つけると、破棄する。つまり、cloak付きの要素を非表示にするようなcssを作っておくと、最初は非表示だったのが、見つけられた時点で表示されるようになる。

v-on:イベント名.修飾子=”メソッド名(引数)”

イベントハンドラの設定。メソッドのところは直にjsも書けるが、見通しが悪くなるのでやめるがよい。引数でイベントハンドラに値も渡せる。修飾子で、たとえばclickでは特定のボタンを押しながら、とかも指定できる。

v-model

双方向データバインディング。内部的にはv-bind, v-on:change のシンタックスシュガー。

formで使う時、初期値は基本紐付いたプロパティになるが、value属性を使うとそっちが優先される。checked属性、selected属性も同様。

修飾子も色々。number修飾子やtrim修飾子など。lazy修飾子を使うと、変更のタイミングがフォーム要素からフォーカスが移動したタイミングになる（trim修飾子を使っていてもそう）。

v-once

一度だけデータバインディングする。値が変わらないことがわかっているなら、これで更新を制御できる。

v-if – v-else-if – v-else

指定の条件がtrueの時だけ要素を出力する。elseはfalseの時。v-elseはv-if or v-else-ifの直後でなくてはならない。

v-show

要素そのものを非表示する。出力はする。js的にはdisplayで制御している。v-ifよりも低コストなので、頻繁に表示・非表示を切り替えるならこちらを使う。

v-for=”b in books”

配列から要素を一つずつ取り出す。要素番号を取り出すときは、 v-for=”(b, i) in books” のように仮変数を2つ用意すればよい。

算出プロパティ

computed: … で定義できる。メソッドと違って、this.〜 が変更された時にだけ評価されるので、基本は算出プロパティをベースに考えるほうが省エネ。メソッドは再描画が走るたびに評価される。

コンポーネント

グローバル登録とローカル登録

グローバル登録はアプリ全体でコンポーネントを有効にする。ローカル登録は特定のコンポーネント配下でのみ有効。

コンポーネントに値を渡す

属性名はケバブケースだが、プロパティはキャメルケース。渡された値は、コンポーネント内で変えるべきではない。値をいじりたいなら、算出プロパティを使うか、dataオブジェクトで別定義する。

親から子に渡すときは props。

子から親にわたすときは $emit カスタムイベントを使う。

関連記事

スポンサーリンク