示例：
<div> <!-- 使用 .stop 阻止冒泡 --> <div @click="div1Handler"> <input type="button" value="戳他" @click.stop="btnHandler"> </div> <!-- 使用 .prevent 阻止默认行为（跳转到百度首页） --> <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> <!-- 使用 .capture 实现捕获触发事件的机制：跟冒泡相反，从外到里--> <div @click.capture="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 --> <div @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> <!-- 使用 .once 只触发一次事件处理函数（如下案例只触发一次点击事件，之后还原标签本身的行为） --> <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> </div>.stop 和 .self 的区别：
<!-- stop 会阻止冒泡行为 --> <div @click="div2Handler"> <div @click="div1Handler"> <input type="button" value="戳他" @click.stop="btnHandler"> </div> </div> <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为 --> <div @click="div2Handler"> <div @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> </div> 五、Vue中的样式 1、class 样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://www.likecs.com/lib/vue-2.4.0.js"></script> <style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style> </head> <body> <div> <!-- <h1>这是一个很大很大的H1，大到你无法想象！！！</h1> --> <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 --> <h1 :class="['thin', 'italic']">这是一个很大很大的H1</h1> <!-- 在数组中使用三元表达式 --> <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1</h1> <!-- 在数组中使用对象来代替三元表达式，提高代码的可读性 --> <h1 :class="['thin', 'italic', {active:flag} ]">这是一个很大很大的H1</h1> <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符 --> <h1 :class="classObj">这是一个很大很大的H1</h1> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false } }, methods: {} }); </script> </body> </html>注意：
1、class 样式需要使用 v-bind 绑定。
2、class 类样式可以是数组和对象集合。
2、style 样式可以是对象，也可以是对象数组。
<body> <div> <!-- 对象就是无序键值对的集合 --> <h1 :style="styleObj1">这是一个h1</h1> <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1> </div> <script> var vm = new Vue({ el: '#app', data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, methods: {} }); </script> </body>注意：要绑定到 style 样式。