【Vue】第二部分 事件的基本操作

已于 2022-08-11 15:39:51 修改
阅读量364 收藏
点赞数 1
分类专栏： 前端框架Vue 文章标签： vue.js javascript 前端
于 2022-02-22 23:21:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Trees__/article/details/123079497
版权

【Vue】第二部分 事件的基本操作

文章目录

2. 事件的基本操作

2.1 v-on

功能：绑定指定事件名的回调函数

标准写法：
v-on:click='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'

简便写法：
@click='xxx'
@keyup='xxx'
@keyup.enter='xxx'

2.1.1 v-on的小案例

 <div id="root">
        <!-- 需求当点击按钮时弹出同学你好！ -->
        <h1>欢迎来到{{name}}学习</h1>

        <!--   v-on:xxx可以简写为： @xxx   -->
        <button v-on:click="btn1">点击我进行学习（不传参）</button> 
        <button @click="btn2('hello!','同学',$event)">点击我进行学习（传参）
				//如果需要传参数的话就在后面加（），里面写的就参数
    </div>


    <script>
        /* 
            事件回调需要写在methods对象中，最终会在vm上
            methods中配置的函数，不要使用箭头函数
            methods中配置的函数，this指向vm或者是组件实例化对象
        */
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                name: "清华大学"
            },
            methods: {
                btn1() {
                    alert("同学你好！")
                },
                btn2(x, y, event) {
                    console.log(x, y);
                    console.log(event.target.innerText);
                    alert("同学你好！")
                }
            }
        })
    </script>

2.2 事件修饰符

 Vue中的事件修饰符有6个
            - prevent : 阻止默认行为
            - stop : 禁止冒泡
            - once : 事件只触发一次
            - capture : 使用事件捕获模式
            - self : 只有even.target所指向的操作元素才能触发事件
            - passive : 让事件的默认行为立即执行

2.2.1 事件修饰符代码解析

html代码

<body>
    <div id="root">

        <!-- 1. prevent : 阻止默认行为 -->
        <a href="https://www.bilibili.com/" @click.prevent = "prevent">点击我进入b站</a>
        <hr>

        <!-- 2. stop : 禁止冒泡 -->
        <div @click = "stop" class="div1">
            <button @click.stop = "stop">点击我触发事件</button>
        </div>
        <hr>

        <!-- 3. once : 事件只触发一次 -->
        <button @click.once = "once">我只能触发一次哦</button>
        <hr>

        <!-- 4. capture : 使用事件捕获模式 -->
        <div class="box1" @click.capture = "capture(1)">
            div1
            <div class="box2" @click = "capture(2)">
                div2
            </div>
        </div>
        <hr>

        <!-- 5. self : 只有even.target所指向的操作元素才能触发事件 
                相当于要满足两个条件
                    - 1. event.target必须指向self所修饰的元素
                    - 2. 触发的也必须是这个元素
                    从某种意义上相当于禁止了冒泡，因为冒泡虽然触发上面事件
                    但是event.target所指向的并非是这个元素
        -->

        <div class="box3" @click.self = "self">
            <button @click = "self">点击我</button>
        </div>
        <hr>

        <!-- 6. passive : 让事件的默认行为立即执行 
            scroll:表示的是滚动条进行滚动，滚动条改变就触发，并且滑到底就不能继续触发
            wheel :表示的是鼠标滚轮滚动,滚动一次就触发一次，滑到底依旧可以触发
        -->
        
        <ul style="overflow: auto; height: 100px;" @scroll.passive = "passive">
            <li style="height: 600px;"></li>
        </ul>
        
          <!-- 7. 如果想要使用多个修饰符可以使用链式形式 -->
          <!-- 需要即想要阻止冒泡，也想要禁止默认行为 -->
        <div @click = "stop" class="div1">
            <a @click.stop.prevent = "stop" href="https://www.baidu.com">点击我进入</a>
        </div>

    </div>

js代码

 <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                
            },
            methods:{
                prevent(){
                    alert("禁止默认行为");
                },
                stop(){
                    alert("禁止冒泡")
                },
                once(){
                    alert("只能触发一次")
                },
                capture(x){
                    alert("现在是捕获模式  "+x)
                },
                self()
                {
                    alert("self")
                },
                passive(){
                    for (let index = 0; index < 1000; index++) {
                        console.log("1")
                    }
                }
            }
        })
    </script>
