詳解Vue進階構造屬性
1、Directive 自定義指令
在 Vue 框架下的代碼中，很少用到原生 DOM 操作，那是因為在 Vue 中將原生 DOM 操作都封裝成了指令，例如我們前面見到的 <div v-text="xxx"></div> 指令，其實其內部操作就是：
div.innerText = xxx; //當然這里的 div 是獲取得來的 DOM 元素
Vue 將原生 DOM 操作封裝成指令，那個元素想使用該指令，直接在 HTML 模板中的元素標簽中當作屬性使用就行，簡介方便，減少重復。
但是 Vue 畢竟不能把所有 DOM 操作情況都提前考慮進去封裝成對應指令，有些 DOM 操作還得開發(fā)者在實際中用到時才知道，因此 Vue 便提供了用戶自定義指令的方式，大致分為如下兩種：
自定義指令和自定義組件類似，也分為全局和局部，下面以自定義一個打印字符 y 的指令 v-y為例講解：
全局指令
全局屬性就是在 Vue 提供的特定函數(shù)中注冊：
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個函數(shù)屬性
{
bind: function (el,info,vnode,oldVnode) {}, //元素創(chuàng)建在內存中時執(zhí)行
inserted: function (參數(shù)同上) {}, //元素插入頁面時執(zhí)行
update: function (參數(shù)同上) {},
componentUpdated: function (參數(shù)同上) {},
unbind: function (參數(shù)同上) {} //元素消失時執(zhí)行
}
函數(shù)屬性的參數(shù)中 el 是指調用該指令的元素，info 包含了所有信息，需要時就在 info 中找
2、Mixin 混入
混入的主要目的是為了減少構造選項的重復，可將重復的構造選項的部分抽離出來放到一個單獨的 *.js 文件中，然后用 import 導入，再在構造選項中通過 mixins 屬性混入。
minxin 是智能混合，會根據(jù)添加的混入和當前的選項進行智能混合，而不是單純的復制。
3、Extends 繼承
繼承和 minxin 功能差不多，但 extend 更抽象些，二者都是對構造選項的重復進行簡化，extend 可以在原有 Vue 的空殼基礎上加上自己的定義屬性作為固定屬性，然后在創(chuàng)建 Vue 對象時使用創(chuàng)建繼承了 Vue 的自定義類 MyVue。
MyVue.js
const MyVue = Vue.extend({
minxins: [log]
});
export default MyVue;
4、provide 和 inject
父代提供共用數(shù)據(jù)或方法
{
//...
provide(){
return {
xx: this.changexx,
yy: this.changeyy
}
},
methods:{
changexx(){
//...
},
changeyy(){
//...
}
}
}
后代注入東西對數(shù)據(jù)修改
{
inject: ["changexx", "changeyy"]
}
和 .sync 修飾符的作用有點像，但比 .sync 要廣泛。
以上就是詳解Vue進階構造屬性的詳細內容，更多關于Vue進階構造屬性的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue 實現(xiàn)雙向綁定的四種方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue的特點之一是組件化開發(fā)，那么問題來了，組件中的數(shù)據(jù)和方法都是獨立的，我們如何進行組件之間的交互呢。這個時候就要用到組件傳參了2022-07-07
本篇文章主要介紹了VsCode新建VueJs項目的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關于uniapp微信小程序axios庫的封裝及使用的相關資料,Axios是一個基于promise網(wǎng)絡請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了axios在Vue項目中用來向后臺發(fā)送請求（調接口API），獲取響應信息的方法,axios 是一個輕量的 HTTP客戶端，基于 XMLHttpRequest 服務來執(zhí)行 HTTP 請求，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了vue結合AntV?G2的使用踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-cli3設置代理無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家介紹了vue3響應式實現(xiàn)readonly從零開始教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法
本篇文章主要介紹了vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04