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

1、Vue 常用特性

1.1 Vue 常用特性概覽

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

1.2 表單操作

（1）基于 Vue 的表單操作

• Input 單行文本
• textarea 多行文本
• select 下拉多選
• radio 單選框
• checkbox 多選框

（2）表單域修飾符

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

<input type="text" v-model.number='age'>
<input type="text" v-model.trim='info'>
<input type="text" v-model.lazy='msg'>

1.3 自定義指令

（1）為何需要自定義指令？

內置指令不滿足需求，

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

// 自定義指令
Vue.directive('focus', {
    // 當被系結的元素插入到 DOM 中時
    inserted: function (el) {
        // el表示指令所系結的元素
        el.focus();  // 獲取焦點
    }
});

（3）自定義指令用法

<input type="text" v-focus>

（4）帶引數的自定義指令（改變元素背景色）

// 自定義指令-帶引數
Vue.directive('color', {
    // el：指令所系結的元素，可以用來直接操作 DOM，
    // binding：一個物件,包含：
    // name：指令名，不包括 v- 前綴，
    // value：指令的系結值  除此之外還有其他內容，這里省略
    bind: function (el, binding) {
        // console.log(binding);
        // console.log(binding.value);
        console.log(binding.value.color);
        // 根據指令的引數設定背景色
        el.style.backgroundColor = binding.value.color;
    }
});

（5） 指令的用法

<input type="text" v-color='{color:"orange"}'>

（6）區域指令

 // 自定義指令-區域指令
 var vm = new Vue({
     el: '#app',
     data: {
         msg: {
             color: 'red'
         }
     },
     methods: {
         handle: function () {
         }
     },
     directives: {
         color: {
             // el：指令所系結的元素，可以用來直接操作 DOM，
             // binding：一個物件,包含：
             // name：指令名，不包括 v- 前綴，
             // value：指令的系結值  除此之外還有其他內容，這里省略
             bind: function (el, binding) {
                 // console.log(binding);
                 // console.log(binding.value);
                 console.log(binding.value.color);
                 // 根據指令的引數設定背景色
                 el.style.backgroundColor = binding.value.color;
             }
         },
         focus: {
             inserted: function (el) {
                 el.focus();
             }
         }
     }
 });

<div id="app">
    <input type="text" v-color='msg'>
    <input type="text" v-focus>
</div>

1.4 計算屬性

（1） 為何需要計算屬性？

運算式的計算邏輯可能會比較復雜，使用計算屬性可以使模板內容更加簡潔，

（2）計算屬性的用法

<!-- 為何需要計算屬性？ -->
<!-- 運算式的計算邏輯可能會比較復雜，使用計算屬性可以使模板內容更加簡潔 -->
<div id="app">
    <div>{{msg}}</div>
    <div>{{reverseString}}</div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'ni hao'
        },
        // 計算屬性
        computed: {
            reverseString: function () {
                return this.msg.split('').reverse().join('');
            }
        }
    });
</script>

（3） 計算屬性與方法的區別

• 計算屬性是基于它們的依賴進行快取的，
• 方法不存在快取，

1.5 偵聽器

（1）偵聽器的應用場景

資料變化時執行異步或開銷較大的操作，

（2）偵聽器的用法

<div id="app">
    <div>
        <span>名：</span>
        <span>
            <input type="text" v-model='firstName'>
        </span>
    </div>
    <div>
        <span>姓：</span>
        <span>
            <input type="text" v-model='lastName'>
        </span>
    </div>
    <div>{{fullName}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<!-- 偵聽器的應用場景：資料變化時執行異步或開銷較大的操作 -->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Jim',
            lastName: 'Green',
            fullName: 'Jim Green'
        },
        // 計算屬性
        // computed: {
        //     fullName: function () {
        //         return this.firstName + ' ' + this.lastName;
        //     }
        // },
        // 偵聽器：資料一旦發生變化就通知偵聽器所系結方法
        watch: {
            firstName: function (val) {
                // val表示變化之后的值
                this.fullName = val + ' ' + this.lastName;
            },
            lastName: function (val) {
                // val表示變化之后的值
                this.fullName = this.firstName + ' ' + val;
            }
        }
    });
