vue 常用特性

表單基本操作

• 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是更改後的數據