一、品牌項目的添加功能的思路（雙向數據綁定）： 二、過濾器： 1、過濾器調用時候的格式： {{ name | 過濾器的名稱 }} 2、過濾器的定義語法： 3、定義私有過濾器有兩個條件：過濾器的名稱 和 處理函數 三、自定義指令： 樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這 ...
過濾器：
過濾是一個數據經過了這個過濾之後出來另一樣東西，可以是從中取得你想要的，或者給那個數據添加點什麼裝飾。過濾器就是過濾用的工具。渲染數據用的！！！
我們需要知道的是：
1、Vue中的過濾器不能替代Vue中的methods、computed或者watch。
2、過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本。
一、品牌項目的添加功能的思路（雙向數據綁定）：
二、過濾器：
1、過濾器調用時候的格式：
{{ name | 過濾器的名稱 }}
2、過濾器的定義語法：
Vue.filter('過濾器的名稱’， function(){})
//過濾器中的function ， 第一個參數，已經被規定死了，永遠都是 過濾器 管道符| 前面 傳遞過來的數據
3、定義私有過濾器有兩個條件：過濾器的名稱 和 處理函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <p>{{ msg | msgFormat('瘋狂+1','123') | test }}</p> </div> <script> // 定義一個VUE全局的過濾器，名字叫 msgFormat Vue.filter("msgFormat", function(msg, arg, arg2) { // 字元串的replace 方法，第一個參數，除了可寫一個字元串之外，還可以定義一個正則 return msg.replace(/單純/g, arg + arg2); }); Vue.filter("test", function(msg) { return msg + "========"; }); var vm = new Vue({ el: "#app", data: { msg: "我們都是一群單純的人，單純的年代培養著單純的我們" } }); </script> </body> </html>
三、自定義指令：
//使用 Vue.directive() 定義的指令 v-focus
// 其中：參數1： 指令的名稱，註意，在定義的時候，指令的名稱前面，不需要加v-首碼
//但是,在調用的時候，必須在指令名稱前，加上v-首碼來進行調用
// 參數2： 是一個對象，這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段，執行相關的操作
vue.directive("focus", {
bind: function(el) {
//每當指令綁定到元素上的時候，會立即執行這個bind 函數，只執行一次
//註意：在每個函數中，第一個參數，永遠都是el，表示 被綁定了指令的那個元素，這個el參數，是一個原生的JS對象
//在元素 剛綁定了指令的時候，還沒有插入到DOM中去，這時候，調用 focus 方法沒有作用
//因為，一個元素，只有插入DOM後，才能獲取焦點
},
inserted: function(el) {
//inserted表示元素插入到DOM中的時候，會執行 inserted 函數（觸發1次）
el.focus();
},
updated: function(el) {
//當VNode更新的時候，會執行 updated，可能會觸發多次
}
樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內聯的樣式，將來元素肯定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素。
詳情見菜鳥教程有關鉤子函數介紹https://www.runoob.com/vue2/vue-custom-directive.html
鉤子函數的參數有：
- el: 指令所綁定的元素，可以用來直接操作 DOM 。
- binding: 一個對象，包含以下屬性：
- name: 指令名，不包括
v-首碼。 - value: 指令的綁定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令綁定的前一個值，僅在
update和componentUpdated鉤子中可用。無論值是否改變都可用。 - expression: 綁定值的表達式或變數名。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 傳給指令的參數。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一個包含修飾符的對象。 例如：
v-my-directive.foo.bar, 修飾符對象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 編譯生成的虛擬節點。
- oldVnode: 上一個虛擬節點，僅在
update和componentUpdated鉤子中可用。//獲取焦點的字體顏色變成指定的顏色！ Vue.directive("color", { bind: function(el, binding) { el.style.color = binding.value; } });
