全局API
首先，什么是全局API？
全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如Vue.directive，说的简单写就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。
Vue.directive自定义指令
<body>
{% verbatim %}
<div id="app">
<div v-huang="color">{{ num }}</div>
<p><button @click="add">ADD</button></p>
</div>
{% endverbatim %}
</body>
<script>
Vue.directive('huang',function (el,binding) {
//<div v-huang="color"></div>这个标签
console.log(el);
//obj={name: "huang", rawName: "v-huang", value: "red", expression: "color", modifiers: {…}, …}
console.log(binding);
//huang
console.log(binding.name);
//red
console.log(binding.value);
//color
console.log(binding.expression);
el.style = 'color:'+binding.value;
});
new Vue({
el: '#app',
data: {
num:10,
color:'red'
},
methods:{
add:function () {
this.num++;
}
}
});
</script>
自定义指令的生命周期
自定义指令有五个生命周期(也叫钩子函数)，分别是bind，inserted，update，componentUpdated，unbind
- bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
- inserted:被绑定元素插入父节点时调用(父节点存在即可调用，不存在于document中)。
- update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化，通过比较更新前后的绑定值，可以忽略不必要的模板更新。
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
- unbind:只调用一次，指令与元素解绑时调用。
<body>
{% verbatim %}
<div id="app">
<div v-huang="color">{{ num }}</div>
<p><button @click="add">ADD</button></p>
</div>
<p>
<button onclick="unbind()">解绑</button>
</p>
{% endverbatim %}
</body>
<script>
function unbind(){
app.$destroy();
}
Vue.directive('huang',{
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');
}
});
new Vue({
el: '#app',
data: {
num:10,
color:'red'
},
methods:{
add:function () {
this.num++;
}
}
});
</script>
Vue.extend构造器的延伸
首先，什么是Vue.extend？
Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue实例构造器，经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用"扩展实例构造器"来生产组件实例，并挂载在自定义元素上。
<body>
{% verbatim %}
<div id="author"></div>
{% endverbatim %}
</body>
<script>
var authorExtend = Vue.extend({
template:"<p><a :href='authorURL'>{{ authorName }}</a></p>",
data:function () {
return{
authorName:'huangyongpeng',
authorURL:'http://www.baidu.com'
}
}
});
new authorExtend().$mount('#author');
</script>