事件修饰符：
.stop ：阻止事件冒泡
<div @click="divHandle"></div>
<input type="button" value="按钮" @click.stop="btnHandle">
//点击按钮时，不会先触发按钮的点击事件然后就触发div 的点击事件，而是只会触发按钮的点击事件。
.prevent： 阻止默认行为，例如 a 链接的默认跳转行为
<a href="http://baidu.com" @click.prevent="linkHandle">prevent属性修饰符，阻止默认行为</a>
.capture :添加事件侦探器时使用捕获模式
<div @click.capture="divHandle"></div>
<input type="button" value="按钮" @click="btnHandle">
//点击按钮时，会先触发 div 的点击事件，而后才触发按钮的点击事件。
.self: 只有点击当前元素才会触发事件处理函数。
<div @click.self="divHandle"></div>
<input type="button" value="按钮" @click="btnHandle">
//只有点击 div 时，才会触发div的事件处理函数，无视捕获或冒泡模式。
.once : 只触发一次事件处理函数
<a href="http://baidu.com" @click.prevent.once="linkHandle">prevent属性修饰符，阻止默认行为</a>
// 第二次点击时，事件处理函数会失效， 并且 .prevent 修饰符也会失效
.stop 和 .self 修饰符都有阻止冒泡事件的作用，但它们的区别是 .stop 会阻止全部冒泡事件，而.self只会阻止当前元素的冒泡事件相当于跳过，而不是停止。
v-model 指令：
v-model： 实现双向数据绑定（唯一的双向数据绑定指令）
注意： v-model指令只能运用在表单元素中
Vue 中通过 class 属性的绑定为元素添加类样式
1、直接添加一个数组
//例:
:class="['active','red']"
//注意，这里的 class 需要用 v-bind 做数据绑定
2、在数据中使用三元表达式
//例：
:class="[ 'black' , 'red' , 'blue' ? 'active' : '' ]"
3、在数组中使用对象来代替三元表达式，提高代码可读性
//例：
:class="{ red:false },{ black:false }, { blue : true}"
//在 class 中用 v-bind 绑定对象的时候，对象的属性就是类名
//也可直接保存的 data 中：
:class="classObj"
data{
classObj: { red:false , black:false , blue : true }
}
