Vue.js常用指令及事件修饰符介绍（二）

最新推荐文章于 2023-08-14 17:43:43 发布
最新推荐文章于 2023-08-14 17:43:43 发布
阅读量463 收藏 4
点赞数 4
分类专栏： Vue.js 文章标签： vue 前端 事件修饰符 Vue指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PILIpilipala/article/details/109581902
版权

Vue指令及是事件修饰符

Vue常用指令

其他基础指令

Vue.js基础介绍及部分指令

v-model

用法：在表单控件或者组件上创建双向绑定。

v-model和v-bind之间的区别：
两者都可以绑定数据，但是v-bind指令只能是实现数据的单向绑定，即从M层自动绑定到V层，无法实现双向绑定，v-model指令可实现表单元素和M层中数据的双向绑定。

<div id="app">
<!-- v-model指令 -->
    <input type="text" name="" v-model='msg' id="">
    <p>{{msg}}</p>

</div>
<script>
    var vm=new  Vue({
        el:'#app',
        data:{
            msg:'爱吃烧烤、炸鸡、小龙虾'
        },
        methods: {
            
        },
    })
</script>

原始效果是这样：
在这里插入图片描述

当我们点击input框进行修改里面的数据时，发现只有在修改v-model指令绑定的数据框时，p标签中的{{msg}}才会跟着改变

在这里插入图片描述

利用v-model制作简易计算器

根据v-model指令双向绑定数据的特性，实现计算器简单加减乘除的功能


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 可以使用cdn链接 -->
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="" v-model='n1' id="">
        <select v-model='opt'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="" v-model='n2' id="">
        <input type="button" value="=" @click='calc'>

        <input type="text" name="" v-model='result' id="">
    </div>
    <script>
        // 创建vue实例 得到ViewModel
        new Vue({
            el:'#app',
            data:{
            //初始值为0 符号为+
                n1:0,
                n2:0,
                opt:'+',
                result:0
            },
            methods: {
            //计算的方法
                calc(){
                    switch (this.opt) {
                        case '+':
                            this.result=parseInt(this.n1)+parseInt(this.n2)
                            break;
                        case '-':
                            this.result=parseInt(this.n1)-parseInt(this.n2);
                            break;
                        case '*':
                            this.result=parseInt(this.n1)*parseInt(this.n2);
                            break;
                        case '/':
                            this.result=parseInt(this.n1)/parseInt(this.n2);
                            break;
                        default:
                            break;
                    }
                }
            },
        })
    </script>
</body>
</html>

利用指令添加CSS样式

第一种方法：直接传递一个数组(数组中存放类名)

<style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    
    .active{
        letter-spacing: 0.5em;
    }
</style>
<div id="app">
    <h1>这是一个标题标签,功能很强大</h1>
    <h1 :class="['thin','italic']">这是一个标题标签,功能很强大</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
        }
    })
</script>

需要注意的是，此时的class类需要v-bind指令绑定

在这里插入图片描述

第二种方法：在数组中使用三元表达式

<style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    
    .active{
        letter-spacing: 0.5em;
    }
</style>
<div id="app">
    <h1>这是一个标题标签,功能很强大</h1>
    <h1 :class="['thin','italic',flag?'active':'']">这是一个标题标签,功能很强大</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
        flag:true
        }
    })
</script>

在这里插入图片描述
第三种方法：数组中使用对象代替三元表达式，可提高代码可读性

<style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    
    .active{
        letter-spacing: 0.5em;
    }
</style>
<div id="app">
    <h1>这是一个标题标签,功能很强大</h1>
    <h1 :class="['thin','italic',{'active':flag}]">这是一个标题标签,功能很强大</h1>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
        	flag:true
        }
    })
</script>

第四种方法：使用v-bind绑定一个对象

<style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    
    .active{
        letter-spacing: 0.5em;
    }
</style>
<div id="app">
    <h1>这是一个标题标签,功能很强大</h1>
     <h1 :class="classObj">这是一个标题标签,功能很强大</h1>


</div>
<script>
    new Vue({
        el:'#app',
        data:{
        	flag:true,
        	classObj:{
                red:true,
                thin:true,
                italic:true,
                active:false
            }
        }
    })
</script>

在这里插入图片描述
第五种方法：直接绑定style标签，同样以数组方式传递，数组中为类名

