指令
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
预期:Array | Object | number | string | Iterable (2.6 新增)
从 2.6 起,v-for 也可以在实现了可迭代协议的值上使用,包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值,所以无法自动探测变更。
当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。不推荐一起使用
<template>
<div v-for="(item, index) in array" :key="item.id"></div>
<div v-for="(val, key) in object"></div>
</template>
v-on
预期:Function | Inline Statement | Object
参数:event
|| $event
修饰符:
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .ctrl - (2.1.0) 按下相应按键时才触发
- .alt - (2.1.0) 按下相应按键时才触发
- .shift - (2.1.0) 按下相应按键时才触发
- .meta - (2.1.0) meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
- .exact - (2.5.0) 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
v-bind
v-model
在表单控件或者组件上创建双向绑定。
预期:随表单控件类型不同而不同。
限制: <input> <select> <textarea> components
修饰符:
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
v-model
自定义组件的// 子 组件
<template>
<input
type="text"
:value="customModel"
@input="$emit('customEvent', $event.target.value)"
/>
<!--
1. 上面的 input 使用了 :value 而不是 v-model
2. customEvent 和 model.event 对应起来
3. customModel 和 model.customModel 和 props.customModel 对应起来
-->
</template>
<script>
export default {
name: 'CustomModel',
model: {
prop: 'customModel',
event: 'customEvent'
},
props: {
customModel: {
type: String,
default() {
return ""
}
}
}
};
</script>
<template>
<input
type="text"
:value="customModel"
@input="$emit('update:customModel', $event.target.value)"
/>
</template>
<script>
export default {
name: 'CustomModel',
emits: ['update:customModel'],
props: {
customModel: {
type: String,
default() {
return ""
}
}
}
};
</script>