Vue(紙面一)
3720 ワード
どのようにVueを学ぶかについて、Vueの創設者である尤雨渓先輩はかつて、Vue 2.0の提案学習順序を知乎に発表したことがある.筆者はVscodeを用いたVueプロジェクト開発を推奨し,Webstormに比べてVscodeインタフェースが簡単で,運転時の占有体積が小さい.2ページ3ページ4
1.計算属性と観察者計算属性: オブザーバー:
2.Classとstyleバインド(:classと:style)インラインスタイルをバインドする場合、属性名はアルパカ値を使用する必要があり、単位は単一引用符を使用する必要があります.例えば、
3.条件レンダリングv-if、v-else、v-else-if v-if vs v-show
4.リストレンダリング
1.計算属性と観察者
computedVueは、複雑なデータ論理を推奨し、計算属性を使用する必要があります.計算プロパティは、それらの依存性に基づいてキャッシュされるためです.計算プロパティは、依存関係が変更された場合にのみ再評価されます.watchVueは、watchオプションによって、データの変化に応答するより一般的な方法を提供する.データの変化に応答したい場合は、非同期操作やオーバーヘッドの大きい操作を実行すると便利です.2.Classとstyleバインド(:classと:style)
3.条件レンダリング
v-elseは、v-else-ifまたはv-if要素の直後に続く必要があります.Vueは、要素をできるだけ効率的にレンダリングし、通常は多重化します.要素を多重化したくない場合は、最初からレンダリングするのではなく、一意の値を持つkeyプロパティを追加するだけで既存の要素を追加できます.例:v-else-ifv-ifも不活性です.初期レンダリング時に条件が偽の場合、条件が初めて真になるまで条件ブロックのレンダリングが開始されません.それに比べて、v-ifはずっと簡単です.初期条件が何であれ、要素は常にレンダリングされ、CSSに基づいて簡単に切り替えられます.一般に、v-showはより高いスイッチングオーバーヘッドを有し、v-ifはより高い初期レンダリングオーバーヘッドを有する.したがって、非常に頻繁に切り替える必要がある場合は、v-showを用いることが好ましい.実行時に条件が変更されない場合は、v-showを使用するとよい.4.リストレンダリング
v-ifv-for配列を巡回する場合、2つのパラメータv-forv-for
： v-for を する があります. な( な り key v-for)key は、 のように、 に し、 のidである.idはkeyと に しておらず、v-forは の を する.key,
Vue ， 。 ：
push(),pop(),shift(),unshift(),splice(),sort()とreverse()と して、 もある. えば、filter(),concat()とslice()である. :JavaScriptの のため、Vueは の する を できません:インデックスを して 1つの を する 、 えば:vm.items[indexOfItem] = newValue の さを する 、 えば:vm.items.length = newLength 1の を するために、 の2つの はいずれもvm.items[indexOfItem] = newValueと じ を することができます. 2の を するために、// Vue.set Vue.set(example1.items, indexOfItem, newValue):// Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)splice() を することができます.オブジェクト JavaScriptの により、Vueはオブジェクト の または を できません: var vm = new Vue({
data: {
a: 1
}
})
// `vm.a`
vm.b = 2
// `vm.b`
したインスタンスに して、Vueはルートレベルのレスポンス を に できません.ただし、example1.items.splice(newLength)メソッドを してネストされたオブジェクトに を できます.たとえば、 のようになります.var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
ネストされたuserProfileオブジェクトに しいageプロパティを できます:Vue.set(object, key, value)グローバルVue.set(vm.userProfile, 'age', 27)の :vm.$set のオブジェクトに の しいプロパティを り てる がある があります.たとえば、Vue.setまたはthis.$set(this.userProfile, 'age', 27)を します.この 、2つのオブジェクトのプロパティで しいオブジェクトを する があります. しいレスポンス を したい は、 のようにしないでください.Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
：
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})