<!–
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名：配置对象} 或 directives{指令名：回调函数}
}) )}
(2).全局指令：
Vue.directive(指令名，配置对象) 或 Vue.directive(指令名：回调函数)
二、配置对象中常用的3个回调：
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析式调用
三、备注：
1.指令定义式不加v-，但使用时要加v-；
2.指令时如果时多个单词，要使用kebab-case命名方式，不要用camelCase命名
–>
<body>
<!-- 所有指令相关的函数肯定不是vm -->
<!--
vuemoan语法有两大类:
1.插值语法:
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
2.指令语法:
功能:用于解析标签(包括:标签属性.标签体内容.绑定属性)
举例:v-bind:href = "xxx" 或 简写为 href= "xxx",xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注:Vue中有很多的指令,且形式都是:v-???? ,此处我们只是拿v-bind举个例子
-->
<!-- 需求1: 定义一个v-big指令,和v-text功能类似,但会把绑定的数值方法10倍 -->
<!-- 需求2: 定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点 -->
<div id="root">
<div>插值语法</div>
<h3>n值:{{n}}</h3>
<!-- <h3 v-big='n'>n值:{{n}}</h3> -->
<h3 v-big-number='n'>n值:{{n}}</h3>
<button @click="n++">点击+1</button>
<hr>
<h1>指令语法</h1>
<hr>
<input type="text" v-fbind:value="n">
</div>
<div id="out">
<input type="text" v-fbind:value='x'>
</div>
</body>
<script>
Vue.config.productionTip = false;
// 全局自定义指令
Vue.directive("fbind", {
// 指令与元素成功绑定时(一上来)
bind(element, binding) {
element.value = binding.value;
console.log(element.value, binding.value)
},
// 指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
// 指令所在的模板被重新解析调用
update(element, binding) {
element.value = binding.value
}
})
new Vue({
el: '#root',
data: {
n: 1,
},
// 所有指令相关的函数肯定不是vm
// directives里面都是局部指令
directives: {
// big函数何时会被调用?
// 1.指令(v-fbind)与元素(input)成功绑定时(仅代表在内存建立连接不代表放入页面了)
// 2.指令所在的模板被重新解析时
// big(element, binding) { // 简写形式
'big-number'(element, binding) {
// console.log('big', this) // 此时this指向window
// console.log(element,binding)
element.innerHTML = binding.value * 10;
},
/*
fbind: {
// 不可以写错,写错vue就找不见了
// 指令与元素成功绑定时(一上来)
bind(element, binding) {
element.value = binding.value;
console.log(element.value, binding.value)
},
// 指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
// 指令所在的模板被重新解析调用
update(element, binding) {
element.value = binding.value
}
}
*/
},
})
new Vue({
el: "#out",
data: {
x: 1,
}
})
</script>
</html>
今天的文章自定义指令_命令指令代码大全分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/54660.html
