一、 全局API:不在构造器里,而是先声明全局变量或直接在Vue上定义一些新功能。在构造器外部用Vue提供的API函数来定义新的功能。
二、 自定义指令:Vue.directive
Vue.directive('changecolor',function(el,binding,vnode){
el.style='color:'+binding.value;
});
div v-changecolor="color" id="demo">
{{num}}
</div>
1. 三个参数:
1)el:制定所绑定的元素,可以用来直接操作DOM
2)binding:一个对象,包含指令的很多信息
3)vnode:vue编译生成的虚拟节点
2. 自定义指令生命周期:
1)bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2)inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
3)update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
4)componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5)unbind:只调用一次,指令与元素解绑时调用。
三、vue.extend
返回一个扩展实力构造器,预设部分选项的vue实例构造器。服务于vue.component用来生成组件。当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上。
1)构造器
var authorExtend = Vue.extend({
template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
data:function(){
return{
authorName:'apple',
authorUrl:'http://www.apple.com'
}
}
});
2)挂载
new authorExtend().$mount('author');
3)写入挂载元素,元素可以是标签、组件等
<author></author>
1)作用:在构造器外部操作构造器内部的数据、属性或方法。
2)优势:vue有时不能自动检测一下变动的数组。
- 利用索引直接设置项目
- 修改数组长度
function add() {
Vue.set(app.arr, 1, 'ddd');
}