Vue2 备忘清单 === 渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表,包含常用 API 和示例。 入门 --- ### 介绍 Vue 是一套用于构建用户界面的渐进式框架 - [Vue 2.x 官方文档](https://v2.cn.vuejs.org/) - [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/) ### 声明式渲染 ```html <div id="app"> {{ message }} </div> ``` ```js var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` ### 基础例子 <!--rehype:wrap-class=row-span-2--> ```html <div id="example"> <p>原始信息: "{{ message }}"</p> <p> 计算的反向信息: "{{ reversedMessage }}" </p> </div> ``` ```js var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('') .reverse().join('') } } }) ``` 结果 ``` 原始信息: "Hello" 计算的反向信息: "olleH" ``` ### 绑定元素属性 ```html <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> ``` ```js var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() .toLocaleString() } }) ``` ### 条件 ```html <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> ``` ```js var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ``` 控制切换一个元素是否显示 ### 循环 ```html <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> ``` ```js var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) ``` ### 点击事件处理 ```html <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage"> 反转消息 </button> </div> ``` ```js var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('') .reverse().join('') } } }) ``` ### 输入事件处理 ```html <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> ``` `v-model` 指令,它能轻松实现表单输入和应用状态之间的双向绑定 ```js var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) ``` 模板语法 --- ### 文本 ```html <span>Message: {{ msg }}</span> <span v-once> 这个将不会改变: {{ msg }} </span> ``` 使用 `v-once` 指令,执行一次性地插值,当数据改变时,插值处的内容不会更新 ### 原始 HTML ```html <p>解释为普通文本: {{ rawHtml }}</p> <p> 使用 v-html 指令: <span v-html="rawHtml"></span> </p> ``` 使用 `v-html` 指令,输出真正的 `HTML` ### 属性 ```html <div v-bind:id="dynamicId"></div> <button v-bind:disabled="isDisabled"> Button </button> ``` 如果 `isDisabled` 的值是 null/undefined/false 则 `disabled` 不会被渲染出来 ### JavaScript 表达式 ```html <div id="app"> <span>消息: {{ msg }}</span> <span>{{ msg + '这是字符串' }}</span> <span>{{ isWorking ? '是':'否' }}</span> <span>{{ msg.getDetials() }}</span> <div v-bind:id="'list-' + id"></div> <div> ``` ### 指令 ```html <p v-if="seen"> 现在你看到我了 </p> ``` `v-if` 指令将根据表达式 `seen` 的值的真假来插入/移除 \<p> 元素 ### 指令参数 ```html <a v-bind:href="url">...</a> ``` `v-bind` 指令将该元素 `href` 属性与表达式 `url` 的值绑定 ```html <a v-on:click="doSomething">...</a> ``` `v-on` 指令,用于监听 DOM 事件,oSomething 是事件名 ### 指令动态参数 **v2.6** ```html <a v-on:[eventName]="doSomething">...</a> ``` 当 `eventName` 的值为 `focus` 时,`v-on:[eventName]` 将等价于 `v-on:focus` ### 指令修饰符 ```html <form v-on:submit.prevent="onSubmit"> ... </form> ``` `.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()` ### 指令缩写 ```html <!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a> ``` Class 与 Style 绑定 --- ### 对象语法 ```html <div v-bind:class="{ active: isActive }"> </div> ``` 传给 `v-bind:class` 一个对象,以动态地切换 `class` ### 与普通的 class 属性共存 <!--rehype:wrap-class=row-span-3--> ```html {2} <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> ``` 如下 data ```js data: { isActive: true, hasError: false } ``` 结果渲染为 ```html <div class="static active"></div> ``` ### 绑定的数据对象不必内联定义在模板里 <!--rehype:wrap-class=row-span-3--> ```html <div v-bind:class="classObject"></div> ``` 如下 data ```js data: { classObject: { active: true, 'text-danger': false } } ``` 结果渲染为 ```html <div class="static active"></div> ``` ### 三元表达式 ```html <div v-bind:class="[ isActive ? activeClass : '' ]"> </div> ``` ### 数组 ```html <div v-bind:class="[ { active: isActive }, errorClass ]"></div> ``` ### 数组语法 ```html <div v-bind:class="[ activeClass, errorClass ]"> </div> ``` 如下 data ```js data: { activeClass: 'active', errorClass: 'text-danger' } ``` 结果渲染为 ```html <div class="active text-danger"></div> ``` ### 内联样式 ```html <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ``` 如下 data ```js data: { activeColor: 'red', fontSize: 30 } ``` 结果渲染为 ```html <div style="color: red; font-size: 30px;"></div> ``` ### 内联样式对象通常更好 ```html <div v-bind:style="styleObject"></div> ``` 如下 data ```js data: { styleObject: { color: 'red', fontSize: '13px' } } ``` 同样的,对象语法常常结合返回对象的计算属性使用 ### 内联样式数组语法 ```html <div v-bind:style="[ baseStyles, overridingStyles ]"></div> ``` ### 内联样式多重值 ```html <div :style="{ display: ['-webkit-box', 'flex'] }"></div> ``` 条件渲染 --- ### v-if ```html <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> ``` ### v-else-if <!--rehype:wrap-class=row-span-2--> ```html <div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else> Not A/B/C </div> ``` `@2.1.0` 新增,必须紧跟在带 `v-if` 或者 `v-else-if` 的元素之后 ### v-else <!--rehype:wrap-class=row-span-2--> ```html <div v-if="Math.random() > 0.5"> 现在你看到我了 </div> <div v-else> 现在你看不见我了 </div> ``` `v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面 ### \<template> 上使用 v-if 条件渲染分组 ```html <template v-if="ok"> <p>Paragraph 1</p> </template> ``` ### 用 key 管理可复用的元素 <!--rehype:wrap-class=col-span-2--> ```html <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="输入用户名" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="输入邮箱" key="email-input"> </template> ``` ### v-show ```html <h1 v-show="ok"> Hello! </h1> ``` 带有 `v-show` 的元素始终会被渲染并保留在 DOM 中,只是简单地切换元素的 `CSS` 属性 `display` 列表渲染 --- ### v-for ```html {3} <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> ``` ```js var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ``` ### v-for 可选的第二个参数(索引) ```html {2} <li v-for="(item, index) in items"> {{ index }} {{ item.message }} </li> ``` 如下 `data` ```js data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } ``` 也可以用 `of` 替代 `in` 作为分隔符 ```html <div v-for="item of items"></div> ``` ### v-for 使用对象 <!--rehype:wrap-class=row-span-2--> ```html <li v-for="value in object"> {{ value }} </li> ``` 如下 data ```js data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } ``` 渲染结果 ``` How to do lists in Vue Jane Doe 2016-04-10 ``` 提供第二个的参数为 property 名称 (也就是键名) ```html <div v-for="(value, name) in object"> {{ name }}: {{ value }} </div> ``` 还可以用第三个参数作为索引 ```html <div v-for="(value,name,index) in object"> {{ index }}. {{ name }}: {{ value }} </div> ``` ### v-for/v-if ```html {2,3} <li v-for="todo in todos" v-if="!todo.isComplete" > {{ todo }} </li> ``` 只渲染未完成的 todo,下面加上 `v-else` 示例 ```html <ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p> ``` ### 组件上使用 v-for ```html <my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> ``` `2.2.0+` 的版本里,当在组件上使用 `v-for` 时,`key` 现在是必须的 Vue 2 API 参考 --- ### 全局配置 <!--rehype:wrap-class=row-span-2--> :- | :- :- | :- `silent` | 取消所有的日志与警告 [#](https://v2.cn.vuejs.org/v2/api/#silent) `optionMergeStrategies` | 自定义合并策略的选项 [#](https://v2.cn.vuejs.org/v2/api/#optionMergeStrategies) `devtools` | 是否允许 [devtools](https://github.com/vuejs/vue-devtools) 检查 [#](https://v2.cn.vuejs.org/v2/api/#devtools) `errorHandler` | 未捕获错误的处理函数 _(开发模式生效)_ [#](https://v2.cn.vuejs.org/v2/api/#errorHandler) `warnHandler` _(2.4.0)_ | 运行时警告处理函数 [#](https://v2.cn.vuejs.org/v2/api/#warnHandler) `ignoredElements` | 忽略 Vue 之外的 _(自定义元素)_ [#](https://v2.cn.vuejs.org/v2/api/#ignoredElements) `keyCodes` | `v-on` 自定义键位别名 [#](https://v2.cn.vuejs.org/v2/api/#keyCodes) `performance` _(2.2.0)_ | 性能追踪 [#](https://v2.cn.vuejs.org/v2/api/#performance) `productionTip` _(2.2.0)_ | 是否生成生产提示 [#](https://v2.cn.vuejs.org/v2/api/#productionTip) ### 全局 API <!--rehype:wrap-class=row-span-2--> :- | :- :- | :- `Vue.extend` | Vue 构造器,创建一个“子类” [#](https://v2.cn.vuejs.org/v2/api/#Vue-extend) `Vue.nextTick` | 执行延迟回调 [#](https://v2.cn.vuejs.org/v2/api/#Vue-nextTick) `Vue.set` | 向响应式对象中添加一个属性 [#](https://v2.cn.vuejs.org/v2/api/#Vue-set) `Vue.delete` | 删除对象的 property [#](https://v2.cn.vuejs.org/v2/api/#Vue-delete) `Vue.directive` | 注册或获取全局指令 [#](https://v2.cn.vuejs.org/v2/api/#Vue-directive) `Vue.filter` | 注册或获取全局过滤器 [#](https://v2.cn.vuejs.org/v2/api/#Vue-filter) `Vue.component` | 注册或获取全局组件 [#](https://v2.cn.vuejs.org/v2/api/#Vue-component) `Vue.use` | 安装 Vue.js 插件 [#](https://v2.cn.vuejs.org/v2/api/#Vue-use) `Vue.mixin` | 全局注册一个混入 [#](https://v2.cn.vuejs.org/v2/api/#Vue-mixin) `Vue.compile` | 将模板字符串编译成 render 函数 [#](https://v2.cn.vuejs.org/v2/api/#Vue-compile) `Vue.observable` _(2.6.0)_ | 让一个对象可响应 [#](https://v2.cn.vuejs.org/v2/api/#Vue-observable) `Vue.version` | Vue 安装版本号 [#](https://v2.cn.vuejs.org/v2/api/#Vue-version) ### 数据 :- | :- :- | :- `data` | 实例的数据对象 [#](https://v2.cn.vuejs.org/v2/api/#data) `props` | 接收来自父组件的数据 [#](https://v2.cn.vuejs.org/v2/api/#props) `propsData` | 创建实例时传递 props [#](https://v2.cn.vuejs.org/v2/api/#propsData) `computed` | 计算属性将被混入到 Vue 实例中 [#](https://v2.cn.vuejs.org/v2/api/#computed) `methods` | 将被混入到 Vue 实例中 [#](https://v2.cn.vuejs.org/v2/api/#methods) `watch` | 对象键是观察的表达式,值是回调函数 [#](https://v2.cn.vuejs.org/v2/api/#watch) ### DOM :- | :- :- | :- `el` | 实例的挂载目标 [#](https://v2.cn.vuejs.org/v2/api/#el) `template` | 字符串模板作为 Vue 实例的标识使用 [#](https://v2.cn.vuejs.org/v2/api/#template) `render` | 字符串模板的代替方案 [#](https://v2.cn.vuejs.org/v2/api/#render) `renderError` _(2.2.0)_ | `render`错误时提供另一种渲染 [#](https://v2.cn.vuejs.org/v2/api/#renderError) ### 生命周期钩子 <!--rehype:wrap-class=row-span-2--> :- | :- :- | :- `beforeCreate` | 实例初始化之后 [#](https://v2.cn.vuejs.org/v2/api/#beforeCreate) `created` | 实例创建完成后被立即同步调用 [#](https://v2.cn.vuejs.org/v2/api/#created) `beforeMount` | 在挂载开始之前被调用 [#](https://v2.cn.vuejs.org/v2/api/#beforeMount) `mounted` | 实例被挂载后调用 [#](https://v2.cn.vuejs.org/v2/api/#mounted) `beforeUpdate` | 数据改变后 DOM 更新之前调用 [#](https://v2.cn.vuejs.org/v2/api/#beforeUpdate) `updated` | 数据更改更新完毕之后被调用 [#](https://v2.cn.vuejs.org/v2/api/#updated) `activated` | keep-alive 缓存组件激活时调用 [#](https://v2.cn.vuejs.org/v2/api/#activated) `deactivated` | keep-alive 缓存的组件失活时调用 [#](https://v2.cn.vuejs.org/v2/api/#deactivated) `beforeDestroy` | 实例销毁之前调用 [#](https://v2.cn.vuejs.org/v2/api/#beforeDestroy) `destroyed` | 实例销毁后调用 [#](https://v2.cn.vuejs.org/v2/api/#destroyed) `errorCaptured` _(2.5.0)_ | 来自后代组件的错误时被调用 [#](https://v2.cn.vuejs.org/v2/api/#errorCaptured) ### 资源 :- | :- :- | :- `directives` | 包含 Vue 实例可用指令的哈希表 [#](https://v2.cn.vuejs.org/v2/api/#directives) `filters` | 包含 Vue 实例可用过滤器的哈希表 [#](https://v2.cn.vuejs.org/v2/api/#filters) `components` | 包含 Vue 实例可用组件的哈希表 [#](https://v2.cn.vuejs.org/v2/api/#components) ### 组合 :- | :- :- | :- `parent` | 指定已创建的实例之父实例 [#](https://v2.cn.vuejs.org/v2/api/#parent) `mixins` | 接收一个混入对象的数组 [#](https://v2.cn.vuejs.org/v2/api/#mixins) `extends` | 声明扩展另一个组件 [#](https://v2.cn.vuejs.org/v2/api/#extends) `provide/inject` _(2.2.0)_ | 祖组件向所有子孙后代注入依赖 [#](https://v2.cn.vuejs.org/v2/api/#provide-inject) ### 其它 :- | :- :- | :- `name` | 允许组件模板递归地调用自身 [#](https://v2.cn.vuejs.org/v2/api/#name) `delimiters` | 改变纯文本插入分隔符 [#](https://v2.cn.vuejs.org/v2/api/#delimiters) `functional` | 使组件无状态和无实例 [#](https://v2.cn.vuejs.org/v2/api/#functional) `model` _(2.2.0)_ | 使用 v-model 时定制 prop 和 event [#](https://v2.cn.vuejs.org/v2/api/#model) `inheritAttrs` _(2.4.0)_ | [#](https://v2.cn.vuejs.org/v2/api/#inheritAttrs) `comments` _(2.4.0)_ | 是否保留模板中的`HTML`注释 [#](https://v2.cn.vuejs.org/v2/api/#comments) ### 实例方法 / 数据 :- | :- :- | :- `vm.$watch` | 观察 Vue 实例上的一个表达式<br/>或者一个函数计算结果的变化 [#](https://v2.cn.vuejs.org/v2/api/#vm-watch) `vm.$set` | 全局 `Vue.set` 的别名 [#](https://v2.cn.vuejs.org/v2/api/#vm-set) `vm.$delete` | 全局 `Vue.delete` 的别名 [#](https://v2.cn.vuejs.org/v2/api/#vm-delete) ### 实例 property <!--rehype:wrap-class=row-span-3--> :- | :- :- | :- `vm.$data` | [#](https://v2.cn.vuejs.org/v2/api/#vm-data) `vm.$props` _(2.2.0)_ | [#](https://v2.cn.vuejs.org/v2/api/#vm-props) `vm.$el` | [#](https://v2.cn.vuejs.org/v2/api/#vm-el) `vm.$options` | [#](https://v2.cn.vuejs.org/v2/api/#vm-options) `vm.$parent` | [#](https://v2.cn.vuejs.org/v2/api/#vm-parent) `vm.$root` | [#](https://v2.cn.vuejs.org/v2/api/#vm-root) `vm.$children` | [#](https://v2.cn.vuejs.org/v2/api/#vm-children) `vm.$slots` | [#](https://v2.cn.vuejs.org/v2/api/#vm-slots) `vm.$scopedSlots` _(2.1.0)_ | [#](https://v2.cn.vuejs.org/v2/api/#vm-scopedSlots) `vm.$refs` | [#](https://v2.cn.vuejs.org/v2/api/#vm-refs) `vm.$isServer` | [#](https://v2.cn.vuejs.org/v2/api/#vm-isServer) `vm.$attrs` _(2.4.0)_ | [#](https://v2.cn.vuejs.org/v2/api/#vm-attrs) `vm.$listeners` _(2.4.0)_ | [#](https://v2.cn.vuejs.org/v2/api/#vm-listeners) ### 实例方法 / 事件 :- | :- :- | :- `vm.$on` | 监听当前实例上的自定义事件 [#](https://v2.cn.vuejs.org/v2/api/#vm-on) `vm.$once` | 监听一个自定义事件,只触发一次 [#](https://v2.cn.vuejs.org/v2/api/#vm-once) `vm.$off` | 移除自定义事件监听器 [#](https://v2.cn.vuejs.org/v2/api/#vm-off) `vm.$emit` | 触发当前实例上的事 [#](https://v2.cn.vuejs.org/v2/api/#vm-emit) ### 实例方法 / 生命周期 :- | :- :- | :- `vm.$mount` | 手动地挂载一个未挂载的实例 [#](https://v2.cn.vuejs.org/v2/api/#vm-mount) `vm.$forceUpdate` | 迫使 Vue 实例重新渲染 [#](https://v2.cn.vuejs.org/v2/api/#vm-forceUpdate) `vm.$nextTick` | 回调延迟执行 [#](https://v2.cn.vuejs.org/v2/api/#vm-nextTick) `vm.$destroy` | 完全销毁一个实例 [#](https://v2.cn.vuejs.org/v2/api/#vm-destroy) ### 指令 <!--rehype:wrap-class=row-span-2--> :- | :- :- | :- `v-text` | [#](https://v2.cn.vuejs.org/v2/api/#v-text) `v-html` | [#](https://v2.cn.vuejs.org/v2/api/#v-html) `v-show` | [#](https://v2.cn.vuejs.org/v2/api/#v-show) `v-if` | [#](https://v2.cn.vuejs.org/v2/api/#v-if) `v-else` | [#](https://v2.cn.vuejs.org/v2/api/#v-else) `v-else-if` _(2.1.0)_ | [#](https://v2.cn.vuejs.org/v2/api/#v-else-if) `v-for` | [#](https://v2.cn.vuejs.org/v2/api/#v-for) `v-on` | [#](https://v2.cn.vuejs.org/v2/api/#v-on) `v-bind` | [#](https://v2.cn.vuejs.org/v2/api/#v-bind) `v-model` | [#](https://v2.cn.vuejs.org/v2/api/#v-model) `v-slot` | [#](https://v2.cn.vuejs.org/v2/api/#v-slot) `v-pre` | [#](https://v2.cn.vuejs.org/v2/api/#v-pre) `v-cloak` | [#](https://v2.cn.vuejs.org/v2/api/#v-cloak) `v-once` | [#](https://v2.cn.vuejs.org/v2/api/#v-once) ### 特殊 attribute :- | :- :- | :- `key` | [#](https://v2.cn.vuejs.org/v2/api/#key) `ref` | [#](https://v2.cn.vuejs.org/v2/api/#ref) `is` | [#](https://v2.cn.vuejs.org/v2/api/#is) ~~`slot`~~ | 推荐 2.6.0 新增的 `v-slot` [#](https://v2.cn.vuejs.org/v2/api/#slot-废弃) ~~`slot-scope`~~ | 推荐 2.6.0 新增的 `v-slot` [#](https://v2.cn.vuejs.org/v2/api/#slot-scope-废弃) ~~`scope`~~ | `2.5.0` 新增的 `slot-scope` 取代 [#](https://v2.cn.vuejs.org/v2/api/#scope-移除) ### 内置的组件 :- | :- :- | :- `component` | [#](https://v2.cn.vuejs.org/v2/api/#component) `transition` | [#](https://v2.cn.vuejs.org/v2/api/#transition) `transition-group` | [#](https://v2.cn.vuejs.org/v2/api/#transition-group) `keep-alive` | [#](https://v2.cn.vuejs.org/v2/api/#keep-alive) `slot` | [#](https://v2.cn.vuejs.org/v2/api/#slot) ### v-on (事件)修饰符 <!--rehype:wrap-class=row-span-2--> :- | :- :- | :- `v-on:click.stop` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 调用 event.stopPropagation()。 `v-on:click.prevent` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 调用 event.preventDefault()。 `v-on:click.capture` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 添加事件侦听器时使用 capture 模式。 `v-on:click.self` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 只当事件是从侦听器绑定的元素本身触发时才触发回调。 `v-on:click.{keyCode\|keyAlias}` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 只当事件是从特定键触发时才触发回调。 `v-on:click.native` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 监听组件根元素的原生事件。 `v-on:click.once` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 只触发一次回调。 `v-on:click.passive` _(2.3.0)_ [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 以 { passive: true } 模式添加侦听器 <!--rehype:className=style-list--> ### v-on (鼠标)修饰符 :- | :- :- | :- `v-on:click.left` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 只当点击鼠标左键时触发 `v-on:click.right` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 只当点击鼠标右键时触发 `v-on:click.middle` [#](https://v2.cn.vuejs.org/v2/api/#v-on) | 只当点击鼠标中键时触发 在 _(2.2.0)_ 中新增 ### 系统修饰键 :- | :- :- | :- `v-on:keyup.ctrl` _(2.1.0)_ | [#](https://v2.cn.vuejs.org/v2/guide/events.html#系统修饰键) `v-on:keyup.alt` _(2.1.0)_ | [#](https://v2.cn.vuejs.org/v2/guide/events.html#系统修饰键) `v-on:keyup.shift` _(2.1.0)_ | [#](https://v2.cn.vuejs.org/v2/guide/events.html#系统修饰键) `v-on:keyup.meta` _(2.1.0)_ | [#](https://v2.cn.vuejs.org/v2/guide/events.html#系统修饰键) ### Keyboard 按键修饰符 :- | :- :- | :- `v-on:keyup.enter` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.tab` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.delete ` | 捕获“删除”和“退格”键 [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.esc` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.space` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.up` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.down` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.left` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) `v-on:keyup.right` | [#](https://v2.cn.vuejs.org/v2/guide/events.html#按键修饰符) ### v-bind 修饰符 :- | :- :- | :- `v-bind.prop` [#](https://v2.cn.vuejs.org/v2/api/#v-bind) | 作为一个 DOM property 绑定而不是作为 attribute 绑定。([差别在哪里?](https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028)) `v-bind.camel` _(2.1.0+)_ [#](https://v2.cn.vuejs.org/v2/api/#v-bind) | 将 kebab-case attribute 名转换为 camelCase。 `v-bind.sync` _(2.3.0+)_ [#](https://v2.cn.vuejs.org/v2/api/#v-bind) | 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。 <!--rehype:className=style-list--> 另见 --- - [Vue Essentials Cheat-Sheet.pdf](https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf) _(vuemastery.com)_ - [Vue 2 官方文档](https://v2.cn.vuejs.org/) _(vuejs.org)_ - [Vue 2 实例方法事件](https://marozed.com/vue-cheatsheet#Instance-Methods-Events) _(marozed.com)_