目錄1、Directive 自定義指令2、Mixin 混入3、Extends 繼承4、provide 和 inject1、Directive 自定義指令

在 Vue 框架下的代碼中，很少用到原生 DOM 操作，那是因為在 Vue 中將原生 DOM 操作都封裝成了指令，例如我們前面見到的 <div v-text='xxx'></div> 指令，其實其內部操作就是：

div.innerText = xxx; //當然這里的 div 是獲取得來的 DOM 元素

Vue 將原生 DOM 操作封裝成指令，那個元素想使用該指令，直接在 HTML 模板中的元素標簽中當作屬性使用就行，簡介方便，減少重復。

但是 Vue 畢竟不能把所有 DOM 操作情況都提前考慮進去封裝成對應指令，有些 DOM 操作還得開發者在實際中用到時才知道，因此 Vue 便提供了用戶自定義指令的方式，大致分為如下兩種：

自定義指令和自定義組件類似，也分為全局和局部，下面以自定義一個打印字符 y 的指令 v-y為例講解：

全局指令

全局屬性就是在 Vue 提供的特定函數中注冊：

Vue.directive('y', { inserted: function(el) { el.addEventListener('click', () => console.log('y')); }});

局部指令

只能用在定義該指令的 template 里

可以是完整版的 template 屬性里

main.js

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>

directiveOptions

指令對象里有5個函數屬性

{ bind: function (el,info,vnode,oldVnode) {}, //元素創建在內存中時執行 inserted: function (參數同上) {}, //元素插入頁面時執行 update: function (參數同上) {}, componentUpdated: function (參數同上) {}, unbind: function (參數同上) {} //元素消失時執行}

函數屬性的參數中 el 是指調用該指令的元素，info 包含了所有信息，需要時就在 info 中找

2、Mixin 混入

混入的主要目的是為了減少構造選項的重復，可將重復的構造選項的部分抽離出來放到一個單獨的 *.js 文件中，然后用 import 導入，再在構造選項中通過 mixins 屬性混入。

minxin 是智能混合，會根據添加的混入和當前的選項進行智能混合，而不是單純的復制。

3、Extends 繼承

繼承和 minxin 功能差不多，但 extend 更抽象些，二者都是對構造選項的重復進行簡化，extend 可以在原有 Vue 的空殼基礎上加上自己的定義屬性作為固定屬性，然后在創建 Vue 對象時使用創建繼承了 Vue 的自定義類 MyVue。

MyVue.js

const MyVue = Vue.extend({ minxins: [log]});export default MyVue;4、provide 和 inject

父代提供共用數據或方法

{ //... provide(){return { xx: this.changexx, yy: this.changeyy} }, methods:{changexx(){ //...},changeyy(){ //...} }}

后代注入東西對數據修改

{ inject: ['changexx', 'changeyy']}

和 .sync 修飾符的作用有點像，但比 .sync 要廣泛。

以上就是詳解Vue進階構造屬性的詳細內容，更多關于Vue進階構造屬性的資料請關注好吧啦網其它相關文章！