你好世界
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • Vue

    • Vue
    • 选项-数据
    • 选项-生命周期钩子
    • 实例方法-事件
    • 实例方法-生命周期
    • 指令
    • 模板编译
    • 渲染和更新
    • VueRouter
  • React

    • React
    • 环境构建
    • HOC开发模式
    • Hook
    • Redux
    • Nextjs 文档

指令

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

vue 2.0 自定义组件的v-model

vue 3.0 自定义组件的v-model

v-slot

v-pre

v-cloak

v-once

最后更新时间: 3/7/22, 1:45 PM
贡献者: DESKTOP-ER5718D\zt
Prev
实例方法-生命周期
Next
模板编译