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 不编译,直接原样显示