- 属性绑定
- v-bind:title="msg"
- :title="msg"
简写形式
- :class:id:disabled
- 事件
- v-on:click="num++"
事件指令
- @click="num++"
简写形式
- 事件参数
- @click=“sayNum”
默认传入事件对象
- @click="sayNum(3)"
传入实参3
- @click=“sayNum($event,3)”
传入事件对象和参数3
- @click=“sayNum”
- 事件修饰符
修饰符可以多个- .stop 阻止事件冒泡
- .once 只响应一次事件
- .prevent 阻止默认行为
- 按键修饰符
keydown,keyup- .enter 回车
- .up
- .down
- .space
- .esc
- .del 删除
- 系统修饰符
- .ctrl
- .alt
- .shift
- .meta
- v-on:click="num++"
- 表单
- v-model="num"
把num的数据和表单的值绑定在一起
- 单行,多行
- 多选
- 一个默认值,选中true,未选中为false
- 多个值,绑定的数组动态添加/移除当前元素的value值
- 单选
- 下拉select
- 表单修饰符
- .lazy
change事件触发数据更新
- .number
强制转换为数字
- .lazy
- v-model="num"
简写- :value=“num”
- @input=“num=$event.target.value"
- v-model="num"
- vue操作
- 让指令联接数据与dom
- 业务操作数据,实现自动更新dom
- computed计算
- 从现有数据计算出新的数据(只读)
- 事件响应函数
- vue data采用函数返回的形式
- vue实例直接数据隔离互相不影响