Vue 事件和属性

1.1 事件简写

v-on:click=""    
简写方式 @click=""

1.2 事件对象$event

传参为当前事件的对象
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx

1.3 事件冒泡

阻止事件冒泡：
    a)原生js方式，依赖于事件对象
    b)vue方式，不依赖于事件对象
        @click.stop

1.4 事件默认行为

阻止默认行为：
    a)原生js方式，依赖于事件对象

1.5 键盘事件

回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

1.6 事件修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

2. 属性

2.1 属性绑定和属性的简写

v-bind 用于属性绑定， v-bind:属性=""

属性的简写：
    v-bind:src="" 简写为 :src=""

2.2 class和style属性

绑定class和style属性时语法比较复杂：

六、 模板

1. 简介

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法

2. 数据绑定的方式

a.双向绑定
    v-model
b.单向绑定    
    方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
    方式2：使用v-text、v-html
    v-text 解析vue实例中的数据为纯文本
    v-html 解析可带html标签
    注意需要必须使用双引号 引起实例数据 v-text="msg"

3. 其他指令

v-once 数据只绑定一次
v-pre 不编译，直接原样显示