<div id="app">
    <h1>这是一个h1标签</h1>
    <h1 :style="styleObj1">这是一个h1标签</h1>
    <h1 :style="[styleObj1,styleObj2]">这是一个h1标签</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            styleObj1:{
                color:'red',
                'font-weight':200
            },
            styleObj2:{
                'font-style':'italic'
            }
        }
    })
</script>

在这里插入图片描述

v-for

用法：基于源数据多次渲染元素或模板块。
此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<div id="app">
    <p v-for='(val,key,i) in user'>
        值:{{val}}
        键:{{key}}
        索引:{{i}}
    </p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{
                id:1,
                name:'托尼老师',
                gender:'男'
            }
        }
    })
</script>

效果：

在这里插入图片描述

  • alias中有三个参数时，分别代表值、键、索引
  • alias中有两个参数时，分别代表值、索引
  • alias中有一个参数时，会输出所有数据

in后面可以放普通的数组、对象数组、对象、也可以放数字

<div id="app">
    <p v-for='count in 10'>
        {{count}}
    </p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
        }
    })
</script>

在这里插入图片描述

注意事项

如果使用v-for 有问题 在使用v-for的同时,指定唯一的字符串或者数字类型:key值

  • key在使用的时候 必须使用v-bind指令绑定的形式 指定key的值
  • v-for循环的时候, key属性只能使用 Number或者String类型

v-if 与 v-show

v-if用法：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 template，将提出它的内容作为条件块。
v-show用法：根据表达式之真假值，切换元素的 display CSS property。

<div id="app">
    <input type="button" value="toggle" @click='flag=!flag'>


    <h3 v-if='flag'>这是用v-if控制的元素</h3>
    <h3 v-show='flag'>这是用v-show控制的元素</h3>
    
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            flag:false
        },

    })
</script>

当我们点击toggle按钮时，显示元素
在这里插入图片描述
再次点击时，隐藏该元素
在这里插入图片描述

两者之间的区别

  1. v-if的特点：每次都会重新删除或者创建元素
    v-show的特点 ：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none的样式
  2. v-if 有较高的切换性能消耗 v-show有较高的初始渲染消耗
  3. 如果元素涉及到频繁的切换,最好不要使用v-if,而是推荐v-show
    如果元素可能永远也不会被显示出来 被用户看到,则推荐 v-if

事件修饰符

  • .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
  • .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
  • .capture：与事件冒泡的方向相反，事件捕获由外到内
  • .self：只会触发自己范围内的事件，不包含子元素
  • .once：只会触发一次

.stop 防止事件冒泡

冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外(子节点---->父节点)的点击事件

<div id="app">
    <div class="inner" @click='divHandler'>
        <input type="button" value="戳他" @click.stop='btnHandler'>
    </div>

</div>
<script>
    // 创建vue实例
    var vm= new Vue({
        el:'#app',
        data:{
            
        },
        methods: {
            divHandler(){
                console.log('点击了父元素div');
            },
            btnHandler(){
                console.log('点击了子元素input');
            },
        },
    })
</script>

未添加.stop事件修饰符时，点击按钮
在这里插入图片描述
添加.stop事件修饰符时，点击按钮
在这里插入图片描述

.prevent 阻止默认行为

点击超链接a标签会直接跳转至其他页面，但是添加.prenvent事件修饰符之后，会阻止它跳转

<div id="app">
    <div class="inner" @click='divHandler'>
        <input type="button" value="戳他" @click.stop='btnHandler'>
        <!-- 阻止默认和阻止事件冒泡 -->
        <a href="http://www.baidu.com" @click.prevent.stop='linkClick'>有问题,找百度</a>
    </div>

</div>
<script>
    // 创建vue实例
    var vm= new Vue({
        el:'#app',
        data:{
            
        },
        methods: {
            divHandler(){
                console.log('点击了父元素div');
            },
            btnHandler(){
                console.log('点击了子元素input');
            },
            linkClick(){
                console.log('点击了超链接a');
            }

        },
    })
</script>

在这里插入图片描述

.capture 捕获事件

捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内(父节点---->子节点)的点击事件

<div id="app">
    <div class="inner" @click.capture='divHandler'>
        <input type="button" value="戳他" @click='btnHandler'>
    </div>

</div>
<script>
    // 创建vue实例
    var vm= new Vue({
        el:'#app',
        data:{
            
        },
        methods: {
            divHandler(){
                console.log('点击了父元素div');
            },
            btnHandler(){
                console.log('点击了子元素input');
            },

        },
    })
