表單基本操作
- v-model 綁定值 value屬性(index or row )
表單修飾符
- .number 轉為數值 <input v-model.number="age" type="number">
- .trim 去掉首尾空白 <input v-model.trim="msg">
- .lazy 延時更新 <input v-mode.lazy="msg">
計算屬性 computed (幾個數據來影響一個) 比如登錄的時候頁面權限可以放在計算屬性中
- 是基於他們的響應式依賴進行緩存的
- 多個對象或者對象處理後的
- 計算屬性讓模板簡單
監聽器 watch(一個數據變化影響多個)
- 使用watch 響應數據的變化
- 用戶異步或者開銷較大的操作
- watch中的屬性 一定是data中已經存在的數據
- 當監聽一個對想改變時 普通watch無法堅定到內部屬性改變 只有data中的數據才能監聽到變化 此時需要用deep 屬性對象深度監聽
過濾器
- 過濾器可以用在爽花括號插值和v-bind表達式
- 被添加到JavaScript表達式尾部 由“管道“符號指示
- 支持級聯操作
- 過濾器不改變真正到data 而是改變渲染結果 返回過濾後版本
- 全局註冊是filter 局部過濾器是filters
生命週期
- beforeCreate data和methods以及頁面DOM結構沒有初始化 什麼都做不了
- created 在實例創建完成之後被立即調用 此時data和methods可以使用 但是頁面沒有被渲染出來
- beforeMount 在掛載之前被調用 此時頁面看不到真實數據 只是模板頁面
- mounted el被新建的vm.$el替換
- beforeUpdate 數據更新時調用 在虛擬DOM打補丁之前 頁面數據還是舊的
- updated 數據更新導致虛擬DOM 重新渲染和補丁 在這之後調用該鉤子
- beforeDestroy 實例銷毀前調用
- destroyed 實例銷毀後調用
數組變異方式
- push() 往數組最後一個添加一個元素 成功返回當前的數組長度
- pop() 刪除數組最後一個元素 成功返回刪除元素的值
- shift() 刪除數組的第一個元素 成功返回刪除元素的值
- unshift() 往數組最前面添加一個元素 返回當前數組長度
- splice() 有三個參數 第一個是想要刪除的元素的下標(必選) 第二個是想要刪除的個數(必選) 第三個是刪除後想要替換的位置的值 ==》刪除 插入 替換 和第二第三個參數有關係
- sort() 按照字符編碼默認從小到大排序 返回數組
- reverse() 將數組倒敘 返回倒序後的數組
替換數組
不改變原始數組 返回新的數組
- filter() 創建新的數組 新數組的元素是通過檢查原數組中符合條件的所有元素
- concat() 連結兩個或多個數組
- slice() 從已有的數組中返回選定的元素
動態數組響應式數據
- Vue.set(a,b,c) 讓觸發的試圖更新一遍
- vm.$set(a,b,c) a是要更改的數據 b是數據的第幾項 c是更改後的數據