學(xué)習(xí)vue從指令開(kāi)始
1.v-text 用來(lái)設(shè)置元素的文本內(nèi)容 相當(dāng)于innerText
用法：<h1 v-text="msg">默認(rèn)的文本內(nèi)容</h1>
2.v-html 相當(dāng)于innerHTML
用法：<h1 v-html="msg">默認(rèn)的文本內(nèi)容</h1>
3.v-bind 用來(lái)給當(dāng)前元素綁定html屬性症虑，進(jìn)行html屬性數(shù)據(jù)幫綁定
<h1 v-bind:title="msg" v-bind:zhidingyi="xm">默認(rèn)的文本內(nèi)容</h1>
簡(jiǎn)寫(xiě) <h1 :title="msg" :zhidingyi="xm">默認(rèn)的文本內(nèi)容</h1>
引號(hào)內(nèi)是表達(dá)式或?qū)傩?br>
樣式處理 class和style
對(duì)象的鍵表示類的名稱，值為true表示添加類，false不添加
<div v-bind:class="{ active: true }"></div> 等價(jià)于
<div class="active"></div>
<div :class="['active']"></div> 等價(jià)于
<div class="active"></div>
數(shù)組中元素不帶引號(hào)瞬欧，表示屬性悲幅，屬性的值表示類名
<div v-bind:class="[{ active: true }, shuxingClass]"></div> ===>
<div class="active text-danger"></div>
style:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
baseStyles是data的屬性氏豌，其值類型是對(duì)象（baseStyles：{fontSize: '30px'}）
<div v-bind:style="[baseStyles, overridingStyles]"></div>
4.v-on 綁定事件
語(yǔ)法：v-on:click=”say” or v-on:click=”say(‘參數(shù)’, event)” 簡(jiǎn)寫(xiě)：@click=”say” 完整語(yǔ)法 縮寫(xiě) name:屬性冤狡，帶引號(hào)就是字符串聊品；event:用于獲取當(dāng)前元素節(jié)點(diǎn)
<div @click="fn(name,$event)"></div>
vue配置項(xiàng)methods提供方法或事件
methods: {
doSomething：function（）{},
fn:function (na, e) {
e.currentTarget.innerHTML='hello'
this.msg = na
}
}
事件修飾符：
.stop 停止冒泡 調(diào)用 event.stopPropagation()
.prevent 阻止默認(rèn)行為肋坚，調(diào)用 event.preventDefault()
.capture 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式
.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)乡括，才會(huì)觸發(fā)事件
.once 事件只觸發(fā)一次
<button @click.stop="fn1">按鈕</button>
5.v-model 實(shí)現(xiàn)數(shù)據(jù)雙向綁定 監(jiān)聽(tīng)用戶的輸入事件更新數(shù)據(jù)
選擇后觸發(fā)cacl事件肃廓， opt的值發(fā)生改變
<select @change="calc" v-model="opt">
<option value="1">北京</option>
<option value="2">天津</option>
</select>
6.v-for
item 為值，key 為鍵诲泌，index 為索引
通過(guò) key 屬性來(lái)讓Vue保證列表中每一項(xiàng)的唯一性盲赊，提高渲染的性能
說(shuō)明：使用 key，vue會(huì)基于 key 的變化重新排列元素順序敷扫，并且會(huì)移除 key 不存在的元素哀蘑。
<div v-for="(item, key, index) in obj" :key="index">{{item}}</div>
<div v-for="item in obj">{{item}}</div>
7.v-if 和 v-show
v-if：根據(jù)表達(dá)式的值的真假條件，銷毀或重建元素
v-show：根據(jù)表達(dá)式值的真假葵第，切換元素CSS 的 display 樣式屬性
8.v-pre和v-once
v-pre：跳過(guò)這個(gè)元素和它的后代元素的編譯過(guò)程递礼。可以用來(lái)顯示原始 Mustache 標(biāo)簽羹幸。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯脊髓。
v-once：只渲染元素和組件一次。隨后的重新渲染栅受，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)将硝。用于優(yōu)化更新性能。
v-pre：跳過(guò)這個(gè)元素和它的后代元素的編譯過(guò)程屏镊∫捞郏可以用來(lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯而芥。
v-once：只渲染元素和組件一次律罢。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)棍丐。用于優(yōu)化更新性能误辑。
