vue指令修饰符与自定义指令

原创于 2025-01-14 22:33:54 发布 · 370 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

语法：

指令名称:参数.修饰符 = 值


v-bind:value.number = "msg"

注意点

不同的指令有不同的参数，也有不同的修饰符
有些指令是没有修饰符的
某些指令直接的修饰符会重复，但是使用时需要去查看对应的指令的api

示例


<body>

    <div id="app">

        <input type="text" v-model="val">

		<span> {{val}} </span>

    </div>

    <script>

        let app = new Vue({

            el:"#app",

            data:{

                val:1

            }

        })

    </script>

</body>

上述代码实现后我们修改input框里边的值后会加在到页面加载

但是我们如果想要输入完且失去焦点后才加在到页面的话我们就需要用到指令修饰符了


<input type="text" v-model.lazy="val">

这时就可以完成上述需求

在看一种场景


<body>

    <div id="app">

        <input type="text" v-model = "v1">

        +

        <input type="text" v-model = "v2">

        =

        {{v1+v2}}

    </div>

    <script>

        let app = new Vue({

            el:"#app",

            data:{

                val:1,

                v1:1,

                v2:1

            }

        })

    </script>

</body>

浏览器反馈

在这里插入图片描述

我们这时如果在input框里修改value值后等号后边会自动变为字符串拼接

在这里插入图片描述

我们只需要给v-model添加一个修饰符number就可以了


<input type="text" v-model.number = "v1"> 

+ 

<input type="text" v-model.number = "v2"> 

= 

{{v1+v2}}

在这里插入图片描述

补充

修饰符是可以连用的


<input type="text" v-model.number.lazy = "v1"> 

+ 

<input type="text" v-model.number.lazy = "v2"> 

= 

{{v1+v2}}

自定义指令

===============================================================

在面对我们想要用到指令去完成一些需求且！内置指令处理不了的时候，我们可以制定一个自定义指令，根据我们的开发需求和开放场景来封装一个。

自定义指令分为全局指令与局部指令，区别仅在于有效范围。

全局指令的有效范围：在整个script标签内可以通用
局部指令的有效范围：仅在于vue的实例化对象里边

我们可以通过input框自动获取焦点这个案例来了解一下自定义指令

代码示例


let app = new Vue({

	el: "#app",

	directives: {

		focus: {

			// 指令的定义

			inserted: function (el) {

				el.focus()

			}

		}

	}

});


// 注册一个全局自定义指令 `v-focus`

Vue.directive('focus', {

	// 当被绑定的元素插入到 DOM 中时……

	inserted: function (el) {

    	// 聚焦元素

    	el.focus()

	}

})

现在我们已经注册了一个全局的自定义指令，我们只需要在需要使用的元素里加上v-focus即可


<input type="text" v-focus>

钩子函数

一个指令定义对象可以提供下边的钩子函数（都是可选项）

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数的作用：可以让开发者灵活控制指令功能执行的时间

拓展

============================================================

attr与prop的区别

首先准备一个前端页面


<body>

    <input type="text">

    <script>