Vue事件的基本操作你知道吗

2025-01-15 12:55:53

1. 事件的基本操作

1.1 v-on

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

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

1.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>

1.2 事件修饰符

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

1.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>

1.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>

1.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>

1.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被修改了")
            }
        })

1.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一些基本事件的操作，希望对大家有帮助！

vue学习笔记之给组件绑定原生事件操作示例

本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发
VUE入门学习之事件处理

目录 1. 函数绑定 2. 带参数和$event 3. 多个函数绑定一个事件 4. 事件修饰符 5. 按键修饰符 6. 系统修饰键 .exact 修饰符鼠标按钮修饰符总结 1. 函数绑定可以用v-on:click="methodName"或者快捷方式 @click="methodName"绑定事件处理函数 @click="methodName()"也可以,@click="methodName"猜测是简写 <div
Vue触发input选取文件点击事件操作

CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display: none; } } HTML <div class="upload-btn-box"> <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="
Vue 事件处理操作实例详解

本文实例讲述了Vue 事件处理操作.分享给大家供大家参考,具体如下: 1 监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. html: <div id="app1"> <button v-on:click="counter +=1">递增</button> <p>按钮已被点击 {{ counter }} 次.</p> </div> js: va
详解Vue的键盘事件

目录常用按键别名未提供别名的键系统修饰键自定义按键别名总结在js中我们要获取一个按键的编码通常需要通过(keydown/keyup)去绑定一个事件,再通过默认参数event中的keyCode属性去取得编码.如果我们要实现按固定的键才能触发事件时就需要在事件中进行不断的判断,这样会显的很麻烦,如 var input = document.querySelector('input') input.onkeyup = function (e) { if (e.keyCode == 13)
Vue事件的基本操作你知道吗

目录 1.事件的基本操作 1.1v-on 1.1.1v-on的小案例 1.2事件修饰符 1.2.1事件修饰符代码解析 1.3键盘事件 1.4计算属性(computed) 1.5监视属性(watch) 1.5.1watch和computed的区别总结 1. 事件的基本操作 1.1 v-on 功能:绑定指定事件名的回调函数标准写法: v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx' 简便写法: @click='xxx' @k
详解vue事件对象、冒泡、阻止默认行为

整理文档,搜刮出一个vue事件对象.冒泡.阻止默认行为的代码,稍微整理精简一下做下分享. 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <s
vue事件修饰符和按键修饰符用法总结

之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .prevent .capture
详解Vue 事件修饰符capture 的使用

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则由外而内触发. 就是谁有该事件修饰符,就先触发谁. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title&g
对vue事件的延迟执行实例讲解

vue事件的延迟执行: <div id="box"> <input type="text" @keyup="show | debounce 2000"> </div> <script> var vm=new Vue({ data:{ }, methods:{ show:function(){ alert(1); } } }).$mount('#box'); </script> 以上这篇对
vue 事件获取当前组件的属性方式

目录 vue事件获取当前组件属性 click事件获取当前元素属性 Vue可以传递$event对象 Event对象的一些兼容性写法 vue事件获取当前组件属性 for循环把当前的item传递给绑定事件: <block v-for="(item, index) in data_list"> <div v-on:click='changeType(item)' class="ci "> <div class="cib" f
vue @click与@click.native,及vue事件机制的使用分析

目录 @click与@click.native及vue事件机制点击事件@click 失效 @click与@click.native及vue事件机制 vue维护了自己的事件机制. 所以就有了原生DOM事件和自定义事件的区别,比如下面这段官网原话. 用在普通元素上时,只能监听原生 DOM 事件.用在自定义元素组件上时,也可以监听子组件触发的自定义事件. 本文也将围绕这一句话展开. 想必大家都会在自定义组件中自定义事件. <my-component v-on:my-event="doSomet
Vue事件修饰符native、self示例详解

事出有因之前面试被问到的native和self相关问题,self我觉得自己应该能回答出来,可能被之前一小时的问题整懵逼了.尴尬~~ 自己研究了一下,不足之处望补充,相互进步 native 修饰符native,有什么用 native是原生事件(第一反应,当时没然后了...) 恶补一下 native 一定是用于自定义组件,也就是自定义的html标签结合代码说得明白 <body> <div id="app"> <div class="box&quo
Vue 事件的$event参数=事件的值案例

template <el-table :data="dataList"> <el-table-column label="id" prop="id"></el-table-column> <el-table-column label="name" prop="name"> <template v-slot="props"> &l
vue事件监听函数on中的this指针域使用

目录事件监听函数on中this指针域 vue中的this问题在回调函数之前重新将this赋值使用箭头函数事件监听函数on中this指针域使用eventBus在两个组件A,B之间通讯: //定义全局eventBus用于事件传递 var bus = new Vue(); //A组件 var A = Vue.component({ ... data:{ dataA:1, }, //在钩子函数中将监听_event事件 creat