Vue指令修饰符与自定义指令-钩子函数

最新推荐文章于 2022-07-20 09:38:53 发布

weixin_47106909

最新推荐文章于 2022-07-20 09:38:53 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/weixin_47106909/article/details/105682592

版权

Vue指令修饰符与自定义指令-钩子函数

指令修饰符：

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

1.|v-bind:value.number = "msg"

注意点：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<style>
    
</style>
<body>
   <!-- 
       v-bind:value="msg"
       指令名称：参数.修饰符=值
       不同的指令有不同的参数，也有不同的修饰符

       注意事项：1.不同的指令下，有不同的修饰符，需要使用时，查看api中对应的指令

       具体内容查看api或者自定义指令的具体实现
    -->
    <div id="app">
        <input type="text" v-model="val">
        <span>{{val}}</span>

        <hr>

        <input type="text" v-model="v1">+<input type="text" v-model="v2">={{v1+v2}}
    <div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            val:1,
            v1:1,
            v2:1
        }
    })
</script>
</html>

一个指令可以包含的内容包括：
–指令名称
–指令值
–指令参数
–指令修饰符

自定义指令：

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

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

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

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 : 所在组件更新的时候调用
– componentUpdated : 所在组件更新完成后调用
–unbind : 只调用一次，指令与元素解绑时调用

不同的生命周期钩子函数在调用的时候同时会接收到传入的一些不同的参数

– el : 指令所绑定的元素，可以用来直接操作 DOM
– binding: 一个对象，包含以下属性：
– name: 指令名，不包括 v- 前缀
–value : 指令的绑定值（作为表达式解析后的结果）
– expression : 指令绑定的表达式（字符串）
–arg : 传给指令的参数，可选
– modifiers : 传给指令的修饰符组成的对象，可选，每个修饰符对应一个布尔值
– oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用，无论值是否改变都可用
钩子函数的作用：可以让开发者灵活控制指令功能执行的时间

扩展 prop和attr的区别

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<style>
    .ipt{
        width: 500px;
    }
</style>
<body>
    <input type="text">
    <!-- 
        property:js中的对象属性
        attribute:html标签的属性
     -->
</body>
<script>
    let input = document.querySelector("input");

    input.value = "哈哈"

    input.setAttribute("class","ipt");
    input.setAttribute("value","ipt");
</script>
</html>

weixin_47106909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令修饰符与自定义指令-钩子函数

Vue指令修饰符与自定义指令-钩子函数指令修饰符：语法：指令名称:参数.修饰符 = 值1.|v-bind:value.number = "msg"注意点：不同的指令有不同的参数，也有不同的修饰符有些指令是没有修饰符的某些指令直接的修饰符会重复，但是使用时需要去查看对应的指令的api示例代码：<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