Vueパッケージの異なるバージョン
ランタイム・コンパイルとビルド・コンパイル
ランタイムコンパイルとは、Vueが初期化されたときにrender()関数を提供せず、テンプレートのtemplate属性を探し、それを解析してrender()関数に変換することを意味します。そのため、実行時にコンパイルするオーバーヘッドを減らすために、一般的なプロジェクトでは、ビルド時にrender()関数をコンパイルし、実行時に直接実行する方が効率的です。ビルド時コンパイルを使用する場合は、実行時にコンパイルされたモジュールコードを削除するvue.jsパッケージに依存するだけでよく、実行時コンパイルを使用する場合は、完全なvue.jsパッケージに依存する必要があります。
一般的なデータ &computed属性
data: アクセスされるたびにプロパティの get() メソッドが呼び出されます。
computed: アクセスされるたびに、他のレスポンシブなデータに依存しない場合、値は変更されません; 他のレスポンシブなデータに依存する場合、依存するデータが変更された場合のみ値を再コールします。いくつかのシナリオは、メソッドの定義の値を毎回再計算する必要がある場合。デフォルトで計算された唯一のメソッドを取得する値に直接無効ですが、独自のセットメソッドを定義することができます。など：
// vmを呼び出す.fullName = 'John Doe' セッターは，vm.firstName vmと同じである。.lastName また、それに応じて更新され、値の再計算を引き起こすことになる。
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
v-bindとv-on指示文
v-bind：属性を要素にバインドするために使用されます。省略形では、属性名はhtml仕様に準拠した任意の値、または動的パラメータ（v2.6.0の新機能）にすることができます：
<!-->vmのデータまたは計算されたデータ内にattributeName変数があり、attributeNameがhrefと評価される場合、attributeNameはキーとなる。，
このアイデアは、死んだ属性名を書く代わりに、動的に評価することで属性をスパンにバインドし、プログラム可能な<-->
<span :[attributeName]="url"></span>
v-on：イベントを要素にバインドするために使用されます。省略形では、動的パラメータにもなります（v2.6.0の新機能）。
注意: ViewModel が破棄されると、全てのイベントハンドラは自動的に削除されます。
バインディングクラス（配列構文とオブジェクト構文）
配列構文はより柔軟で、オブジェクト構文や三項演算子も配列構文でサポートされています。
<p :class="['default-class', {isActive: 'active-class'}, isOpen ? 'open': '']">aaa</p>
バインディングスタイル
インラインスタイルのバインディング
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
オブジェクトを使用したインラインスタイルのバインディング
<!-->単一のスタイル オブジェクトをバインドする<-->
<div :style="styleObj"></div>
<!-->配列構文を使用して複数のスタイル オブジェクトを結合する<-->
<div :style="[styleObj1, styleObj2]"></div>
computed: {
styleObj() {
return {
color: 'red',
fontSize: this.fontSize
}
}
}
v-for
Vueは、v-forとv-ifが同じノード上で動作することを推奨していません。
これは、v-forとv-ifが同じノード上で動作する場合、v-forの方がv-ifよりも優先順位が高くなるため、v-ifがv-forの各ループで別々に繰り返し実行されることになるからです。このような優先順位付けの仕組みは、例えば、いくつかの項目のノードだけをレンダリングしたい場合に非常に便利です：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
<!-->v-for配列を使う<-->
<ul>
<li v-for="(item, index) in arr"></li>
<!-->
そのため
<li v-for="(item, index) of arr"></li>
<-->
</ul>
<!-->v-forオブジェクトを使用する場合、valueは属性の値、nameは属性の名前、indexはインデックスである。<-->
<!-->属性の順序は、Object.keys()結果は順当だが、JavaScriptエンジン間で一貫しているという保証はない。<-->
<ul>
<li v-for="(value, name, index) in obj"></li>
</ul>
<!-->v-for範囲値を使う<-->
<ul>
<!-->このテンプレートはレンダリングを100回ループする。~99<-->
<li v-for="(item, index) in 100">{{ item }}</li>
</ul>
key
同じ親を持つ子要素には一意のキーが必要です。キーが重複するとレンダリングエラーが発生します。
以下の2つの入力ラベルが同じキーにバインドされている場合、またはどちらもキーにバインドされていない場合、Vueはif else状態が表示に切り替わったときにラベルと入力ラベルを再利用します。
<!--公式ドキュメントより>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
v-forループのレンダリングでは、各項目に一意のキーをバインドする必要があります。これは、コーナーインデックスをキーとして使用するよりもはるかに優れています。
Vueコンポーネント
Vueコンポーネントのナレッジポイント