</script>

在这里插入图片描述

.self

只会阻止自己身上冒泡行为的触发, 并不会正真的阻止冒泡行为，即只会触发自己范围内的事件，不会包含子元素。

    <style>
        .outer{
            border: 2px solid black;
            width: 100px;
            height: 100px;
        }
        .middle{
            border: 2px solid red;
            width: 50px;
            height: 50px;
            margin: 0 auto ;
            
        }

    </style>
<div id="app">

       <div class="outer" @click.self="divHandler">
    　　　　<div class="middle" @click.self="div">
        　　　　<button @click.stop="btnHandler">戳他</button>
        　　</div>
    　　</div>
<script>
    // 创建vue实例
    var vm= new Vue({
        el:'#app',
        data:{
            
        },
        methods: {
            divHandler(){
                console.log('点击了父元素div');
            },
            div(){
                console.log('点击了中间div')
            },
            btnHandler(){
                console.log('点击了子元素btn');
            },


        },
    })
</script>

在这里插入图片描述

.once

如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。比如点击a标签，只会跳转一次，再次点击不会执行事件。

<div id="app">
    <!-- 使用.once只触发一次事件处理函数 -->
    <a href="http://www.baidu.com" @click.prevent.once='linkClick'>有问题,找百度</a>
</div>
<script>
    // 创建vue实例
    var vm= new Vue({
        el:'#app',
        data:{
            
        },
        methods: {

            linkClick(){
                console.log('点击了超链接a');
            }

        },
    })
</script>

框架和库的区别

框架是一套完整的解决方案,对项目的入侵性比较大,项目如果需要更换框架,则需要重新架构整个项目
比如nodeJS 中的 Express 、koa2

库(插件): 提供某一个小的功能,对项目的入侵性比较小,如果某个库无法完成需求,可以很容易的切换其他的库
query===>Zepto
EJS 切换到 art-template

