一、什么是全局API?
全局API並不在構造器里，而是先聲明全局變量或者直接在Vue省定義一些新功能，Vue內置了一些全局API，
比如指令Vue.directive。簡單來說就是在構造器外部用Vue提供給我們的API函數來定義新的功能
二、自定義綁定事件
- 自定義指令有五個生命周期（也叫鈎子函數），分別是 bind, inserted, update, componentUpdated, unbind
1、bind只調用一次，指令第一次綁定到元素時調用，用這個鈎子函數可以定義一個綁定時執行一次初始化動作
2、inserted被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於document中）
3、update：被綁定於元素所在得到模板更新時調用，而無論綁定值是否變化，通過比較更新前后的綁定值，可以忽略不必要的模板更新
4、componentUpdated：被綁定元素所在模板完成一次更新周期時調用
5、unbind只調用一次，指令與元素解綁時調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue.directive 自定義指令</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.directive 自定義指令</h1>
<hr>
<div id="app">
<div v-color="color">{{num}}</div> // 自定義命令
<p>
<button @click="add">add</button>
</p>
<p>
<button onclick="unbind()">解綁</button>
</p>
</div>
<script>
function unbind() {
app.$destroy()
}
Vue.directive('color', { // 命令名稱，不需要使用 v- 前綴
bind: function (el, binding) { // 綁定
console.log('1 - bind');
el.style = 'color:' + binding.value
},
inserted: function () { // 綁定到節點
console.log('2 - inserted');
},
update: function () { // 組件更新
console.log('3 - update');
},
componentUpdated: function () { // 組件更新完成
console.log('4 - componentUpdated');
},
unbind: function () { // 解綁
console.log('5 - unbind');
}
})
var app = new Vue({
el: '#app',
data: {
num: 0,
color: 'red'
},
methods: {
add: function () {
this.num++
}
}
})
</script>
</body>
</html>
