在 Vue 框架下的代碼中,不多用到原生 DOM 操做,那是由於在 Vue 中將原生 DOM 操做都封裝成了指令,例如咱們前面見到的 <div v-text="xxx"></div>
指令,其實其內部操做就是:vue
div.innerText = xxx; //固然這裏的 div 是獲取得來的 DOM 元素
node
Vue 將原生 DOM 操做封裝成指令,那個元素想使用該指令,直接在 HTML 模板中的元素標籤中看成屬性使用就行,簡介方便,減小重複。app
可是 Vue 畢竟不能把全部 DOM 操做狀況都提早考慮進去封裝成對應指令,有些 DOM 操做還得開發者在實際中用到時才知道,所以 Vue 便提供了用戶自定義指令的方式,大體分爲以下兩種:框架
自定義指令和自定義組件相似,也分爲全局和局部,下面以自定義一個打印字符 y
的指令 v-y
爲例講解:ide
全局屬性就是在 Vue 提供的特定函數中註冊:函數
Vue.directive("y", { inserted: function(el) { el.addEventListener("click", () => console.log("y")); } });
只能用在定義該指令的 template 裏this
能夠是完整版的 template 屬性裏code
main.js
component
new Vue({ template:` <div v-y> <button>點擊</button> </div> `, directives:{ 'y':{ inserted: function(el) { el.addEventListener("click", () => console.log("y")); } } } }).$mount("#app");
或者是非完整版的 .vue 文件的 export default{}裏對象
app.vue
<template> <div> <button v-y>點擊</button> </div> </template> <script> export default { directives:{ 'y':{ inserted: function(el) { el.addEventListener("click", () => console.log("y")); } } } }; </script>
指令對象裏有5個函數屬性
{ bind: function (el,info,vnode,oldVnode) {}, //元素建立在內存中時執行 inserted: function (參數同上) {}, //元素插入頁面時執行 update: function (參數同上) {}, componentUpdated: function (參數同上) {}, unbind: function (參數同上) {} //元素消失時執行 }
函數屬性的參數中 el
是指調用該指令的元素,info
包含了全部信息,須要時就在 info
中找
混入的主要目的是爲了減小構造選項的重複,可將重複的構造選項的部分抽離出來放到一個單獨的 *.js
文件中,而後用 import
導入,再在構造選項中經過 mixins
屬性混入。
minxin 是智能混合,會根據添加的混入和當前的選項進行智能混合,而不是單純的複製。
繼承和 minxin 功能差很少,但 extend 更抽象些,兩者都是對構造選項的重複進行簡化,extend 能夠在原有 Vue 的空殼基礎上加上本身的定義屬性做爲固定屬性,而後在建立 Vue 對象時使用建立繼承了 Vue 的自定義類 MyVue。
MyVue.js
const MyVue = Vue.extend({ minxins: [log] }); export default MyVue;
父代提供共用數據或方法
{ //... provide(){ return { xx: this.changexx, yy: this.changeyy } }, methods:{ changexx(){ //... }, changeyy(){ //... } } }
後代注入東西對數據修改
{ inject: ["changexx", "changeyy"] }
和 .sync
修飾符的做用有點像,但比 .sync
要普遍。