1.0 Vue.directive
定义在全局的自定义指令,可以自己设置指令名称,指令逻辑,完成某种新功能 例如 <p v-colorful="colorName">我是自定义颜色指令<p>
<script>
Vue.directive('colorful',function(el,binding){
el.style = 'color:'+ binding.value
})
</script>
<p v-colorful="colorName">我是自定义颜色指令<p>
<script>
Vue.directive('colorful',function(el,binding){
el.style = 'color:'+ binding.value
})
</script>
这里的directive里的第一个参数是自定义指令的名称,第二个是一个函数,函数里面有三个参数,第一个是el代表的是自定义指令对应的标签dom元素,第二个参数bingding则是一个对象,console.log(binding)的话,有很多属性,例如:
binding.name-----该例子的colorful,bingding.value----colorName在Vue实例对象里面实际的值,bingding.expression----colorful的名字,第三个参数vnode:是Vue编译的虚拟节点
自定义指令里面也有钩子函数,即生命周期,一共五个,
1.bind 只调用一次,指令第一个绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始动作2.inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
3.update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5.unbind 至调用一个 指令与元素解绑时候调用
2.0 Vue.extend
拓展实例构造器,经常用在组件功能上,在其模版中遇到该组件名称作为标签的自定义元素时,会自动调用‘拓展实例构造器’来生产组件实例,并挂载到自定义元素上
下面举个例子
html中有一段<author></author>
script标签中代码
<author></author>
var authorExp = Vue.extend({
template: '<p><a :href="authorUrl">{{authorName}}</a></p>',
data: function(){
return {
authorUrl : 'http://www.baidu.com',
authorName: 'BorderBox'
}
}
})
这里需要注意的是与实例对象Vue不同,这里的data和Vue的实例对象里的data是不同的,这里要写个function里面return一个对象,才可以输入对应的值
这样还不行,还得将该拓展实例构造器new一下然后挂载到对应的自定义标签上才可以
new authorExp().$mount('author')
这里的$mount意思就是挂载的意思,后面传入的参数和jquery是一样的,如果是派生标签,例如<p></p>,只要$mount('p')即可,如果是类标签,$mount('.类名'),如果是id,$mount('#id')即可实现
3.0 Vue.set
这里的Vue.set的意思是构造器外部操作构造器内部的数据、属性或者方法,这个方法主要拿来解决javascript长期的一个问题,就是如果只处理数组的下标,或者是处理数组的长度的话,vue不会更新数据
这里举个例子
html里面
<ul id="app">
<li v-for="item in arr">{{item}}</li>
<ul>
<button οnclick="change()">通过改变数组的下标</button>
script标签里面
<ul id="app">
<li v-for="item in arr">{{item}}</li>
<ul>
<button οnclick="change()">通过改变数组的下标</button>
<script>
var app = new Vue({
el : '#app',
data : {
arr: ['aaa','bbb','ccc','ddd']
}
})
</script>
function change(){
Vue.set(app.arr,1,'eee')
}
这里的就显示出Vue.set的价值出来了,如果change()里面直接加app.arr[1] = 'eee'的话,vue是不会更新数据的
<script>
var app = new Vue({
el : '#app',
data : {
arr: ['aaa','bbb','ccc','ddd']
}
})
</script>
function change(){
Vue.set(app.arr,1,'eee')
}
4.0 Vue的生命周期
beforeCreate
:
function
(
)
{
console
.
log
(
'1-beforeCreate 初始化之后'
)
;
}
,
created
:
function
(
)
{
console
.
log
(
'2-created 创建完成'
)
;
}
,
beforeMount
:
function
(
)
{
console
.
log
(
'3-beforeMount 挂载之前'
)
;
}
,
mounted
:
function
(
)
{
console
.
log
(
'4-mounted 搭载之后'
)
;
}
,
beforeUpdate
:
function
(
)
{
console
.
log
(
'5-beforeUpdate 数据更新前'
)
;
}
,
updated
:
function
(
)
{
console
.
log
(
'6-updated 被更新后'
)
;
}
,
activated
:
function
(
)
{
console
.
log
(
'7-activated'
)
;
}
,
deactivated
:
function
(
)
{
console
.
log
(
'8-deactivated'
)
;
}
,
beforeDestroy
:
function
(
)
{
console
.
log
(
'9-beforeDestroy 销毁之前'
)
;
}
,
destroyed
:
function
(
)
{
console
.
log
(
'10-destroyed 销毁之后'
)
}