Vue学习笔记-自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
<!-- js阻塞 -->
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<h3>
自定义指令：<br>
</h3>
<hr>
<h3>当前的n值是:<span v-text="n"> </h3>
<h3>放大10倍n值是:<span v-big="n"> </h3>
<button @click="n++">n++</button>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
name: 'v-text 学习笔记',
n: 1,
},
//自定义指令
directives: {
// 函数式写法
// big函数何时被调用==》
// 1.指令与元素成功绑定时被调用
// 2.指令所在的模版被重新解析时，被调用
big (element, binding) {
element.innerText = binding.value * 10
console.log('element', binding.value)
}
}
})
</script>
标签：Vue,自定义,--,binding,element,指令 From： https://www.cnblogs.com/YYkun/p/18046951