技術標籤：遇見 “ vue ”vue

一、常用特性概覽

表單操作
自定義指令
計算屬性
過濾器
偵聽器
生命週期

二、表單操作

1、基於vue的表單操作

input  單行文字
textarea  多行文字
select  單選框
checkbox 多選框

2.表單域修飾符

number：轉化為數值
trim:去掉開始和結尾的空格
lazy:將input轉換為change事件

3.自定義指令

3.1為何需要自定義指令？
內建指令不滿足需求

3.2 自定義指令的語法規則（獲取元素焦點）

3.3自定義指令用法

<input type="text" v-focus
 
>

4.計算屬性

4.1為何需要計算屬性？
表示式的計算邏輯複雜 使用計算屬性可以使模板內容更簡潔
4.2計算屬性的用法

computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return this.message.split('').reverse().join('')
    }
  }

4.3計算屬性與方法的區別
計算屬性是基於它們的依賴進行快取的
方法不存在快取

5、偵聽器

1、偵聽器的應用場景
資料變化時執行非同步或開銷較大的操作
2.偵聽器的用法

watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

6、過濾器

6.1過濾器的作用什麼？
格式化資料 比如將字串格式化為首字母大寫，將日期格式化為指定的格式等
6.2 自定義過濾器

Vue.filter('過濾器名稱' , function(value){
//過濾器業務邏輯
}
 
)

6.3過濾器的使用

6.4區域性過濾器

6.5帶引數的過濾器

6.6.過濾器的使用

7、生命週期

7.1主要階段

掛載（初始化相關屬性）
beforeCreata
created
beforeMount
mounted
更新(元素或元件的變更操操作)
beforeUpdate
updated
銷燬(銷燬相關屬性）
beforeDestroy
destroyed

7.2vue例項的產生過程