一.自定義指令directive

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

來個實例，當頁面加載時，該input元素將獲得焦點：

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

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

directives: {focus: {// 指令的定義inserted: function (el) {el.focus()}} }

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

<input v-focus>

鉤子函數

一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：

• bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
• inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
• update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
• unbind：只調用一次，指令與元素解綁時調用。

接下來我們來看一下鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。

鉤子函數參數

指令鉤子函數會被傳入以下參數：

• el：指令所綁定的元素，可以用來直接操作 DOM 。

• binding：一個對象，包含以下屬性：

  • name：指令名，不包括 v- 前綴。
  • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  • expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
  • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數都應該是只讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行。

這是一個使用了這些屬性的自定義鉤子樣例：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div> Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')} })new Vue({el: '#hook-arguments-example',data: {message: 'hello!'} })

結果：

name: "demo" value: "hello!" expression: "message" argument: "foo" modifiers: {"a":true,"b":true} vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder

在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子。比如這樣寫:

Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value })

對象字面量

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法的 JavaScript 表達式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!" })

二.插件

插件通常會為 Vue 添加全局功能。插件的范圍沒有限制——一般有下面幾種：

• 1.添加全局方法或者屬性，如: vue-custom-element
• 2.添加全局資源：指令/過濾器/過渡等，如 vue-touch
• 3.通過全局 mixin 方法添加一些組件選項，如: vue-router
• 4.添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。
• 5.一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router

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

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.install(Vue)` Vue.use(MyPlugin)

也可以傳入一個選項對象：

Vue.use(MyPlugin, { someOption: true })

Vue.use 會自動阻止多次注冊相同插件，屆時只會注冊一次該插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在檢測到 Vue 是可訪問的全局變量時會自動調用 Vue.use()。然而在例如 CommonJS 的模塊環境中，你應該始終顯式地調用 Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模塊環境時 var Vue = require('vue') var VueRouter = require('vue-router')// 不要忘了調用此方法 Vue.use(VueRouter)

簡單例子

封裝一個全局的插件，如下：
在src下的components文件夾下新建一個countdown文件夾，新建一個countdown.vue文件：

<template><div>封裝一個最簡單的插件</div> </template> <script> export default{name:'count-down' } </script>

在放countdown.vue的同級目錄下新建一個index.js：

import countDown from './countdown';countDown.install = function(Vue){Vue.component(countDown.name,countDown) };export default countDown;

在main.js中：

import countDown from './components/countdown/index.js' Vue.use(countDown)

在組件中就可以這樣使用了：

<count-down></count-down>

三.混合mixins

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

// 定義一個混合對象 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!"

選項合并

當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合。比如，同名鉤子函數將混合為一個數組，因此都將被調用。另外，混合對象的 鉤子將在組件自身鉤子 之前 調用 ：

var mixin = {created: function () {console.log('混合對象的鉤子被調用')} }new Vue({mixins: [mixin],created: function () {console.log('組件鉤子被調用')} })// => "混合對象的鉤子被調用" // => "組件鉤子被調用"

值為對象的選項，例如 methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

var mixin = {methods: {foo: function () {console.log('foo')},conflicting: function () {console.log('from mixin')}} }var vm = new Vue({mixins: [mixin],methods: {bar: function () {console.log('bar')},conflicting: function () {console.log('from self')}} })vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"

注意：Vue.extend() 也使用同樣的策略進行合并。

全局混合

也可以全局注冊混合對象。注意使用！ 一旦使用全局混合對象，將會影響到 所有 之后創建的 Vue 實例。使用恰當時，可以為自定義對象注入處理邏輯。

// 為自定義的選項 'myOption' 注入一個處理器。 Vue.mixin({created: function () {var myOption = this.$options.myOptionif (myOption) {console.log(myOption)}} })new Vue({myOption: 'hello!' }) // => "hello!"

謹慎使用全局混合對象，因為會影響到每個單獨創建的 Vue 實例 (包括第三方模板)。大多數情況下，只應當應用于自定義選項，就像上面示例一樣。也可以將其用作 Plugins 以避免產生重復應用

自定義選項合并策略

自定義選項將使用默認策略，即簡單地覆蓋已有值。如果想讓自定義選項以自定義邏輯合并，可以向 Vue.config.optionMergeStrategies 添加一個函數：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {// return mergedVal }

對于大多數對象選項，可以使用 methods 的合并策略：

var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods

?

總結

以上是生活随笔為你收集整理的vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。