</body>

2.3 键盘事件

常用的按键别名：	
			1.正常使用
      例如： @keyup.enter = "xxx"
 						- 回车   enter
            - 删除   delete
            - 退出   esc
            - 空格   space
            - 上     up
            - 下     down
            - 左     left
            - 右     right
       2. 特别的按键
       			系统修饰键 :
            - ctrl,shift,alt,meta(就是window键)
            - 换行   tab(必须配合keydown去使用)
            - 配合keyup使用，当按下修饰键的时候在按下其他的键，然后在松开其他键事件才可以被触发
            - 配合keydown使用，就直接触发事件
       3.如果想要绑定其他按键，可以使用按键原始本身的key值（名字）去绑定

       4.可以自定义去设置按键别名，Vue.config.keyCodes.自定义键名 = 键值

具体案例

 <div id="root">
        <h1>欢迎学习{{name}}</h1>
        <input type="text" @keyup="keyboard">
        <br><br>
        <input type="text" @keyup.huiche="keyboard">
        <br><br>
        <input type="text" @keyup.ctrl.y="keyboard">
    </div>

    <script>
        Vue.config.productionTip = false
        Vue.config.keyCodes.huiche = 13  //定义了一个别名
        var vm = new Vue({
            el: '#root',
            data: {
                name: "Vue"
            },
            methods:
            {
                keyboard(event){
                    // console.log(event.keyCode);   按键编码
                    // console.log(event.key);      按键的名字
                    console.log(event.target.value);
                }
            }
        })
    </script>

2.4 计算属性（computed）

  1. 在页面中的使用方法：=={{方法名}}==来显示计算结果

  2. 定义：要使用的属性/变量不存在，需要通过已有的属性计算出来的

  3. 原理：底层是借助了Object.defineProperty方法所提供的getter和setter

  4. get函数执行的时机：

    （1）初次读取的时候会执行一次

    （2）当所依赖的数据发生改变时就会再次被调用

  5. 相比于methods的优势，内部是有缓存机制（复用），效率会更高，调试会更方便

  6. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

  7. 需要注意的一个特殊点：以下面例子举例：get函数中return返回值的会作为fullname的值进行返回，在控制台可以看到是这样的形式呈现fullname：xxx。

  8. computed中的this指向是vm

  9. 简写形式: 基本要求就是在不使用set的情况下才可以简写 注意在调用的时候不要写成fullname()

<div id="root">
        姓: <input type="text" v-model="firstname">
        <br><br>
        名: <input type="text" v-model="lastname">
        <!-- 第一种写法 使用插值语法 -->
        <!-- <h3>全名: {{firstname.slice(0,3)}} - {{lastname}}</h3> -->

        <!-- 第二种写法 使用methods -->
        <!-- <h3>全名: {{fullname()}}</h3> -->

        <!-- 第三种写法 使用computed（计算属性） -->
        <h3>全名:{{fullname}}</h3>

    </div>

    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: { //属性
                firstname: "张",
                lastname: "三",
            },
            // methods:
            // {
            //     fullname() {
            //         // 这里的this指向是vm
            //         return this.firstname.slice(0,3) + "-" + this.lastname
            //     }
            // }
            computed: {
                fullname: {
             /* 
               1. Vue已经进行配置过了将this指向vm
               2. 当用人去读取fullname时，get就会被调用，但是get只被执行一次因为Vue做														了一个事，就是缓存，当执行过一次后，后面数据再去读取会走缓存这条路。
              3. return 的返回值会作为fullname的值，将fullname也抛到vm
              	（fullname:"张-三"）           
            */
                    get() {
                        return this.firstname + "-" + this.lastname
                    },
                    set(value) {                  
                        // 当fullname被修改时，set才会被调用
                        var arr = value.split("-") //按照指定字符串进行拆分成数组
                        this.firstname = arr[0]
                        this.lastname = arr[1]
                    }

                    /* 
                        简写形式: 基本要求就是在不使用set的情况下才可以简写
                        注意在调用的时候不要写成fullname(),这个很特殊
                        computed:{
                            fullname(){  //相当于fullname：function(){}
                                 return this.firstname + "-" + this.lastname
                            }
                        }

                    */

                }

            }
        })
    </script>

