常用
v-if,v-show,v-for,v-bind,v-on,v-text,v-html,v-cloak,v-once
練習(xí)用網(wǎng)站
v-once
只渲染一次，以后重新渲染直接作為靜態(tài)內(nèi)容
v-model
雙向綁定數(shù)據(jù)
v-model與單選框
單選
v-model與復(fù)選框
復(fù)選框
v-model的修飾符
- lazy: v-model默認(rèn)在input輸入時(shí)同步數(shù)據(jù)，lazy變?yōu)閏hange事件觸發(fā)時(shí)同步，即失去焦點(diǎn)、回車同步。
- number: 把輸入的數(shù)字轉(zhuǎn)化為number類型
- trim: 把輸入的文字過(guò)濾首尾空格
簡(jiǎn)單的實(shí)現(xiàn)雙向綁定
<input type="“text”" :value="message" @input="message=$event.target.value"
/>
<p>{{ message }}</p>
<button @click="addP">+p</button>
data: {
message: 'hi'
},
method:{
addP:function(){
this.m
}
}
思路：添加一個(gè)函數(shù)在input的時(shí)候改變message
v-cloak
解決初始化慢頁(yè)面閃動(dòng)
不需要表達(dá)式
用法：
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
示例：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
不會(huì)顯示，直到編譯結(jié)束。
v-once
- 只渲染一次
v-if
v-if、v-else渲染時(shí)候會(huì)復(fù)用，加上key可以解決
v-if v.s v-show
v-if 如果為 false 是不渲染到 dom 上的
而 v-show 為 false 是渲染到 dom 上，display:none;
所以：
- v-show 有更高的初始化消耗，適用于切換頻繁的場(chǎng)景，如 Tab 等
- v-if 有更高的切換消耗，適用于權(quán)限控制等 一次渲染的場(chǎng)景
v-text v.s {{}}v
v-text 和{{}}效果基本一樣，但是 v-text 在網(wǎng)速慢數(shù)據(jù)未加載的時(shí)候顯示為空，{{}}會(huì)顯示在 html 中，但書寫方便，推薦使用 v-text
scoped
代碼
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
渲染為：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
值得注意的是：scoped 是用來(lái)保護(hù)本身樣式不影響全局，為組件私有樣式，不能保證全局變量不會(huì)影響到組件，所以命名還是要復(fù)雜點(diǎn)，比如加個(gè)前綴。
過(guò)濾器 filters
語(yǔ)法{{message|myFilter}}
|線后面加過(guò)濾器
過(guò)濾器串聯(lián)
{{message|myFilter1|myFilter2}}
過(guò)濾器參數(shù)
{{message|myFilter(11,12)}} => myFilter:function(value,a,b)
computed
methods v.s computed
計(jì)算屬性，只有當(dāng)依賴改變時(shí)候才會(huì)重新取值
計(jì)算屬性具有緩存，依賴不改變，值不會(huì)變，而 methods 無(wú)緩存，每次頁(yè)面重新渲染，方法就會(huì)重新執(zhí)行
getter 和 setter
計(jì)算屬性有 getter 和 setter，分別在讀取和設(shè)置時(shí)候用
fullName:{
get:function(){...}
set:function(){...} // app.fullName = 'setter text' 時(shí)候調(diào)用
}
}
watch
監(jiān)聽某一個(gè)數(shù)據(jù)變化，需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)候，這個(gè)方法最有用
example
v-bind
對(duì)象語(yǔ)法
<div v-bind:class="{ active: isActive }"></div>
以上代碼表示 isActive 存在，class 中有 active
對(duì)象的鍵為類名，值為布耳值
把對(duì)像放在 computed 里面
<div v-bind:class="classObject"></div>
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
數(shù)組語(yǔ)法
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div> //數(shù)組語(yǔ)法+對(duì)象語(yǔ)法
數(shù)組
改變數(shù)組的指定項(xiàng)
Vue.set(app.arr,1,”car”)
改變數(shù)組長(zhǎng)度
app.arr.splice(1)
v-on
官網(wǎng)
修飾
stop:阻止單擊事件向上冒泡prevent:
prevent:提交事件并且不重載頁(yè)面
self:只是作用在元素本身而非子元素的時(shí)候調(diào)用
once: 只執(zhí)行一次的方法
使用方法:
<button @click.once="myMethod"></button>
監(jiān)聽鍵盤事件
官網(wǎng)
概念
MVVM
MVVM是Model-View-ViewModel的縮寫。MVVM是一種設(shè)計(jì)思想。Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)，ViewModel 是一個(gè)同步View 和 Model的對(duì)象。
在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
ViewModel 通過(guò)v雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理。
