【精讲】vue 比较watch侦听方法、v-on(基本使用、修饰符、传参）

目录

比较watch方法

v-on

基本使用

修饰符

传参

---

第一部分：比较watch侦听方法

<div id="root">
            <h1>计算属性：computed</h1>
              <!-- 添加页面插值语法 -->
            {{fullName}}
            <h1>方法：methods</h1>
            {{fullName2()}}
            <h1>侦听器：watch</h1>
            {{watchFullName}}
            <h1>年龄：age</h1>
            {{age}}
        </div>

        <script type="text/javascript">
            //定义一个变量并给定一个值  会根据结果去判断该值是否会发生变化
            let  other = 'hello my name'
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        //编辑数据
                        fistname: 'zhang',
                        lastname: 'san',
                        watchFullName:'zhangsan',
                        age: '19'
                    }
                },
                // 比较方法,计算属性,事件监听
                methods: {
                    fullName2() {
                        console.log('使用了一次fullName2()方法')
                        return this.fistname + this.lastname+other
                    }
                },
                computed: {
                    fullName() {
                        console.log('使用了一次fullName()计算属性')
                        return this.fistname + this.lastname+other
                    }
                },
                /* firstName(newval,oldval){//监听器中有两个参数 一个是newval新的值
                一个是oldval是老值
                console.log(newval);
                console.log(oldval);
                } */
                watch: {
                    fistname(newfist,newlast) {
                    console.log('fistname触发了watch');
                      // this.watchFullName = this.fistname + this.lastname+other
                      this.watchFullName = this.newfist+this.newlast+other
                    },
                    lastname(newfist,newlast) {
                    console.log('lastname触发了watch');
                     // this.watchFullName = this.fistname + this.lastname+other
                      this.watchFullName = this.newfist+this.newlast+other
                    }
                }
            })
        </script>

拓展watch侦听案例：

    <div id="root">
            <!-- 添加插值语法 -->
            <div>今天天气很热{{info}}</div>
            <!-- 添加点击事件方法 -->
            <button @click="change">点击</button>
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data(){
                    return{
                        //定义一个数据名等于true(自定义数据名)
                        isHot:true
                    }
                },
                //下面是计算属性
                computed:{
                    //根据方法判断该语句是真还是假，若是真那么是炎热，若是假，那么是凉爽
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods:{
                    //采用点击事件(方法)
                    change(){
                        //设置开关键，点击后变更真假
                        this.isHot = !this.isHot
                    }
                },
                //第一种写法
                watch:{
                    immediate:true,//初始化时让handler调用一下
                    handler(newvalue,oldvalue){
                        console.log('isHot被修改了',newvalue,oldvalue)
                    }
                }
            })
            
            
            // 第二种侦听事件写法
            //第二个写法的好处是 在不明后期会不会被改动时，可以写在外面。
            // vm.$watch('isHot',{
            //         immediate:true,//初始化时让handler调用一下
            //         handler(newvalue,oldvalue){
            //             console.log('isHot被修改了',newvalue,oldvalue)
            //         } 
            // })
        </script>

第二部分：v-on（基本使用）

<div id="root">
            <!-- 这里使用的是v-on:绑定一个点击事件,v-on是一个监听事件 -->
            <div @click="change()">点击</div>
            <!-- 方法可以加括号也可以省略 -->
            <input @input="changeinput" />
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                //挂载id属性
                el: '#root',
                data() {
                    return {

                    }
                },
                //添加方法全聚集该函数内部
                methods: {
                    change() {
                    console.log('111')
                    },
                    //方法在上面可以加()也可以不加()
                    changeinput() {
                    console.log('222')
                    }
                }
            })
        </script>

第三部分：v-on（修饰符）

<style>
            .div {
                width:200px;
                height: 100px;
                background: #f00;
            }
        </style>
    </head>
    <body>
        
        <div id="app">
             <div @click="divClick" class="div">
            <!--1.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() -->
                <button type="button" @click.stop="btnClick">点击</button>
           </div>
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {

                    }
                },
                methods:{
                    divClick(){
                        console.log('点击了div');
                    },
                    btnClick(){
                        console.log('点击了btn');
                    }
                }

            })
        </script>

案例与事件归总：

<!-- 准备一个容器 -->
        <div id="root">
            <!-- 出现滚动条：overflow:auto;
             滚动事件绑定@scroll="demo"-->
            <h2>
                欢迎来到{{name}}学习
            </h2>
            <!-- 这里的.prevent是事件修饰符(阻止默认行为)，设置上了就不会让a标签点击后就不会发生其它弹跳  或者是在下面的showInfo中添加
            event.preventDefault();//指的是阻止默认行为-->
            <a href="https://daohang.qq.com/?fr=hmpage" @click.prevent="showInfo">点我提示信息</a>
          <!-- .prevent 对 click 添加修饰符-->
             
             <!-- stop:阻止事件冒泡(常用); -->
            <div class="demo1" @click="showInfo">
                <!-- 在这种内外有两个点击事件的情况下,执行点击会有跳两次,若使用stop那么就不会了，他只会执行一次便停止
                 该stop必须绑定内部点击事件，外部不执行-->
             <button @click.stop="showInfo">点我提示信息</button>
            </div>
            
             <!-- 3,once 事件只触发一次(常用);点击一次了就不能点击第二次了 第二次即失效-->
            <button @click.once="showInfo">点我提示信息</button>
             
            
              <!-- 5,self:只有event.tatget是当前操作的元素时才触发事件;
               该修饰符与stop类似，你可以绑定某块点击事件的元素，后面就不会再执行了。
               -->
             
             
        </div>
        
        <!-- vue中的事件修饰符:
           1,prevent:阻止默认事件(常用);
           2,stop:阻止事件冒泡(常用);
           3,once 事件只触发一次(常用);
           4,capture:使用事件的捕获模式;
           5,self:只有event.tatget是当前操作的元素时才触发事件;
           6,passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
           -->
        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                     name:'学校',
                },
                methods:{
                    showInfo(event){
                        // console.log(event.target);
                        alert('点我查询');
                    }
                }
            })
            
            
        </script>

第四部分：v-on（传参）

<div id="root">
            <!-- 事件传多个参数 -->
            <!-- 第一个是传一个参数 -->
            <button @click="btnClick1(123)">点击1</button>
            <!-- 第二个是传多个参数 -->
            <button @click="btnClick2()">点击2</button>
        </div>
        <!-- 注意
                    如果我只要传递e事件 那么可以不写参数，当然也可以写一个参数叫$event
                    <button @click="btnClick">按钮5</button>
         <button @click="btnClick($event)">按钮5</button> -->

        <!-- 事件传多个参 -->
        <!--  如果我要传递多个参数  那么既要写参数，也要写$event,方法中用e和形参进行接收
                    <button @click="btnClick($event,123)">按钮6</button> -->
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data() {
                    return {

                    }
                },
                methods: {
                    btnClick1(val) {
                        console.log(val)
                    },
                    btnClick2($event,val) {
                        console.log('如果我只要传递e事件 那么可以不写参数，当然也可以写一个参数叫$event')
                    }
                }
            })
        </script>

查看更多事件修饰点击下方链接，可以查看更多！！！！！：

事件处理 — Vue.js