指令: |
{{}} | v-once | v-html | v-bind / : | v-for | v-model | v-on /@ | |
v-if | v-else | v-else-if 2+ | v-show | :style | :class | |||
属性 |
el 元素 |
data 数据 |
computed 计算属性 |
method 方法 |
watch 监听属性 |
|||
事件修饰符 |
.stop 阻止 默认行为 |
.prevent 提交事件 不再载入 页面 |
.capture 捕获模式 |
.once 一次 触发 |
.passive 滚动冒泡 行为 |
|||
按键修饰符 |
@keyup @keydown |
.enter 回车 |
.tab Tab键 |
.delete 删除/退格 |
.esc 退出 |
.space 空格 |
.up 上 |
|
.down 下 |
.left 左 |
.right 右 |
还可以使用 @keydown.f1 自定义编码 Vue.config.keyCodes.f1=112 |
|||||
系统辅助按键 |
.ctrl |
.alt | .shift | .meta window键 |
.exact 组合控制 |
<!-- ctrl + c --- > @keyup.ctrl.67 <!-- alt + 点击 --> @click.alt="handleFunction" |
||
鼠标修饰符 |
.left | .right | .middle | @click.left =fun |
||||
v-model修饰符 |
.lazy 视为change 同步数据 相应 |
.number 如果转换为NaN 则返回字符串输入值 |
.trim 去除前后 空格 |
|||||
- 每当 data 对象发生变化,都会触发视图重新渲染。值得注意的是,如果实例已经创建,那么只有那些
data
中的原本就已经存在的属性,才是响应式的v-once - 箭头函数会将this指向上下文
- 生命周期 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destoryed
- 由于 JavaScript 的限制,Vue 无法检测到以下数组变动 vm.items[indexOfItem] = newValue / vm.items.length = newLength
- Vue 不允许在已经创建的实例上,动态地添加新的根级响应式属性
- 可以这样添加新属性 Vue.set(vm.userProfile, 'age', 27)
- 变化数组方法:会对原数组操作的数组方法,如
pop()
,shift()
,unshift()
,splice()
,sort()
和reverse()
。 - 非变化数组方法:不会对原数组操作、返回新数组的数组方法,如
filter()
,concat()
和slice()
。 - 在 textarea 中插值(
<textarea>{{text}}</textarea>
)并不会生效。使用v-model
来替代 - 每个组件都维护彼此独立的 data。这是因为每次使用组件时,都会创建出一个新的组件实例。
- 组件的data必须是一个函数,以便每个组件为独立的数据
- props传递信息