1.5. class 與 style 綁定
1.5.1. 理解
1）在應用界面中, 某個(些)元素的樣式是變化的
2）class/style 綁定就是專門用來實現動態樣式效果的技術
1.5.2. class 綁定
1）:class='xxx'
2）表達式是字符串: 'classA'
3）表達式是對象: {classA:isA, classB: isB}
4）表達式是數組: ['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）當條件不成立時, v-if 的所有子節點不會解析
1.7. 列表渲染
1.7.1. 列表顯示指令
數組: v-for / index
對象: v-for / key
1.7.2. 列表的更新顯示
刪除 item
替換 item
1.7.3. 列表的高級處理
列表過濾
列表排序
1.8. 事件處理
1.8.1. 綁定監聽:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(參數)"
4）默認事件形參: event
5）隱含屬性對象: $event
1.8.2. 事件修飾符
1）.prevent : 阻止事件的默認行為 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
1.8.3. 按鍵修飾符
1）.keycode : 操作的是某個 keycode 值的鍵
2）.keyName : 操作的某個按鍵名的鍵(少部分)
1.9. 表單輸入綁定
1.9.1. 使用 v-model 對表單數據自動收集
1）text/textarea
2）checkbox
3）radio
4）select
1.10. Vue 實例生命周期
1.10.1. 生命周期流程圖
image.png
1.10.2. vue 生命周期分析
1）初始化顯示
*beforeCreate()
*created()
*beforeMount()
*mounted()
2）更新狀態: this.xxx = value
*beforeUpdate()
*updated()
3）銷毀 vue 實例: vm.$destory()
*beforeDestory()
*destoryed()
1.10.3. 常用的生命周期方法
1）created()/mounted(): 發送 ajax 請求, 啟動定時器等異步任務
2）beforeDestory(): 做收尾工作, 如: 清除定時器
1.11. 過渡&動畫
1.11.1. vue 動畫的理解
1）操作 css 的 trasition 或 animation
2）vue 會給目標元素添加/移除特定的 class
3）過渡的相關類名
xxx-enter-active: 指定顯示的 transition
xxx-leave-active: 指定隱藏的 transition
xxx-enter/xxx-leave-to: 指定隱藏時的樣式
image.png
1.11.2. 基本過渡動畫的編碼
1）在目標元素外包裹<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
指定隱藏時的樣式: opacity/其它
