1.5. class 與 style 綁定
1.5.1. 理解
1）在應(yīng)用界面中, 某個(gè)(些)元素的樣式是變化的
2）class/style 綁定就是專門用來實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)
1.5.2. class 綁定
1）:class='xxx'
2）表達(dá)式是字符串: 'classA'
3）表達(dá)式是對(duì)象: {classA:isA, classB: isB}
4）表達(dá)式是數(shù)組: ['classA', 'classB']
1.5.3. style 綁定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 屬性
1.6. 條件渲染
1.6.1. 條件渲染指令
1）v-if 與 v-else
2）v-show
1.6.2. 比較 v-if 與 v-show
3）如果需要頻繁切換 v-show 較好
4）當(dāng)條件不成立時(shí), v-if 的所有子節(jié)點(diǎn)不會(huì)解析
1.7. 列表渲染
1.7.1. 列表顯示指令
數(shù)組: v-for / index
對(duì)象: v-for / key
1.7.2. 列表的更新顯示
刪除 item
替換 item
1.7.3. 列表的高級(jí)處理
列表過濾
列表排序
1.8. 事件處理
1.8.1. 綁定監(jiān)聽:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(參數(shù))"
4）默認(rèn)事件形參: event
5）隱含屬性對(duì)象: $event
1.8.2. 事件修飾符
1）.prevent : 阻止事件的默認(rèn)行為 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
1.8.3. 按鍵修飾符
1）.keycode : 操作的是某個(gè) keycode 值的鍵
2）.keyName : 操作的某個(gè)按鍵名的鍵(少部分)
1.9. 表單輸入綁定
1.9.1. 使用 v-model 對(duì)表單數(shù)據(jù)自動(dòng)收集
1）text/textarea
2）checkbox
3）radio
4）select
1.10. Vue 實(shí)例生命周期
1.10.1. 生命周期流程圖
image.png
1.10.2. vue 生命周期分析
1）初始化顯示
*beforeCreate()
*created()
*beforeMount()
*mounted()
2）更新狀態(tài): this.xxx = value
*beforeUpdate()
*updated()
3）銷毀 vue 實(shí)例: vm.$destory()
*beforeDestory()
*destoryed()
1.10.3. 常用的生命周期方法
1）created()/mounted(): 發(fā)送 ajax 請(qǐng)求, 啟動(dòng)定時(shí)器等異步任務(wù)
2）beforeDestory(): 做收尾工作, 如: 清除定時(shí)器
1.11. 過渡&動(dòng)畫
1.11.1. vue 動(dòng)畫的理解
1）操作 css 的 trasition 或 animation
2）vue 會(huì)給目標(biāo)元素添加/移除特定的 class
3）過渡的相關(guān)類名
xxx-enter-active: 指定顯示的 transition
xxx-leave-active: 指定隱藏的 transition
xxx-enter/xxx-leave-to: 指定隱藏時(shí)的樣式
image.png
1.11.2. 基本過渡動(dòng)畫的編碼
1）在目標(biāo)元素外包裹<transition name="xxx" style="-webkit-font-smoothing: antialiased; box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; font-size: inherit;"></transition>
2）定義 class 樣式
指定過渡樣式: transition
指定隱藏時(shí)的樣式: opacity/其它
