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

最新推荐文章于 2024-09-29 21:27:37 发布
最新推荐文章于 2024-09-29 21:27:37 发布
阅读量512 收藏 3
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS_DGD/article/details/105643579
版权

指令修饰符

很好用又很烦人的一个东西
指令原本就是很方便的东西，而指令修饰符会让指令变得更加方便

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

v-bind:value.number = "msg"

注意点

  1. 不同的指令有不同的参数，也有不同的修饰符
  2. 有些指令是没有修饰符的
  3. 某些指令直接的修饰符会重复，但是使用时需要去查看对应的指令的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}}

自定义指令

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

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

  1. 全局指令的有效范围：在整个script标签内可以通用
  2. 局部指令的有效范围：仅在于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>

钩子函数

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

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

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

拓展

attr与prop的区别

首先准备一个前端页面

<body>
    <input type="text">
    <script>
        let input = document.querySelector("input");
    </script>
</body>

浏览器反馈
在这里插入图片描述
我们这个时候可以通过js去修改他的value值
在这里插入图片描述
这个东西我们叫做js中的对象属性

我们现在在去把标签里面添加上一个value值

<body>
    <input type="text" value>
    <script>
        let input = document.querySelector("input");
    </script>
</body>

浏览器反馈
在这里插入图片描述
我们这时候我们通过js属性去修改value值是可以改变的，但是html标签本身的属性是不会变的
在这里插入图片描述
所以我们需要去设置setAttribute
在这里插入图片描述
在这里插入图片描述

X可乐
关注
vue指令修饰符、自定义指令
此鱼非闲鱼也的博客
04-20 1158
1、vue指令修饰符 指令名称:参数.修饰符 = "值" 比如 v-bind:value.number = “msg” （1）不同指令有不同的参数，也有不同的修饰符 （2）相同指令下的修饰符可以连续使用，但不能连着使用别的指令下的修饰符 <div id="app"> <!-- .lazy 取代input监听change事件 --> &...
02-Vue按键修饰符,自定义指令
乐百寿
08-27 678
Vue键盘事件，自定义指令
vue指令
weixin_49405038的博客
03-29 269
1.vue基础-插值表达式 语法: {{ 表达式 }} <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div> </template> <script> export defa
vue常用指令及修饰符
最新发布
qq_59633872的博客
09-29 814
vue常用的指令及修饰符
vue的指令修饰符
HWL5679的博客
07-10 418
Vue 提供了多种内置指令，如v-bind、v-model、v-on等，这些指令都可以使用修饰符来扩展其功能。
vue 指令修饰符及自定义指令
weixin_46146313的博客
04-21 1368
指令修饰符 指令:参数.修饰符 = 值 修饰符是指令的(不是参数的)，如属性是对象的 不同的指令有不同的参数，有的指令也可能没有修饰符，有的指令可能有不同的修饰符 不同的指令可能有相同的修饰符，使用修饰符一定要找 对应指令 下的修饰符 多看api 才能知道有哪些修饰符，修饰符可以连着用， 自定义修饰符可以直接跟在参数，也可以跟在数据后 自定义指令是为了满足千奇百怪的场景需求，这种场景下需要用到自定...
VUE官方文档学习—事件处理
One_punchman_zxl的博客
06-03 366
title: VUE官方文档学习—事件处理 date: author: Xilong88 tags: Vue <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var example1 = new Vu
vue事件修饰符和按键修饰符用法总结
08-29
Vue.js 允许开发者自定义按键修饰符别名。通过在 Vue.config.keyCodes 对象中添加按键修饰符别名，可以扩展 Vue.js 的按键修饰符功能。 例如：Vue.config.keyCodes.f1 = 112 四、鼠标或键盘事件监听修饰符 Vue....
Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件
全栈
10-19 1232
Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令。根据自定义指令的作用范围，可分为：全局、局部两种
VUE（修饰符+自定义指令directive+组件Component+组件交互+自定义事件+插槽slot）
qq_40409416的博客
03-18 1114
VUE 修饰符 v-model lazy修饰符：在鼠标焦点移出input框之后才会更新数据
Vue-指令- 指令修饰符
qq_41421033的博客
09-23 136
指令修饰符 一个指令可以包含的内容包括： 指令名称 指令值 指令参数 指令修饰符 <组件 指令:参数.修饰符1.修饰符2="值" /> .lazy 取代 input 监听 change 事件 .number 输入字符串转为有效的数字 .trim 输入首尾空格过滤 ...
Vue中的指令,修饰符
weixin_53562163的博客
04-15 596
Vue中的指令,修饰符
vue常用指令、修饰符
Senora的博客
06-24 1201
vue常见指令和修饰符以及涉及到的前端面试题
指令的修饰符（vue）
m0_72168336的博客
06-12 777
指令的修饰符（vue）
vue 指令和修饰符
sbonesjzrw的博客
08-02 1620
指令和修饰符 v-on: 修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当事件是从特定键触发时...
VUE---常见指令修饰符
m0_64498202的博客
01-08 516
常见指令修饰符
Vue-----指令与修饰符
qq_43579192的博客
08-20 356
1.常用的指令 {{}}：插值表达式 v-html：显示html的内容 v-text：和插值一样也是使用vue中的变量，但是默认没有闪缩问题，但是会覆盖原本的内容，插值不会 v-cloak：解决插值的闪烁问题 v-bind：属性绑定，等同于： v-on：事件绑定，等同于@ v-if：实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。 v-else：v-else是搭配v-i...
vue中常用的指令修饰符
m0_72560900的博客
01-07 782
在Vue.js中，指令修饰符用于在指令后面以点号（.）形式添加特殊后缀，以表示对指令的特定行为或修饰。这些指令修饰符提供了在特定情境下更精细控制指令行为的方式。
VUE中自定义修饰符
weixin_42943920的博客
12-07 336
子组件created生命周期钩子触发时，modelModifiers会包含capitalize，且其值为true
Vue自定义指令详解与实战应用
添加修饰符以改变事件行为，如阻止默认行为： ```html <button v-on:demo-click.stop="handClick"></button> ``` 以及一次性绑定（仅渲染一次）： ```html <p v-once></p> ``` 自定义指令是Vue.js灵活性的体现，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值