Vue复习5：自定义指令_函数式_对象式

最新推荐文章于 2022-12-07 12:56:56 发布

长沙xtt

最新推荐文章于 2022-12-07 12:56:56 发布

阅读量123

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_40746230/article/details/125417846

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文通过实例详细介绍了如何在Vue中创建自定义指令v-big和v-fbind。v-big指令用于将绑定的数值放大10倍展示，v-fbind指令使得绑定的input元素获取焦点。文章还总结了Vue自定义指令的定义语法、常用回调函数及其调用时机，并强调了指令使用时的注意事项。

摘要由CSDN通过智能技术生成

自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。


    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>

    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h2> 当前的n的值是:<span v-text="n"></span></h2>
            <h2> 放大10倍n的值是:<span v-big="n"></span></h2>
            <button @click="n++">点我n+1</button>
            <hr />
            <input type="text" v-fbind:value="n">
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	//  Vue.directive('fbind',{
	// 		//指令与元素成功绑定时（一上来）
	// 		bind(element,binding){
	// 			element.value = binding.value
	// 		},
	// 		//指令所在元素被插入页面时
	// 		inserted(element,binding){
	// 			element.focus()
	// 		},
	// 		//指令所在的模板被重新解析时
	// 		update(element,binding){
	// 			element.value = binding.value
	// 		}
	// 	}) 
		new Vue({
			el:'#root',
			data:{
				n:1
			},
            directives:{
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
                big(element,binding){//element为真实DOM
                    element.innerText=binding.value*10
                },
                /* 'big-number'(element,binding){
					// console.log('big')
					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>

    </html>

自定义指令总结

一、定义语法

(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命名。