成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

wwolf / 2674人閱讀

摘要：可復(fù)用性和組合混合混合是一種分發(fā)組件中可復(fù)用功能的非常靈活的方式。官方例子定義一個混合對象定義一個使用混合對象的組件自定義指令允許自定義指令。

可復(fù)用性和組合 混合

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

在上面的例子中，我們創(chuàng)建了一個點擊彈出框和一個滑過彈出框，因為其調(diào)用的數(shù)據(jù)和方法都是重復(fù)的，因此就定義一個混合對象，讓兩個不同的彈出框分別調(diào)用。

官方例子：

// 定義一個混合對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log("hello from mixin!")
    }
  }
}
// 定義一個使用混合對象的組件
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
自定義指令

Vue允許自定義指令。

舉個例子，現(xiàn)在這里有個input輸入框，當頁面加載時，輸入框就已經(jīng)獲取焦點，并將輸入框固定在視口的某一位置上：

Vue.directive("focus",{
    inserted:function(el){
        el.style.position="fixed";
        el.style.left="10px";
        el.style.top="10px";
        el.focus()
    }
})

這樣在模板中就可以使用了

插件 插件的開發(fā)

Vue.js 的插件應(yīng)當有一個公開方法 install 。這個方法的第一個參數(shù)是 Vue 構(gòu)造器 , 第二個參數(shù)是一個可選的選項對象:

var Myplugin={};
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或?qū)傩?  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 添加全局資源
  Vue.directive("my-directive", {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 添加實例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}
使用插件 
Vue.use(MyPlugin)

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/88366.html

相關(guān)文章

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

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

    whlong 評論0 收藏0

  • Vue_Vue權(quán)威指南

    摘要：效率不高，很多多余，稱之為臟檢查。通過索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫。 Vue通過簡單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量 數(shù)據(jù)綁定 指令 插件化 架構(gòu)從傳統(tǒng)后臺MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...

    SimonMa 評論0 收藏0

  • vue 基礎(chǔ)

    摘要：依的值，來決定哪個組件被渲染。不具名的內(nèi)容會替換子組件中我是默認內(nèi)容的默認內(nèi)容另一個主要段落。這里是一些聯(lián)系信息渲染結(jié)果為這里可能是一個頁面標題主要內(nèi)容的一個段落。 vue腳手架頁面是怎么生成的？ （組件注冊，路由插件的使用）； 主要涉及的文件： index.htmlindex.jsmain.jsAPP.vue 大致的過程就是： main.js 通過 import Vue from v...

    fasss 評論0 收藏0

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

    摘要：注意，在里面，代碼復(fù)用的主要形式和抽象是組件然而，有的情況下你仍然需要對純元素進行底層操作這時候就會用到自定義指令。注冊一個全局自定義指令當綁定元素插入到中。 混合是什么 混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；旌蠈ο罂梢园我饨M件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。例如: var tpl1={ te...

    未東興 評論0 收藏0

  • JS每日一題: Vue中mixin怎么理解？

    摘要：兩個對象鍵名沖突時，取組件對象的鍵值對也使用同樣的策略進行合并。代碼理解全局混合也可以全局注冊混合對象。注意使用一旦使用全局混合對象，將會影響到所有之后創(chuàng)建的實例為自定義的選項注入一個處理器。 20190122 Vue中mixin怎么理解？ mixin是為了讓可復(fù)用的功能靈活的混入到當前組件中，混合的對象可以包含任意組件選項（生命周期，指令之類等等）, mixin翻譯過來叫混合,高級的...

    jubincn 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<