官網(wǎng)
1）英文官網(wǎng):?https://vuejs.org/
2）中文官網(wǎng):?https://cn.vuejs.org/
Vue特點(diǎn)
1）遵循 MVVM 模式
2）編碼簡潔, 體積小, 運(yùn)行效率高, 適合移動/PC 端開發(fā)
3）它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項(xiàng)目
與其它前端 JS 框架的關(guān)聯(lián)
1）借鑒 angular 的模板和數(shù)據(jù)綁定技術(shù)
2）借鑒 react 的組件化和虛擬 DOM 技術(shù)
模板語法
模板的理解
1）動態(tài)的 html 頁面
2）包含了一些 JS 語法代碼
a.雙大括號表達(dá)式
b.指令(以 v-開頭的自定義標(biāo)
雙大括號表達(dá)式
1）語法: {{exp}}
2）功能: 向頁面輸出數(shù)據(jù)
3）可以調(diào)用對象的方法
指令一: 強(qiáng)制數(shù)據(jù)綁定
1）功能: 指定變化的屬性值
2）完整寫法:
v-bind:xxx='yyy' //yyy 會作為表達(dá)式解析執(zhí)行
3）簡潔寫法:
:xxx='yyy'
.指令二: 綁定事件監(jiān)聽
1）功能: 綁定指定事件名的回調(diào)函數(shù)
2）完整寫法:
v-on:keyup='xxx'
v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'
3）簡潔寫法:
@keyup='xxx' @keyup.enter='xxx'
?計(jì)算屬性和監(jiān)視
?計(jì)算屬性
1）在 computed 屬性對象中定義計(jì)算屬性的方法
2）在頁面中使用{{方法名}}來顯示計(jì)算的結(jié)果
常用內(nèi)置指令
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果為 true, 當(dāng)前標(biāo)簽才會輸出到頁面
4）v-else: 如果為 false, 當(dāng)前標(biāo)簽才會輸出到頁面
5）v-show : 通過控制 display 樣式來控制顯示/隱藏
6）v-for : 遍歷數(shù)組/對象
7）v-on : 綁定事件監(jiān)聽, 一般簡寫為@
8）v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind
9）v-model : 雙向數(shù)據(jù)綁定
10）ref : 指定唯一標(biāo)識, vue 對象通過$refs 屬性訪問這個(gè)元素對象
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)簽才會輸出到頁面
4）v-else: 如果為 false, 當(dāng)前標(biāo)簽才會輸出到頁面
5）v-show : 通過控制 display 樣式來控制顯示/隱藏
6）v-for : 遍歷數(shù)組/對象
7）v-on : 綁定事件監(jiān)聽, 一般簡寫為@
8）v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind
9）v-model : 雙向數(shù)據(jù)綁定
10）ref : 指定唯一標(biāo)識, vue 對象通過$refs 屬性訪問這個(gè)元素對象
11）v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }
自定義指令
注冊全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
2）注冊局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
注冊全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
2）注冊局部指令
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á)式是對象: {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）隱含屬性對象: $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)簽屬性都會成為組件對象的屬性, 模板頁面可以直接引用
3）問題:
a.如果需要向非子后代傳遞數(shù)據(jù)必須多層逐層傳遞
b.兄弟組件間也不能直接 props 通信, 必須借助父組件才可以
