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

wwolf 發布于2019-08-21 16:17 / 2621人閱讀

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

可復用性和組合 混合

混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

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

官方例子：

// 定義一個混合對象
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允許自定義指令。

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

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

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

插件 插件的開發

Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器 , 第二個參數是一個可選的選項對象:

var Myplugin={};
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或屬性
  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)

GPU云服務器云服務器自定義指令自定義指令實例自定義插件自定義ckeditor插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88366.html

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

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

whlong 2019-08-21 16:17 評論0 收藏0
Vue_Vue權威指南

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

SimonMa 2019-08-21 14:31 評論0 收藏0
vue 基礎

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

fasss 2019-08-22 13:45 評論0 收藏0
Vue.js組件可復用性的混合(mixin)方式和自定義指令

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

未東興 2019-08-21 16:17 評論0 收藏0
JS每日一題: Vue中mixin怎么理解？

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

jubincn 2019-08-23 15:28 評論0 收藏0