模板語(yǔ)法
模板的理解
1）動(dòng)態(tài)的 html 頁(yè)面
2）包含了一些 JS 語(yǔ)法代碼
a.雙大括號(hào)表達(dá)式
b.指令(以 v-開頭的自定義標(biāo)
雙大括號(hào)表達(dá)式
1）語(yǔ)法: {{exp}}
2）功能: 向頁(yè)面輸出數(shù)據(jù)
3）可以調(diào)用對(duì)象的方法
指令一: 強(qiáng)制數(shù)據(jù)綁定
1）功能: 指定變化的屬性值
2）完整寫法:
v-bind:xxx='yyy' //yyy 會(huì)作為表達(dá)式解析執(zhí)行
3）簡(jiǎn)潔寫法:
:xxx='yyy'
.指令二: 綁定事件監(jiān)聽
1）功能: 綁定指定事件名的回調(diào)函數(shù)
2）完整寫法:
v-on:keyup='xxx'
v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'
3）簡(jiǎn)潔寫法:
@keyup='xxx' @keyup.enter='xxx'
?計(jì)算屬性和監(jiān)視
?計(jì)算屬性
1）在 computed 屬性對(duì)象中定義計(jì)算屬性的方法
2）在頁(yè)面中使用{{方法名}}來(lái)顯示計(jì)算的結(jié)果
常用內(nèi)置指令
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果為 true, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面
4）v-else: 如果為 false, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面
5）v-show : 通過(guò)控制 display 樣式來(lái)控制顯示/隱藏
6）v-for : 遍歷數(shù)組/對(duì)象
7）v-on : 綁定事件監(jiān)聽, 一般簡(jiǎn)寫為@
8）v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind
9）v-model : 雙向數(shù)據(jù)綁定
10）ref : 指定唯一標(biāo)識(shí), vue 對(duì)象通過(guò)$refs 屬性訪問(wèn)這個(gè)元素對(duì)象
11）v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果為 true, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面
4）v-else: 如果為 false, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面
5）v-show : 通過(guò)控制 display 樣式來(lái)控制顯示/隱藏
6）v-for : 遍歷數(shù)組/對(duì)象
7）v-on : 綁定事件監(jiān)聽, 一般簡(jiǎn)寫為@
8）v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind
9）v-model : 雙向數(shù)據(jù)綁定
10）ref : 指定唯一標(biāo)識(shí), vue 對(duì)象通過(guò)$refs 屬性訪問(wèn)這個(gè)元素對(duì)象
11）v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }
自定義指令
注冊(cè)全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
2）注冊(cè)局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
注冊(cè)全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
2）注冊(cè)局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
類與樣式
class 與 style 綁定
class 綁定
1）:class='xxx'
2）表達(dá)式是字符串: 'classA'
3）表達(dá)式是對(duì)象: {classA:isA, classB: isB}
4）表達(dá)式是數(shù)組: ['classA', 'classB']
style 綁定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 屬性
事件處理
?綁定監(jiān)聽:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(參數(shù))"
4）默認(rèn)事件形參: event
5）隱含屬性對(duì)象: $event
?事件修飾符
1）.prevent : 阻止事件的默認(rèn)行為 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
?按鍵修飾符
1）.keycode : 操作的是某個(gè) keycode 值的鍵
2）.keyName : 操作的某個(gè)按鍵名的鍵(少部分)
父子組件通信
組件間通信基本原則
1）不要在子組件中直接修改父組件的狀態(tài)數(shù)據(jù)
2）數(shù)據(jù)在哪, 更新數(shù)據(jù)的行為(函數(shù))就應(yīng)該定義在哪
此方式用于父組件向子組件傳遞數(shù)據(jù)
2）所有標(biāo)簽屬性都會(huì)成為組件對(duì)象的屬性, 模板頁(yè)面可以直接引用
3）問(wèn)題:
a.如果需要向非子后代傳遞數(shù)據(jù)必須多層逐層傳遞
b.兄弟組件間也不能直接 props 通信, 必須借助父組件才可以