2.5 监视属性（watch）

  1. 当所监视的属性发生变化时，回调函数自动调用，进行相关的操作

  2. 监视属性必须要存在，才能进行监视

  3. 监视属性的两种写法：
    （1）在new Vue中配置watch

    ​（2）通过vm.$watch进行监视

  4. watch里handler函数this的指向是vm

<div id="root">
        <h1>今天天气真{{weather}}</h1>
        <button @click="change">切换天气</button>
         <h3>a的值是: {{a}}</h3>
        <!-- 在这里面可以写简单的代码 -->
        <button @click = "a++">点击我让a+1</button>
    </div>

    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                flag: true
            },
            computed: {
                weather() {
                    return this.flag ? "凉快" : "炎热"
                }
            },
            methods: {
                change() {
                    return this.flag = !this.flag
                }
            },
            watch:{  
                flag:{
                  // 第一个参数表示：修改后的值，第二个参数表示修改前的值
                   handler(newValue,oldValue){
                    console.log("flag被修改了");
                   },
                   immediate:true, //在一上来就执行一次
                  	deep:true  //表示深层次监视
               }

            }
        })

        vm.$watch("weather",{
            immediate:true,
            handler(newValue,oldValue){
                console.log("weather被修改了")
            }
        })

2.5.1 watch和computed的区别

watch和computed的区别是：

  1. watch能够完成的功能，computed不一定可以完成，但是computed可以完成的，watch也可以完成
  2. computed是依靠return的返回值（getter），所以它不能够完成异步的任务,而watch可以
  3. watch是靠我们自己写代码进行修改
  4. 在学Vue当中有两个很重要的原则：

  • 所有被Vue管理的函数，最好写成普通的函数，因为这样this的指向才是vue或者组件的实例化对象

  • 所有不被Vue管理的函数，最好写成箭头函数（Ajax的回调函数，定时器的回调函数，Promise的回调函数），因为这样this的指向才是vue或者组件的实例化对象

 <div id="root">
        <!-- 用watch写一遍姓名的案例 -->
        姓: <input type="text" v-model="firstname">
        <br><br>
        名: <input type="text" v-model="lastname">
        <h2>全名: {{fullname}}</h2>
    </div>

    <script >
        // 需求：想要1s过后在显示全名
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                firstname: "张",
                lastname: "三",
                fullname: "张 - 三"
            },
            watch: {
                firstname: {
                    handler(newval) {
                        console.log(this); //vm
                        /* 
                            这里使用箭头函数的目的就是为了让this指向vue
                            此时没有this所以他就向外面找，外面handler的this
                            指向是vm所以定时器的this指向也是vm
                         */
                       setTimeout(() => { //这里如果使用普通函数this就指向window
                        console.log(this);  //vm
                        this.fullname = newval + " - " + this.lastname
                       }, 1000);
                    }
                },
                lastname: {
                    handler(newval) {
                        setTimeout(() => {
                        this.fullname = this.firstname + " - " + newval
                        }, 1000);
                    }
                }
            }
        })
    </script>

总结

以上就是今天要讲的内容，本文仅仅介绍了Vue一些基本事件的操作，希望对大家有帮助！

