技術標籤：前端體系構建vue

Vue的進階屬性

• Directives(指令)
• • 自定義指令
  • • 程式碼示例
    • directiveOptions
    • 指令的作用
• mixins(混入)【其實就是複製】
• • • 作用
• extends(繼承)
• • • 作用
• provide(提供)和inject(注入)
• • • 作用
    • 程式碼示例

Directives(指令)

自定義指令

程式碼示例

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
//宣告一個全域性指令
Vue.directive
 
("y", {
  inserted(el) {
    el.addEventListener("click", function () {
      console.log("y");
    });
  }
});
new Vue({
  el: "#app",
  template: `
        <div v-y>Hello</div>
    `
});
//宣告一個區域性指令
new Vue({
	...,
	derectives:{
		"x":directiveOptions
	}
 

})

directiveOptions

• bind(el,info,vnode,oldVnode)-類似於created
• inserted(el,info,vnode,oldVnode)-類似於mounted
• update(el,info,vnode,oldVnode)-類似於updated
• componentUpdate(el,info,vnode,oldVnode)-用的不多
• unbind(el,info,vnode,oldVnode)-類似於destroyed
• 程式碼案例

import Vue from "vue";
import App from "./App.vue"
 
;
Vue.config.productionTip = false;
new Vue({
  directives: {
    on2: {
      bind(el, info) {
        el.addEventListener(info.arg, info.value);
      },
      unbind(el, info) {
        el.removeEventListener(info.arg, info.value);
      }
    }
  },
  template: `
    <button v-on2:click="hi">點我</button>
  `,
  methods: {
    hi() {
      console.log("hi");
    }
  }
}).$mount("#app");

指令的作用

1. 主要用於DOM操作
   1.1. Vue例項/元件用於資料繫結、事件監聽、DOM更新
   1.2. Vue指令主要目的就是原生DOM操作
2. 減少重複
   2.1. 如果某個DOM操作經常使用，可封裝為指令
   2.2. 如果某個DOM操作較為複雜，也可封裝為指令

mixins(混入)【其實就是複製】

作用

• 減少data、methods、鉤子的重複
• 程式碼示例
  mixins混入

extends(繼承)

作用

• 減少data、methods、鉤子的重複
• 比mixins更抽象的封裝
• 實際工作中用的很少

provide(提供)和inject(注入)

作用

• 祖先提供東西，後代注入東西
• 大範圍、隔N代共享資訊

程式碼示例

引用網上的例子