mixins,自定義指令,render函式(待研究填坑),過濾器

混入 (mixins)

# 混入 (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!"


# 當元件和混入物件含有同名選項時，這些選項將以恰當的方式混合。
資料物件在內部會進行淺合併 (一層屬性深度)，在和元件的資料發生衝突時以元件資料優先。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

# 同名鉤子函式將混合為一個陣列，因此都將被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。
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.myOption
    if (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

#在開發中使用mixins
1、在assets資料夾下建立一個js檔案
// 建立一個需要混入的物件 
export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('mixinTest1');
        }
    }
};

2、在元件中使用剛剛建立的混入
import {mixinTest1} from './../assets/js/mixin';
export default {
    mixins:[mixinTest1],
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}
複製程式碼

自定義指令

# 除了核心功能預設內建的指令 (v-model 和 v-show)，Vue 也允許註冊自定義指令。
注意，在 Vue2.0 中，程式碼複用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 DOM 元
素進行底層操作，這時候就會用到自定義指令。舉個聚焦輸入框的例子:當頁面載入時，該元素將獲得焦點 (注
意：autofocus 在移動版 Safari上不工作)。事實上，只要你在開啟這個頁面後還沒點選過任何內容，這個
輸入框就應當還是處於聚焦狀態。現在讓我們用指令來實現這個功能：

# 註冊一個全域性自定義指令 `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：指令所繫結的元素，可以用來直接操作 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.stringify
    el.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!'
  }
})

# 函式簡寫

在很多時候，你可能想在 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!"
})
複製程式碼

render {挖個坑 }

---

過濾器

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：
<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>
# 你可以在一個元件的選項中定義本地的過濾器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

# 或者在建立 Vue 例項之前全域性定義過濾器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
  // ...
})

過濾器函式總接收表示式的值 (之前的操作鏈的結果) 作為第一個引數。在上述例子中，capitalize 過
濾器函式將會收到 message 的值作為第一個引數。

# 過濾器可以串聯：

{{ message | filterA | filterB }}

在這個例子中，filterA 被定義為接收單個引數的過濾器函式，表示式 message 的值將作為引數傳入到函
數中。然後繼續呼叫同樣被定義為接收單個引數的過濾器函式 filterB，將 filterA 的結果傳遞到 filterB 中。

# 過濾器是 JavaScript 函式，因此可以接收引數：

{{ message | filterA('arg1', arg2) }}

這裡，filterA 被定義為接收三個引數的過濾器函式。其中 message 的值作為第一個引數，普通字串
'arg1' 作為第二個引數，表示式 arg2 的值作為第三個引數。
複製程式碼