<template>
<div class="home">
<button @click="n++">n++</button>
<div v-bignumber="n" style="width:100px;height:200px;border:1px solid #000;float: left;"></div>
<input type="text" v-fbind:value="n">
</div>
</template>
<script>
export default {
name: 'HomeView',
components: {},
data() {
return {
n:1
}
},
directives: {
//函数形式
bignumber(element,binding){
element.innerHTML = binding.value * 10
},
//对象形式
fbind:{//简写形式会触发bind和update，不会触发inserted
//指令与元素绑定时触发
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时触发
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.focus()
}
}
}
}
</script>
1、自定义指令有两种写法，函数形式（简写）和对象形式（完整形式）。简写形式只在两个时机触发：1、指令与元素成功绑定时（元素没有被插入页面），2、指令所在的模板被重新解析时；
2、指令名称不可以使用camelCase命名，多个单词的指令名称使用kebab-case（定义时需要加引号）
3、指令的回调函数中this不指向vue
4、自定义指令使用时加v-，定义时不需要加v-；
5、定义全局指令
vue.directive('fbind',{//简写形式会触发bind和update，不会触发inserted
//指令与元素绑定时触发
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时触发
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.focus()
}
})
