成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令

未東興 / 1713人閱讀

摘要：注意，在里面，代碼復(fù)用的主要形式和抽象是組件然而，有的情況下你仍然需要對純元素進(jìn)行底層操作這時候就會用到自定義指令。注冊一個全局自定義指令當(dāng)綁定元素插入到中。

混合是什么 
混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。
例如:
var tpl1={
    template:"#stpl1",
    data:function(){
        return {msg:false}
    },
    methods:{
        msgf:function(){
            this.msg=!this.msg
        }
    }
}
var tpl2={
    template:"#stpl2",
    data:function(){
        return {msg:false}
    },
    methods:{
        show:function(){
            this.msg=true
        },
        hide:function(){
            this.msg=false
        }
    }
}
new Vue({
    el:"#box",
    components:{
        tpla:tpl1,
        tplb:tpl2,
    }
})

我們會發(fā)現(xiàn),兩個組件中的數(shù)據(jù)大多數(shù)相同,這是我們可以將它們進(jìn)行混合

// 首先,定義一個混合對象
var mymixin = {
    data:function(){
        return {msg:false}
    },
    methods:{
        show:function(){
            this.msg=true
        },
        hide:function(){
            this.msg=false
        },
        msgf:function(){
            this.msg=!this.msg
        }
    }
}
var tpl1={
    template:"#stpl1",
    minins:[mymixin]
}
var tpl2={
    template:"#stpl2",
    minins:[mymixin]
}
// 如果我們需要在第一個組件定義data為true時,我們可以直接在組件內(nèi)定義,他會覆蓋mixin的data
var tpl1={
    template:"#stpl1",
    minins:[mymixin],
    data:function(){
        msg:true
    }
}
自定義指令 
除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ),Vue 也允許注冊自定義指令。注意，在 Vue2.0 里面，代碼復(fù)用的主要形式和抽象是組件——然而，有的情況下,你仍然需要對純 DOM 元素進(jìn)行底層操作,這時候就會用到自定義指令。
// 注冊一個全局自定義指令 v-focus
Vue.directive("focus", {
  // 當(dāng)綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

也可以注冊局部指令，組件中接受一個 directives 的選項：

directives: {
  focus: {
    // 指令的定義---
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 屬性：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88365.html

相關(guān)文章

  • Vue 混合、自定義指令、插件

    摘要：當(dāng)組件和混合對象含有同名選項時，這些選項將以恰當(dāng)?shù)姆绞交旌献远x指令除了默認(rèn)設(shè)置的核心指令和也允許注冊自定義指令。 vue的復(fù)用性與組合 混合 混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；旌蠈ο罂梢园我饨M件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。 當(dāng)組件和混合對象含有同名選項時，這些選項將以恰當(dāng)?shù)姆绞交旌? ...

    whlong 評論0 收藏0

  • Vue的混合、自定義指令和插件

    摘要：可復(fù)用性和組合混合混合是一種分發(fā)組件中可復(fù)用功能的非常靈活的方式。官方例子定義一個混合對象定義一個使用混合對象的組件自定義指令允許自定義指令。 可復(fù)用性和組合 混合 混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；旌蠈ο罂梢园我饨M件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。 showImg(https://segment...

    wwolf 評論0 收藏0

  • vue.js學(xué)習(xí)和實(shí)戰(zhàn)筆記

    摘要：第二個是其值是或，確認(rèn)是否深入監(jiān)聽。一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的，數(shù)組的值變化可以聽到第三個是其值是或，確認(rèn)是否以當(dāng)前的初始值執(zhí)行的函數(shù)?；旌隙x來分發(fā)組件中的可復(fù)用功能結(jié)束，撒花文章已同步我的筆記，歡迎大家加，加后人生更加美好 vue.js記錄 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后...

    Pandaaa 評論0 收藏0

  • VUE2.0學(xué)習(xí)筆記

    摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。差別在哪里將特性名轉(zhuǎn)換為從開始支持語法糖，會擴(kuò)展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素，可以使用包裹。 1.前言 安裝 直接用 引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

    pumpkin9 評論0 收藏0

  • 前端面試題總結(jié)——VUE（持續(xù)更新中）

    摘要：前端面試題總結(jié)持續(xù)更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求。 前端面試題總結(jié)——VUE（持續(xù)更新中） 1.active-class是哪個組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？ 在 VueRouter 的參數(shù)中使用 children 配置，這樣就可以很好的實(shí)現(xiàn)路由嵌套。 //引入兩個組件 ...

    SimonMa 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<