[TOC] ## :-: 自定義指令(全局/局部) ``` <div id="app"> <input type="text" v-slice:5.number="content"> <p>{{ content }}</p> </div> <script> // 自定義指令(全局/局部) // 定義全局指令 -- Vue.directive(id, [definition]) // id -- String類型，5字符限制。v-slice // [definition] -- 類型可以為 function / Object 、 // 例子：注冊一個全局自定義指令 `v-slice` Vue.directive('slice', (el, bindings, vnode) => { // --- function // el -- 指令所綁定的元素，可以用來直接操作 DOM 。 /* binding -- 一個對象，包含以下屬性： name -- 指令名，不包括 v- 前綴。 value -- 指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。 oldValue -- 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。 expression -- 字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。 arg -- 傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。 modifiers -- 一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。 */ // vnode -- Vue編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。https://cn.vuejs.org/v2/api/#VNode-接口 // --------------------------------------------------------- // console.log(el, bindings, vnode); // let len = bindings.arg || 5; // 獲取傳入的參數、 // const val = bindings.value.slice(0, len); // vnode.content.content = val; }); Vue.directive('slice', { // --- Object // v-slice 綁定的時候會執行，只執行一次、 bind(el, binding, vnode) { // const val = bindings.value.slice(0, 5); // vnode.content.content = val; }, // 虛擬dom重新渲染的時候會執行(數據更新) updata，第一次加載不執行、 updata(el, binding, vnode) {}, // 當指令元素插入到DOM時會執行 inserted inserted(el, binding, vnode) { // 頁面渲染完成，讓input輸入框聚焦、 el.focus(); } }); new Vue({ el: '#app', data: { content: 'abc' }, // 定義局部指令 -- directives directives: { // --- 跟全局的寫法一致，可以傳 對象/函數 slice: (el, binding, vnode) => { // el -- 指令所綁定的元素，可以用來直接操作 DOM 。 /* binding -- 一個對象，包含以下屬性： name -- 指令名，不包括 v- 前綴。 value -- 指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。 oldValue -- 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。 expression -- 字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。 arg -- 傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。 modifiers -- 一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。 */ // vnode -- Vue編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。https://cn.vuejs.org/v2/api/#VNode-接口 } } }); </script> ``` ## :-: 自定義過濾器(全局/局部) ``` <!-- 自定義過濾器(全局/局部) --> <div id="app"> <input type="text" v-model.number="content"> <span>{{ content | toMoney('times') }}</span> </div> <script> // 自定義過濾器(全局/局部) -- Vue.filter(id, [definition]) // -- 全局·自定義過濾器 Vue.filter('toMoney', (value, times) => { // 傳遞的實際參數為第二個形參 // 把數組轉換為本地字符串。 // (1000000).toLocaleString() // "1,000,000" return value.toLocaleString(); }) new Vue({ el: '#app', data: { content: 1000000 }, // // -- 局部·自定義過濾器 // filters: { // toMoney: () => { // // ··· // } // } }); </script> ``` ## :-: 掛載及dom構建流程 ``` <div id="app">{{ test }}</div> <script> const oVue = new Vue({ el: '#app', template: '<p>111</p>', render(createElement) { // return <h1></h1>; // jsx語法，需要插件解析、 // createElement -- 新建一個新的元素 return createElement('div', { class: ['className', 'test'], style: { color: 'red', textAlign: 'center', 'background-color': '#444', } }, ['我是div呀...', createElement('h1', '我是一個h1標題')]); }, data: { test: '123' } }); oVue.$el // 返回：原生dom元素對象、 oVue.$el.outerHTML // 返回："<div id="app">123</div>" </script> ```  ## :-: vue - 生命周期 ``` <div id="app">{{ test }}</div> <script> // 生命周期 const oVue = new Vue({ el: '#app', data: { test: '123' }, beforeCreate() { // vue實例創造前 (很少用) console.log(this); }, created() { // vue實例創造后，開始有this.$data (一般用來調用ajax) console.log(this.$data); }, beforeMount() { // 掛載前 (很少用) console.log(this.$el); // dom對象：<div id="app">{{ test }}</div> }, mounted() { // 掛載后 (一般用來調用ajax，此時dom已經可以正常使用了) console.log(this.$el); // dom對象：<div id="app">123</div> }, beforeUpdate() { // 更改數據之前 console.log('before'); }, updated() { // 更改數據之后 console.log('after'); }, beforeDestroy() { // 將被銷毀 }, destroyed() { // 銷毀后 }, }); oVue.test = 'abc'; oVue.$destroy(); // 觸發銷毀 </script> ``` ## :-: vue - 計算屬性/偵聽器 ``` <div id="app">{{ demo }}</div> <script> // 計算屬性 及 偵聽器 的使用、 const oVue = new Vue({ el: '#app', data: { test: '123', name: 1, // data內this為window，所以 demo:'測試：'+this.test 的寫法是錯誤的！此時就需要借助 '計算屬性' / '偵聽器' }, computed: { // 計算屬性 demo() { return '測試：' + this.test; } }, watch: { // 偵聽器 (Function / Object) test() { // oVue.test 被改變時就會執行、 }, name: { handler(newVal) { console.log(1, newVal); }, // 數據沒有改變，第一次渲染就偵聽 immediate: true } }, }); // 另外一種創建偵聽器的方式 oVue.$watch('name', (newVal) => { console.log(2, newVal); }, { // 該Object為配置項 immediate: true }); </script> ```