指令

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>

vue 2.0 自定义组件的v-modelopen in new window

vue 3.0 自定义组件的v-modelopen in new window

v-slot

v-pre

v-cloak

v-once

最后更新时间:
贡献者: DESKTOP-ER5718D\zt