03Vue事件

Vue提供了事件的绑定，方法写在methods对象中。

绑定dom中有两种方法：

　　方法一：v-on:click/dblclcick/mouseOver/mouseOut=“方法名”等等

这种和JQuery的事件差不多，在原生态js中去掉了on。

　　方法二：@click/dblclcick/mouseOver/mouseOut="方法名"。

相对于方法一，将v-on:替代为@。还是比较好用的。

事件修饰符：stop：阻止事件冒泡。事件冒泡指的是点击子元素，父元素的点击事件也被触发了

　　　　　　prevent：阻止默认事件触发。比如a标签默认点击会跳转，这时可以阻止这个触发

　　　　　　capture：使用捕获模式。html默认事件从里到外进行传播，捕获模式则会从外到进行触发

　　　　　　self：只有当前元素能够触发，既不能通过传播的方式

　　　　　　once：只能触发一次

这几个修饰符可以串联修饰，例如java中的修饰符

　　例如给a标签：

<div>
        <a href="1.jpg" @click.prevent.stop.capture.self></a>
    </div>

View Code

在Vue2.0也多添加几个按键和鼠标修饰符，这样不用记一些键码。

注意一下，虽然Vue可以让组件自定义事件，但是不要使用驼峰命名法，html会将大写的字母变为小写，

可能导致出不来结果。Vue2.0好像已经不支持绑定的body上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    
</head>
<body>
    <div id=box>
        <p>原始的方式</p>
        <input type="button" value="点击一下" @click="say1" />
        <hr>

        <p>Vue事件绑定之一 v-on:click/dblclick/...</p>
        <input type="button" value="Vue事件绑定之一" v-on:click="say1">
        <hr>

        <p>Vue事件绑定之二 @click/dblclick/...</p>
        <input type="button" value="Vue事件绑定之二" @click="say1">
        <hr>

        <p>Vue解决事件冒泡 </p>
        <div @click="say1">
        <input type="button" value="未解决事件冒泡" @click="say1">
        </div>
        <div @click="say2">
        <p>原始方式解决事件冒泡 </p>
        <input type="button" value="原始方式解决事件冒泡" @click="say2($event)">
        </div>
        <div @click="say3">
        <p>Vue方式解决事件冒泡 </p>
        <input type="button" value="Vue方式解决事件冒泡" @click.stop="say3()">
        </div>

        <hr>
        <p>html默认触发的事件</p>
        <a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg">进入十九大</a>
        <p>html $event阻止默认触发的事件</p>
        <a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click="say4($event)">进入十九大</a>
        <p>html Vue阻止默认触发的事件</p>
        <a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click.prevent="say5()">进入十九大</a>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#box",
        data:{},
        methods:{
        say1:function(){
            console.log(this);
            alert("hello v-on");
        },
        say2:function(ev){
            alert("原始方式解决事件冒泡");
            ev.cancelBubble=true;

        },
        say3:function(){
            alert("Vue方式解决事件冒泡");
        },
        say4:function(ev){
            console.log(this);
            alert("阻止默认触发事件");
            ev.preventDefault();
        },
        say5:function(){
            console.log(this);
            alert("vue阻止默认触发事件");
        }    
        }
    });
    
    </script>
</html>

View Code