(公式サイトで勉強中)
公式サイト Vue.js で学んだことの備忘録。この記事のテキストや図は、公式サイトから抜粋しています(多少、自分なりの言葉に置き換えたり、情報をまとめています)。
Vue を利用することで、データと DOM は関連付け、すべてが リアクティブ（反応的） になる。
VS Code 拡張機能 es6-string-html をインストールしておくと便利
ディレクティブ
v-接頭辞がついた属性は、Vueが定義した属性のことで、ディレクティブと呼ばれる(Vueには、かなりの数のディレクティブがあるとのことだが、チュートリアルで見つかり次第追加していく)。ディレクティブの値は単一のJavaScript式となる(ただし、v-on と v-for は例外)。
| v-bind | テキストデータを表示する v-bind:属性名=”JavaScript 式” 属性名は、v-bindへの引数 例外 真偽値属性(disapled のような)の場合は異なる挙動をする場合がある(*1) v-bind: は : と省略できる(省略記述が主流) |
| v-model | フォームの入力とアプリケーションの状態を双方向にbindする * 同じ要素に、v-model と v-bind:value と記述するとエラーになる * 同じ要素に、value属性を記述してもエラーになる |
| v-on | イベントハンドラを処理する v-on:click=”イベント名” v-on: は @ と省略できる(省略記述が主流) |
| v-if | 条件分岐。要素を切り替える v-for と同時に利用することは推奨されていない(*2) |
| v-else | v-if または v-else-if 要素の直後になければ機能しない 値を持たない |
| v-else-if | v-if または v-else-if 要素の直後になければ機能しない 値にはJavaScriptの条件式をセットする |
| v-for | 配列内のデータを使って表示する v-for=”キー名 in 配列名” in の代わりに of を使うこともできる(JavaScriptのイテレータ構文に近い) オブジェクトを反復処理する v-for=”キー名, 値名 in オブジェクト名” 順序はすべてのJavaScriptエンジンでの一貫性は保証されていないので注意 整数値を取ることもできる v-for=”n in 10″ v-if と同時に利用することは推奨されていない(*2) key属性をセットすることが推奨されている |
| v-show | シンプルに要素のdisplay CSSプロパティを切り替える * v-if と異なるのは、template要素をサポートせず、v-elseとも連動しないこと |
*1 sample に “”(空文字) がセットされている場合
<button v-bind:disabled=”sample”> は、空文字は真偽値はfalseなのだが、
<button> とはならずに
<button disabled> とレンダリングされる
*2 v-if と v-for を同時に利用することは推奨されていない。両方使われた場合は、v-if が先に評価される
| v-once | データ変更時の更新は行われない (利用シーンが全く想像つかない…) |
| v-html | “Mustache” 構文(二重中括弧)はプレーンなテキストとして扱うが、v-htmlではhtmlとして出力する 【重要】XSS脆弱性を容易に引き起こすので、ユーザーから提供されたコンテンツは決してしようしてはいけない |
動的引数
動的引数の型は、string か null の想定のみで、HTMLの属性名として不正な文字（スペースや引用符）はエラーとなる
例) v-on:[eventName]=”doSomething” の場合、eventName の値に’click’ が渡されると、v-on:click と同等になる
(利用シーンとしては、イベントは異なるけど処理内容が同じ場合に有用ってことかな。例えばclickとtouchstartを判別したいときとかかな？？未知の世界)
修飾子(Modifier)
例) v-on:submit.prevent=”doSomething” の場合、onSubmitが実行される際、event.preventDefault() を呼ぶように伝える。
(うーん、イメージできない。関数内の処理の方が分かりやすいような気がするが、eventを変数として渡す装丁がないからかな？？もっと知った後に調べる必要ありの憶測)
JavaScript式の制約
テンプレート式内ではユーザーが定義したグローバルオブシェクトにアクセスしてはいけない。
アプリーケーションとコンポーネントのインスタンス
アプリケーションインスタンスを作成するところから始まる。そしてアプリケーションはDOM要素にマウントする必要がある。
例) <div id=”app”></div> にマウントする場合
const app = Vue.createApp({
/* options */
})
const vm = app.mount("#app")ライフサイクル
TIP アロー関数をコンポーネントオプションのプロパティやコールバックに使用してはいけない。アロー関数は this を持たないが、コンポーネントオプションでは this (インスタンス) を参照するため
独自のコードを追加できるように、ライフサイクルフック(beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted) と呼ばれる関数がある。それぞれの実行タイミングはライフサイクルダイアグラムが公式サイトにあったが、これは分かりやすいので転載。
算出プロパティ
Badサンプル
Vue.createApp({
data() {
return {
author: {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
}
}
})authorが本を持っているかどうかによって違うメッセージを表示しようとした場合、{{ author.books.length > 0 ? ‘Yes’: ‘No’ }} のように記述する必要があり、タイムロスがある。
そこで、このようなリアクティブなデータを含む複雑なロジックには算出プロパティを使う。
Goodサンプル
Vue.createApp({
data() {
return {
author: {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
}
},
computed: {
// 算出 getter 関数
publishedBooksMessage() {
// `this` は vm インスタンスを指す
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
})算出プロパティではなく、メソッドとして定義することもできる。ただし、算出プロパティはリアクティブな依存関係に基づいてキャッシュされるという違いある。
算出プロパティ(computed) vs メソッド(methods)
疑問: computed の関数を @clickにセットしていた場合、クリックするまでその関数は実行されないことを期待したが、読み込み時に実行されてしまう。これは仕様なのかバグなのかよく分からない。
算出プロパティ(computed) vs 監視プロパティ(watch)
非同期通信や重い処理を実行したい場合に、watch が便利。
現時点で不明なこと
https://v3.ja.vuejs.org/guide/data-methods.html#%E3%83%A1%E3%82%BD%E3%83%83%E3%83%88%E3%82%99
Debounce (デバウンス) と Throttle (スロットル)
コンポーネントが再利用するかしないかで記述が変わるとのことと、ライブラリを使うことが一緒に記載されているが、どういう関わりがあるのか、まだ理解できていない
fatal ??
this.error && this.error.type === ‘fatal’
とはどういうことだろう？これはJavaScriptの知識かな。エラーハンドリング時のtypeのことだろうか。ググっても該当記事なし。詳細知りたい
styleではベンダープレフィックスは自動で付与してくれるとのこと。これはすごい。サンプルではstyleプロパティに複数の値を付与する例があるが、もはや不要ということになる。なぜサンプルとして残しているのかは不明
HTMLにonclickのようなイベントリスナーを書くことに対しての抵抗あり。
これは外部化すべきという流れがあったはずだ。とはいえ、実際にレンダリングされたソースには、onclickのような記述が書き出されるわけではないので問題ないのだが、なんともいえない違和感は正直ある。
たとえば、ページ内の異なるコンポーネントで、それぞれ同じ処理を実行させたい場合はどうするのだろう？