200314 Vue 事件修饰符，v-model

事件修饰符：

.stop ：阻止事件冒泡

//点击按钮时，不会先触发按钮的点击事件然后就触发div 的点击事件，而是只会触发按钮的点击事件。

.prevent： 阻止默认行为，例如 a 链接的默认跳转行为

prevent属性修饰符，阻止默认行为

.capture :添加事件侦探器时使用捕获模式

//点击按钮时，会先触发 div 的点击事件，而后才触发按钮的点击事件。

.self: 只有点击当前元素才会触发事件处理函数。

//只有点击 div 时，才会触发div的事件处理函数，无视捕获或冒泡模式。

.once : 只触发一次事件处理函数

prevent属性修饰符，阻止默认行为
// 第二次点击时，事件处理函数会失效， 并且 .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 }
}