Vue自定义指令

     自定义指令总结:
        1、 定义语法：
            局部指令：
                new Vue(directives:{指令名：配置对象}或directives：{指令名：回调函数})
            全局指令：
                Vue.directive(指令名，配置对象) 或Vue.directive(指令名，回调函数)
        2. 配置对象中三个回调：
            1. bind: 指令与元素成功绑定时调用
            2. inserted : 指令所在元素被插入页面时被调用
            3. update： 指令所在模板被重新解析时调用
        3. 备注
            1. 指令定义时不加v- ，但使用时要加v-
            2. 指令名如果是多个单词，要使用kebab-case 命名方式 不要用camelCase命名

代码实列

 <body>
    <div id="root">
        <div>n的值是<span v-text="n"></span></div><br>
        <div>放大十倍的n是 <span v-big="n"></span></div><br>
        <button @click="n++"> 点我n+1</button>
        <hr>
        <!-- 文本框一开始就获取焦点 -->
        <input type="text" v-fbind="n">
    </div>
    <script>
        Vue.config.productionTip = false;
        //全局定义自定义指令(对象式)
        Vue.directive("fbind", {
            bind(element, binding) {
                element.value = binding.value;
            },
            inserted(element, binding) {
                element.focus()
            },
            update(element, binding) {
                element.value = binding.value;
            },
        })
 
        // //全局定义自定义指令(函数式)
        Vue.directive("big", function (element, binding) {
            //将n扩大10倍，再填入标签中
            element.innerText = binding.value * 10
        })
        new Vue({
            el: "#root",
            data: {
                n: 1,
            },
            //自定义指令(局部定义)
            // directives: {
            //     // 函数式定义
            //     big(element, binding) {
            //         //将n扩大10倍，再填入标签中
            //         element.innerText = binding.value * 10
            //     },
                // 对象式定义
                // fbind:{
                //     bind(element,binding){
                //         element.value = binding.value;
                //     },
                //     inserted(element,binding){
                //         element.focus()
                //     },
                //     update(element,binding) {
                //         element.value = binding.value;
                //     },
                // }
 
            // }
        })
    </script>
</body>

posted @ 2022-07-17 23:27 小罗要有出息阅读(111) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue的其他指令

· Vue基础知识

· 自定义指令

· 自定义指令总结

· vue 自定义指令总结

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

Vue自定义指令

代码实列

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	自定义指令总结:
	1、定义语法：
	局部指令：
	new Vue(directives:{指令名：配置对象}或directives：{指令名：回调函数})
	全局指令：
	Vue.directive(指令名，配置对象) 或Vue.directive(指令名，回调函数)
	2. 配置对象中三个回调：
	1. bind: 指令与元素成功绑定时调用
	2. inserted : 指令所在元素被插入页面时被调用
	3. update：指令所在模板被重新解析时调用
	3. 备注
	1. 指令定义时不加v- ，但使用时要加v-
	2. 指令名如果是多个单词，要使用kebab-case 命名方式不要用camelCase命名

	<body>
	<div id="root">
	<div>n的值是<span v-text="n"></span></div><br>
	<div>放大十倍的n是 <span v-big="n"></span></div><br>
	<button @click="n++"> 点我n+1</button>
	<hr>
	<!-- 文本框一开始就获取焦点 -->
	<input type="text" v-fbind="n">
	</div>
	<script>
	Vue.config.productionTip = false;
	//全局定义自定义指令(对象式)
	Vue.directive("fbind", {
	bind(element, binding) {
	element.value = binding.value;
	},
	inserted(element, binding) {
	element.focus()
	},
	update(element, binding) {
	element.value = binding.value;
	},
	})

	// //全局定义自定义指令(函数式)
	Vue.directive("big", function (element, binding) {
	//将n扩大10倍，再填入标签中
	element.innerText = binding.value * 10
	})
	new Vue({
	el: "#root",
	data: {
	n: 1,
	},
	//自定义指令(局部定义)
	// directives: {
	// // 函数式定义
	// big(element, binding) {
	// //将n扩大10倍，再填入标签中
	// element.innerText = binding.value * 10
	// },
	// 对象式定义
	// fbind:{
	// bind(element,binding){
	// element.value = binding.value;
	// },
	// inserted(element,binding){
	// element.focus()
	// },
	// update(element,binding) {
	// element.value = binding.value;
	// },
	// }

	// }
	})
	</script>
	</body>