斗破苍穹续集,玄幻小说完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Vue.js組件如何混合和自定義指令-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關(guān)Vue.js組件如何混合和自定義指令，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名與空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、新都網(wǎng)站維護、網(wǎng)站推廣。

混合是什么

混合 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式?；旌蠈ο罂梢园我饨M件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

例如:

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ù)相同,這是我們可以將它們進行混合

// 首先,定義一個混合對象
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
  }
}

自定義指令

除了默認設(shè)置的核心指令( v-model 和 v-show ),Vue 也允許注冊自定義指令。注意，在 Vue2.0 里面，代碼復用的主要形式和抽象是組件——然而，有的情況下,你仍然需要對純 DOM 元素進行底層操作,這時候就會用到自定義指令。

// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
 // 當綁定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

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

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

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

關(guān)于“Vue.js組件如何混合和自定義指令”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞名稱：Vue.js組件如何混合和自定義指令-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://fisionsoft.com.cn/article/csesjg.html

新聞中心

其他資訊