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

时间：2022-09-20 09:27:08|栏目：vue|点击：次

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>