Yvonne.Y
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue中 v-once的使用
ChuanyangChen的博客
01-20 898
Vue中 v-once的使用 v-once所在节点在初次动态谊染后，就视为静态内容了。 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。 测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> </head> <body> &lt
vue事件修饰符和按键修饰符用法总结
12-03
Vue.js 为此引入了事件修饰符，使得这些操作变得更加简单。本文将深入探讨Vue中的事件修饰符和按键修饰符。 首先，让我们来看看事件修饰符。事件修饰符是以点`.`开头的指令后缀，用于在事件处理函数中添加额外的...
Vue2.0学习笔记：Vue事件修饰符的使用
weixin_30593443的博客
08-02 294
事件处理 如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。 在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有： .stop：等同于JavaScript中的event.stopProp...
Vue $once 函数
qq_36723759的博客
03-25 2732
Vue $once 函数 1、作用 $once 是一个函数，可以为 vue 实例绑定一个自定义事件，但是这个事件只会被触发一次，触发之后就会被移除。 类似的监听函数有： $on. 2、使用与 $on (1) $once('xxxx', ()=>{...}) 与 $on('xxx', ()=>{...}) 的用法类似。 (2) $once 只监听一次； $on 一直监听。 3、使用 $once 清除定时器 mounted(){ let count = 1; let timer = se
vue 阻止事件向下传递
m0_71615654的博客
01-17 1379
vue 阻止事件向下传递
Vue.js学习笔记之修饰符详解
12-09
除了上述介绍的修饰符，Vue.js 还有其他的修饰符，如`.capture`(捕获模式)、`.self`(只处理自身触发的事件)、`.once`(只触发一次)等，它们都极大地增强了Vue的事件处理能力。理解并熟练运用这些修饰符，可以使你的...
Vue.js 事件修饰符的使用教程
12-07
在Vue.js中，事件修饰符是用于简化DOM事件处理的方式，它们可以让我们更...记住，事件修饰符是Vue.js指令系统的一部分，它们增强了Vue组件的交互性和可维护性。在实际项目中，熟练掌握这些修饰符将大大提高开发效率。
详解Vue.js中.native修饰符
12-29
这篇文章给大家介绍Vue.js中.native修饰符，感兴趣的朋友一起看看吧。 .native修饰符 官方对.native修饰符的解释为： 　有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。...
关于Vue的学习—v-once、v-clock、v-pre
衍生星球的博客
07-20 246
v-cloak指令可以保持在DOM元素上，直到编译结束才自动移除，这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态，等编译完成后，CSS样式就对该DOM元素无效了。运行上面的示例代码，当打开浏览器页面时，DOM元素中的{{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。v-pre指令会跳过这个元素和它的子元素的编译过程，所以可以用来显示原始Mustache标签。
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue】$once 原来还能这样用
军火库
05-11 2413
在 Vue 中有很多 API 都有很实用的地方，只是需要挖掘适用的场景，这里整理出了 $once 的两个小技巧，也是在平常工作中用的比较多的，分享给大家，希望对大家能有帮助。 清除定时器 定时器大家用的应该也不少，像我一开始一般都是这样写的，在 created 中创建定时器，在 beforeDestroy 中销毁定时器。 <script> export default { name: "Timer", data() { return { timer: null,
vue事件委托传递节点防止向下传递穿透
weixin_42835782的博客
01-20 4320
例如： <li @click="popSelect($event)"> <span>Bank Country</span> <input type="text" placeholder="Select bank country" v-model="model.bank_country" name="bank_country" readonly /> <van-icon name="arrow-down"></van-i
【接地气】真正一口气讲清楚了Vue事件修饰符.once、.prevent、.stop、.capture、.self、.passive、.exac、.native的作用
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-15 6276
<template> <div class="sg-body"> <!-- 2.1.4 新增 .once --> <h1>.once</h1> <a href="#" @click.once="alert" >用了“ @click.once”，点击只会执行一次弹窗提示</a > <hr /> <h1>.prevent</h1&...
vue click.stop阻止点击事件继续传播
热门推荐
如果我年少有为不自卑
11-14 4万+
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app",
关于vue，记录一次修饰符.stop和.once的使用，以及猜想。
最新发布
Jomly Kellenda的博客
08-14 496
当.stop.once混用的时候，第一次点击stop和once都对当前元素的函数，其作用范围只在当前元素上。p元素（绿区）绑定了pClick的指令，p元素是div元素（背景红区）的子元素，div也绑定了一个事件。点击p元素两次，p所绑定的事件只触发了一次，div所绑定的事件两次被触发。p元素（绿区）绑定了pClick的指令，p元素是div元素（背景红区）的子元素，div也绑定了一个事件。点击p元素，div所绑定的事件没有被触发。第二次点击绿区p，没有触发了绿区p的事件，但是触发了红区div的事件。
vue阻止向上和向下冒泡
Lotus的博客
05-13 1万+
1.阻止向下冒泡 <div class="content" @click.self="cancelFunc"></div> 2.阻止向上冒泡 <div class="item" @click.stop="function">
vue基础 - 18 （事件修饰符：prevent、stop、once、 capture、self、passive）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-04 268
事件修饰符： prevent： 阻止 默认事件（例如阻止a标签的href跳转） prevent.right：右键点击，阻止默认事件 stop：阻止事件冒泡 once：事件只触发一次 capture：使用事件的捕获模式 self：只有event.target是当前操作的元素，才触发事件 passive：事件的默认行为立即执行，无需等待事件回调执行完毕 ...
vue中点击父容器不触发子容器
qq_43351249的博客
06-01 1723
阻止事件冒泡的行为
请简述Vue.js v-model修饰符的作用
05-05
Vue.js的v-model指令是用于实现双向数据绑定的，但有时候我们需要在输入框中对数据进行一些格式化或者过滤操作，这时候就需要使用v-model修饰符来改变v-model的默认行为。 v-model修饰符可以有以下几种： 1. .lazy：在默认情况下，v-model会在每次输入框值改变时同步数据，而使用.lazy修饰符可以让它变为在“change”事件中同步数据。 2. .number：如果需要将输入框的值转换为数值类型，可以在v-model中添加.number修饰符。 3. .trim：如果需要去除输入框的首尾空格，可以在v-model中添加.trim修饰符。 例如，下面的代码演示了如何使用v-model修饰符： ``` <template> <div> <input v-model.lazy="msg"> <input v-model.number="age"> <input v-model.trim="username"> </div> </template> <script> export default { data() { return { msg: '', age: 0, username: '' } } } </script> ``` 在上面的代码中，使用了.lazy修饰符来让v-model在“change”事件中同步数据，使用了.number修饰符将输入框的值转换为数值类型，使用了.trim修饰符去除了输入框的首尾空格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值