</script>

1.6 過濾器

（1）過濾器的作用是什么？

格式化資料，比如將字串格式化為首字母大寫，將日期格式化為指定的格式等，

（2）自定義過濾器

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

（3）過濾器的使用（支持級聯操作 ）

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id=“id | formatId"></div>

（4）區域過濾器

filters:{
	upper: function(){}
}

例子：

<!-- 過濾器的作用是什么？
格式化資料，比如將字串格式化為首字母大寫，將日期格式化為指定的格式等 -->
<div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div v-bind:abc='msg | upper'>測驗資料</div>
</div>
<script src="js/vue.js"></script>
<script>
    // 過濾器
    // 1、可以用與插值運算式和屬性系結
    // 2、支持級聯操作 
    // 全域過濾器
    // Vue.filter('upper', function (val) {
    //     return val.charAt(0).toUpperCase() + val.slice(1);
    // });
    Vue.filter('lower', function (val) {
        return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        // 區域過濾器
        filters: {
            upper: function (val) {
                return val.charAt(0).toUpperCase() + val.slice(1);
            }
        }
    })
</script>

（5）帶引數的過濾器

Vue.filter(‘format’, function(value, arg1){
	// value就是過濾器傳遞過來的引數
})

（6）過濾器的使用

<div>{{date | format(‘yyyy-MM-dd')}}</div>

例子：

 <div id="app">
     <div>{{date | format('yyyy-MM-dd')}}</div>
 </div>
 <script src="js/vue.js"></script>
 <script>
     // 過濾器案例：格式化日期
     Vue.filter('format', function (value, arg) {
         // value就是過濾器傳遞過來的引數
         if (arg == 'yyyy-MM-dd') {
             var ret = '';
             ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
             return ret;
         }
     });
     
    var vm = new Vue({
        el: '#app',
        data: {
            date: new Date()
        }
    });
</script>

1.7 生命周期

（1）主要階段

• 掛載（初始化相關屬性）
  ① beforeCreate
  ② created
  ③ beforeMount
  ④ mounted

• 更新（元素或組件的變更操作）
  ① beforeUpdate
  ② updated

• 銷毀（銷毀相關屬性）
  ① beforeDestroy
  ② destroyed

（2）Vue 實體的產生程序
① beforeCreate：在實體初始化之后，資料觀測和事件配置之前被呼叫，此時組件的選項物件還未創建，el 和 data 并未初始化，因此無法訪問 methods， data， computed等上的方法和資料，

② created：在實體創建完成后被立即呼叫，在這一步，實體已完成以下配置：資料觀測、屬性和方法的運算，watch/event事件回呼，完成了data 資料的初始化，el沒有，

③ beforeMount：在掛載開始之前被呼叫，相關的 render 函式首次被呼叫（虛擬DOM），實體已完成以下的配置： 編譯模板，把 data 里面的資料和模板生成 html，完成了 el 和 data 初始化，注意此時還沒有掛在 html 到頁面上，

④ mounted：el 被新創建的 vm.$el 替換，并掛載到實體上去之后呼叫該鉤子，模板中的 HTML 渲染到 HTML 頁面中，此時一般可以做一些 ajax 操作，mounted 只會執行一次，

⑤ beforeUpdate：資料更新時呼叫，發生在虛擬DOM打補丁之前，

⑥ updated：由于資料更改導致的虛擬DOM重新渲染和打補丁，在這之后會呼叫該鉤子，

⑦ beforeDestroy：實體銷毀之前呼叫，此時實體仍然完全可用，這一步還可以用 this 來獲取實體，一般在這一步做一些重置的操作，比如清除掉組件中的定時器 和 監聽的 dom 事件，

⑧ destroyed：實體銷毀后呼叫，呼叫后，所以的事件監聽器會被移出，所有的子實體也會被銷毀，該鉤子在服務器端渲染期間不被呼叫，