<template>
<div class="hello">
<!-- 需求1: -->
<span v-text="n"></span><br>
<span v-big="n"></span>
<button @click="n++">点击之后n+1</button><br>
<!-- 需求2 -->
<input type="text" v-fbind:value="n">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return { n: 1 }
},
directives: {
big(el, binding) {
el.innerText = binding.value * 10
},
fbind: {
bind(el, binding) { el.value = binding.value * 20 },
inserted(el) { el.focus() },
update(el, binding) { el.value = binding.value * 20 }
}
}
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
注意:命名自定义指令时不建议使用小驼峰命名,尽量使用分隔符命名,比如v-big-number==》自定义指令可写成‘big-number’,所有指令的this指向只指向window的