03-Vue-事件

(1).事件

1.方法的写法 在methods中写方法,供事件或者别的方法内部调用

方法的写法:由于是做了es6语法处理的 所以学过的所有方式的写法都行

new Vue({

  el:"#app",

  data:{},  

  methods:{

      fn1(){console.log("fn1")},

      fn2:function(){console.log("fn2")},

      fn3:()=>{console.log("fn3")},

      fn4,

      fn5,

      fn6                  

    }

})

(2).事件绑定

• v-on: 和  @ 都是绑定事件的指令
• 指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加

(3)事件修饰符(面试)

•  .stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
•  .prevent 阻止默认事件
•  .capture 添加事件侦听器时让事件在捕获阶段触发
•  .self  其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件,  虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
•  .once 事件只触发一次,触发完之后,事件就解绑
•  多修饰符一起使用:连点

 <div id="app">

        <!-- 点击按钮执行函数，不管有没有（） -->

        <button v-on:click='fn3'>change</button>

        <button v-on:click='fn3(100,200,$event)'>change</button>

        <!-- 语法糖 -->

        <button @click='fn3(100,200,$event)'>change</button>

        <!-- 绑定多个事件 -->

        <button v-on:click='fn3' @mouseenter="fn">change</button>

       

        <p>{{msg}}</p>

        <p>{{fn3}}</p>

 <!-- 事件链 -->

        <!-- 其他盒子只有@click时候。默认冒泡阶段触发，现在是捕获阶段触发。不论点击谁都会触发1 -->

        <div class="box1" @click.capture="fnclick1">

            1

            <!-- 其他盒子只有@click时候。点击3的时候，执行3、1 ；点击2的时候，执行2 -->

            <div class="box2" @click.self.stop="fnclick2">

                2

                <!-- 其他盒子只有@click时候。阻止了冒泡，点击3，只会打印3 -->

                <div class="box3" @click.stop="fnclick3">

                    3

                </div>

            </div>

        </div>

       

        <!-- 阻止了默认事件 -->

        <a href="hhttp://www.baidu.com" @click.prevent>baidu</a>

    </div>

    <script>

        var vm = new Vue({

            el: "#app",

            data: {

                msg: "hello"

            },

            methods: {

                fn: function () { },

                fn2: () => { },

                fn3(a, b, e) {

                    console.log(this === vm); //fn3回调函数，Vue内部再调用

                    vm.msg = "66"            //全局vm 同 this.msg

                    console.log(a, b, e);

                },

                fn5() {

                    // 执行不同的业务

                    this.fn();

                    this.fn1();

                    this.fn3();

                },

                fnclick1() {

                    console.log(1);

                },

                fnclick2() {

                    console.log(2);

                },

                fnclick3() {

                    console.log(3);

                },

            },

        })       

    </script>

(4)事件中的this与数据操作(面试)

1. 方法中的this代表vm对象

    a.方法和ES5的函数中的this是vm对象

    b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法

2. 操作数据: this.xx="新值"

//这里的修改会执行两步操作:

//a.修改内存data容器中的数据

//b.刷新UI==>重新设置innerHTML