Tree_wws
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
6-Vue中对字符串进行反转操作
sinat_41124751的博客
04-14 1294
split('').reverse().join('')对字符串进行反转操作 不清楚这几个函数具体含义,百度了一下,以下是对齐简单的理解↓↓ split()函数 返回一个下标从零开始的一维数组 split函数是编程语言中使用的一种函数名称，它是指返回一个下标从零开始的一维数组，split函数包含指定数目的子字符串。 简单理解:将字符串分割成一个字符串数组。 例: str...
Vue的事件处理
Web_South_Bay的博客
09-04 152
一、事件的基本使用： 1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名； <button v-on:click="showInfo">点我提示信息</button> 2.事件的回调函数需要配置在methods对象中，最终会在vm上； new Vue({ el:'#root', data:{ name:'尚硅谷' }, me.
Vue学习笔记（四）：事件处理
chb4715的博客
02-23 678
pre { line-height: 125%; margin: 0 } td.linenos pre { color: rgba(0, 0, 0, 1); background-color: rgba(240, 240, 240, 1); padding-left: 5px; padding-right: 5px } span.linenos { color: rgba(0, 0, 0, 1)...
vue2 button标签事件异常
Big-wang的专栏
10-15 704
vue2 button标签事件异常 1、遇到个坑，我在vue模板中给button 绑定事件，如果button标签中不加type=”button”，且click事件中有xhr操作，chrome浏览器竟然是单击后刷新页面，进而导致xhr取消。 同样的逻辑，如果不适用模板，button标签中不加type=”button”，即使click事件中有xhr操作，也不会刷新页面。 不只是Vue2的bug，
Vue框架学习笔记——键盘事件
最新发布
Aer_7z的博客
11-25 1319
简单介绍一下Vue中的键盘事件，为keydown和keyup事件绑定按键。
vue 遮罩层阻止默认滚动事件操作
11-20
补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动) vue项目中弹出层时，蒙版下还可以滚动页面。 移动端解决方案 在蒙层所在div上加 @touchmove.prevent <div class=”maskBox...
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
11-20
Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on:click 单击事件 <button class=” btn btn-info” v-on:click=”add(1)”> + + </button> <button ...
vue键盘事件点击事件加native操作
10-15
主要介绍了vue键盘事件点击事件加native操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 项目引入echarts 添加点击事件操作
10-14
主要介绍了vue 项目引入echarts 添加点击事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 通过绑定事件获取当前行的id操作
11-20
补充知识：Vue.js的事件(单双击、鼠标和键盘)以及阻止事件冒泡 自己随便琢磨了一个小的Demo，实现了一些事件和阻止事件冒泡，具体的代码如下，注释在代码里 html文件 <!DOCTYPE html> <html lang="en"> &...
一个完整的vue.js例子，编辑表格
chidangyin6408的博客
02-15 454
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="st...
Vue：button按钮的点击
谢桥的博客
12-09 2485
【代码】Vue：button按钮的点击。
vue阻止事件
weixin_34185320的博客
05-17 736
1.事情对象<!DOCTYPEhtml><html><head> <title></title> <metacharset="utf-8"> <scriptsrc="http://unpkg.com/vue/dist/vue.js"></script>...
Vue——事件处理
hulin的博客
04-09 548
Vue的事件处理
Vue学习
An_1999的博客
10-12 248
Vue学习2019/10/12 （事件处理） 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。 <div id="app"> <div id="example-1"> <button v-on:click="counter += 1"> 数值 : {...
前端---【Vue2基础更新:介绍事件绑定、传参、修饰符，计算属性】
m0_61307468的博客
05-29 1140
1. 事件处理1.1 事件绑定事件绑定是 Vue 中实现视图和业务逻辑交互的一种方式。将 DOM 元素上的原生事件绑定到 Vue 实例中的方法。当原生事件触发时,Vue 自动调用对应的实例方法。使用v-on:xxx或@xxx绑定事件。Vue基础更新----介绍事件绑定、事件传参、事件修饰符，计算属性，使用插值语法 {{hello}} 将 data 中的 hello 值渲染在 h2 标题中。 2. 使用 v-model 双向绑定 input 和 data 中的 firstName 和 lastName。 i
【Vue2】事件处理(点击、按键)
weixin_45707229的博客
08-19 5811
Vue的按键点击事件@click="函数名" 或者 @click="函数名($event,参数...)"，$event是点击事件的对象。
vue中的事件绑定
ead_gbe的博客
06-27 5247
按钮1</button><button class="btn" v-on:click = "showInfo2(66)">按钮2
解决vue中给button按钮添加点击事件，事件不生效问题。
热门推荐
Banality_human_workers的博客
06-15 1万+
解决vue中给button按钮添加点击事件，事件不生效问题。 话不多说，直接切入正题： 我们在开发中是不是经常会遇到给button或者input添加click事件，但是methods中却不走这个事件的问题呢？ 我找了很多文档，跟button本身是没有关系的。 话不多说 看代码： <div class="parentbox"> <div class="childbox"> <button @click="addEvent">测试</but
vue2 动态添加路由
09-07
第二部分是在仓库中对动态路由进行权限判断。这个过程涉及到当前登录用户的角色和权限列表，根据这些信息来生成当前用户的权限路由，并供侧边栏和路由守卫使用。 总结来说，Vue2中动态添加路由可以通过Vue Router的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值