Vue学习之路第八篇：事件修饰符

学习准备：

①、顾名思义，“事件修饰符”那么肯定是用来修饰事件，既然和事件有关系，那么肯定和“v-on”指令（也可简写为：@）有关系了。

②、事件修饰符有以下几类：

　　.stop：阻止冒泡

　　.prevent：阻止默认事件

　　.capture：事件捕获

　　.self：只当事件在该元素本身触发时触发回调

　　.once：事件只触发一次

1、阻止冒泡

页面代码：

样式代码：

js代码：

运行效果：

当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。如果想阻止冒泡事件就需用到“.stop”修饰符。

这里要注意“.”号不要忘记写。这时再点击按钮不会触发点击父元素div的事件。

?

2、阻止默认事件

什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。我们以a链接为例：

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,methods : {
            linkClick(){
                console.log(</span>'点击了a链接'<span style="color: #000000"&gt;);
            }
        }
    });
</span></script>

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,methods : {
            clickLink(){
                console.log(</span>'点击了a链接'<span style="color: #000000"&gt;);
            }
        }
    });
</span></script>