Vue---方法和事件绑定

事件

1.方法的写法在methods中写方法,供事件或者别的方法内部调用方法的写法:由于是做了es6语法处理的 所以学过的所有方式的写法都行

    <div id="app">

    div>

    <script>

        new Vue({

            el:"#app",

            data:{

                msg:"hello"

            },

            methods:{

                fn:function(){},

                fn2:()=>{},

                fn3(){}

            }

        })

    script>

 

事件绑定：

//v-on: 和  @ 都是绑定事件的指令

//指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加

点击事件1

点击事件2

        <button v-on:click="fn">fnbutton>

        <button v-on:click="fn()">fn()button>

加括号和不加括号都可以调用函数。

 

 

     一个元素可以绑定多个事件

        <button v-on:click="fn" @mouseenter="fn4">fnbutton>

 

怎样使元素调用两个函数：(给事件绑定函数，在函数中调用你想执行得多个函数)

        <button v-on:click="fn()">fn()button>

    div>

    <script>

        new Vue({

            el:"#app",

            data:{

                msg:"hello"

            },

            methods:{

                fn:function(){

                   console.log(2222)

                   this.fn3();

                    this.fn2()；

                },

                fn2:()=>{console.log("事件1")},

                fn3(){console.log("事件2")},

                fn4(){console.log("移入")}

            }

        })

    script>

 

 

3.事件修饰符(面试)

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