vue 组件以字符串插入_Vue进阶属性

一、Directives 指令

两种写法：

1、声明一个全局指令

Vue.directive('x', directiveOptions)

就可以在任何组件里使用v-x了

例如：声明一个全局指令

在App.vue里点击图片,在HelloWorld.vue点击标题。都会打印x

2、声明一个局部指令

new Vue({
...,
directives: {
"x": directiveOptions
}
})

v-x只能用在该实例中

例如：这个组件就只能在HelloWorld.vue里使用

directiveOptions

五个函数属性

• bind(el绑定的元素,info详细的信息, vnode虚拟节点, oldVnode之前的虚拟节点)-类似created；只调用一次，指令第一次绑定到元素时调用。
• inserted(参数同上)-类似mounted；被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update(参数同上)-类似updated；
• componentUpdated(参数同上)-用得不多，参见文档
• unbind(参数同上)-类似destroyed

自制指令，不用v-on

使用v-on

不使用v-on

我们如何得知用户使用的是click呢，使用info

打出info发现