Vue常用特性：表單操作、自定義指令、計算屬性、過濾器、偵聽器、生命週期

表單操作：使用v-model進行雙向繫結

• 表單操作分別有單行文字(text)、多行文字(textarea)、下拉多選(select)、單選框(radio)、多選框(checkbox)等；
• 提交可使用input:submit標籤，form標籤新增action屬性，值為跳轉的網站；提交按鈕可以用.prevent來取消預設行為，使按鈕不會跳轉；
• 單行文字、多行文字：可使用v-model進行繫結，在data中繫結；
• 單選框：分別提供一個value值來辨認，同一組的繫結同一個v-model值，data中單選框用字串，複選框用陣列來表示；
• 下拉選項：分別給option標籤提供一個value值來辨別，給select標籤繫結v-model值，data中單選用字串，多選用陣列來表示(可以給select標籤使用multiple屬性)；
• 表單域修飾符：繫結v-model時可使用；
• number：轉換為數值
• trim：去掉開始和結尾的空格
• lazy：將iniput事件切換為change事件

自定義指令：當內建指令不滿足需求時，可自定義指令來使用；

• 自定義指令的語法規則：(全域性指令)

/*不帶引數的自定義指令*/
/*獲取元素焦點*/
Vue.directive('focus',{     //'focus'定義名稱
    inserted:
 
function(el){  //inserted：鉤子函式，被繫結元素插入父節點時呼叫；el：表示指令所繫結的元素
        el.focus();
    }
})
/*自定義指令的使用*/
<input type="text" v-focus>

/*帶引數的自定義指令*/
/*改變元素背景色*/
Vue.directive('color',{
　　inserted:function(el,binding){
　　　　el.style.backgroundColor=binding.value.color;
　　}
})
/*使用*/
<input type="text" v-color="{color:'orange'}">  //第一種
 
<input type="text" v-color="msg">  Vue例項中：data：{color:'orange'}  //第二種

• 一個指令定義物件可提供多個鉤子函式，具體可查詢文件；
• 區域性例項：上面例子都是在全域性下編譯的，其中自定義指令可寫在例項內部；只能在它的作用域中使用；

/*自定義指令：獲取焦點元素和改變背景顏色*/
directives:{
    focus:{
        inserted:function(el){
            el.focus();
        }
    },
    color:{
        inserted:function(el,binding){
                el.style.background = binding.value.color;
        }
    }
}

計算屬性：表示式的計算邏輯可能會比較複雜，使用計算屬性可以使模板內容更加簡潔；

/*在例項中計算屬性的用法*/
var vm = new Vue({
    computed:{
        reverseMsg:function(){
                return this.msg.split('').reverse().join('');
        }
    }
})

• 計算屬性與方法的區別：計算屬性基於它們的依賴進行快取，而方法不存在快取；即當你開啟或執行例項時，計算屬性就先執行完成，並將資料儲存起來，而方法在呼叫時會重複執行；這樣看使用計算屬效能增加一些效能；
• 計算屬性依賴就是data中的資料，當依賴中的資料發生變化，所對應的資料結果也會發生變化；

偵聽器：偵聽器在資料發生變化時，會立刻執行偵聽器所繫結的方法，用於執行非同步或開銷較大的操作；

/*在例項中偵聽器的用法*/
/*改變兩個值的前後順序，在資料發生變化時數值也能立即改變*/
/*firstName：第一個的值、lastName：第二個的值、fullName：兩個按順序排放後的值*/
var vm = new Vue({
    data:{
        firstName:'xxx',
        lastName:'aaa',
        fullName:'xxx aaa'
    },
    watch:{
        firstName:function(val){//val為變化之後的值
            this.fullName = val + ' ' + this.lastName;
        }，
        lastName:function(val){
            this.fullName = this.firstName + ' ' + val;
        }
    }
})

• 偵聽器名字需要和數值名一致；上面例子也可以通過計算屬性實現：

computed:function(){
    return this.firstName + ' ' + this.lastName;
}

過濾器：可以格式化資料，比如字串格式轉化為首字母大寫，日期為指定格式等；

/*自定義過濾器*/
/*全域性指令*/
Vue.filter('過濾器名稱',function(value){
    //業務邏輯
　　return //返回值 ;
})
/*區域性指令(例項內)*/
filters:{
　　過濾器名稱:function(value){
　　　　//業務邏輯
　　　　return //返回值
　　}
}

/*過濾器的使用*/
//其中upprt、lower、formatID都是過濾器
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :id="id | formatId"></div>

　　其中過濾器也可以攜帶引數：

/*帶引數的過濾器*/
Vue.filter('過濾器名稱',function(value,arg1){
　　//value為過濾器傳遞過來的引數data，預設在第一個
})
/*過濾器的使用*/
<div>{{data | format('yyy-MM-dd')}}</div>

生命週期：每個Vue例項建立時，都會經歷一系列初始化過程，同時也會呼叫相應的生命週期鉤子，鉤子作為選項寫入例項中，並且this指向是它呼叫的例項；

/*主要階段*/

//掛載(初始化相關屬性)
beforeCreate：在例項初始化之後，資料觀測和事件配置之前被呼叫
created：在例項建立完成之後被立即呼叫
brforeMount：在掛載開始之前被呼叫
mounted：el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該鉤子

//更新(元素元件的變更操作)
beforeUpdate：資料更新時呼叫，發生在虛擬DOM打補丁之前
updated：由於資料更改導致的虛擬DOM重新渲染和打補丁，在這之後會呼叫該鉤子

//銷燬(銷燬相關屬性)
beforeDestroy：例項銷燬之前呼叫
destroyed：例項銷燬之後呼叫