Vue進階構(gòu)造屬性的示例分析

小編給大家分享一下Vue進階構(gòu)造屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、Directive 自定義指令

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

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

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

但是 Vue 畢竟不能把所有 DOM 操作情況都提前考慮進去封裝成對應(yīng)指令，有些 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)建在內(nèi)存中時執(zhí)行
    inserted: function (參數(shù)同上) {}, //元素插入頁面時執(zhí)行
    update: function (參數(shù)同上) {}, 
    componentUpdated: function (參數(shù)同上) {}, 
    unbind: function (參數(shù)同上) {} //元素消失時執(zhí)行
}

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

2、Mixin 混入

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

minxin 是智能混合，會根據(jù)添加的混入和當(dāng)前的選項進行智能混合，而不是單純的復(fù)制。

3、Extends 繼承

繼承和 minxin 功能差不多，但 extend 更抽象些，二者都是對構(gòu)造選項的重復(fù)進行簡化，extend 可以在原有 Vue 的空殼基礎(chǔ)上加上自己的定義屬性作為固定屬性，然后在創(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是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

以上是“Vue進階構(gòu)造屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！