Vue.js 速查表 | Tech Wiki Online

Vue.js 速查表

您在日常的 Vue.js 编程中将使用的常见命令和指令

指令

指令是由 v- 前缀标识的属性。

指令	描述
v-text	将属性作为元素的文本值
v-html	将属性作为元素的文本值，解析 HTML
v-if	仅在条件为真时显示一个元素
v-else	如果前面的 v-if 为假，则显示一个备用元素
v-else-if	添加一个 v-if 构造的否则-if 块
v-show	类似于 v-if，但即使为假也将该元素添加到 DOM 中。只是将其设置为 display: none。
v-for	对数组或可迭代对象进行迭代
v-on	监听 DOM 事件
v-bind	以响应式方式更新 HTML 属性
v-model	用于在表单输入中设置双向绑定。用于表单元素，当用户更改表单字段的值时更新模型
v-once	仅应用一次属性，即使传递的数据发生了变化也不刷新

v-bind 和 v-on 有一个简写格式：

<a v-bind:href="url">...</a>
<a :href="url">...</a>

<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

v-if/v-else/v-else-if 的示例：

<div v-if="type === 'A'">
    it's A
</div>
<div v-else-if="type === 'B'">
    it's B
</div>
<div v-else-if="type === 'C'">
    it's C
</div>
<div v-else>
    it's neither one
</div>

条件

您可以使用三元运算符将条件嵌入表达式中：

{{ isTrue ? 'yes' : 'no' }}

使用表单元素

为了使模型在更改事件发生时更新，而不是用户按键时立即更新，您可以使用 v-model.lazy 而不是 v-model。

对于使用输入字段，v-model.trim 是有用的，因为它会自动删除空格。

如果接受数字而不是字符串，请确保使用 v-model.number。

修改事件

这里以 click 作为例子，但适用于所有可能的事件

• v-on:click.native 传递一个原生 DOM 事件而不是 Vue 事件
• v-on:click.stop 阻止点击事件的传播
• v-on:click.passive 使用 addEventListener 的 passive 选项
• v-on:click.capture 使用事件捕获而不是事件冒泡
• v-on:click.self 确保点击事件没有从子事件冒泡，而是直接发生在该元素上
• v-on:click.once 事件仅触发一次
• v-on:submit.prevent：在触发的提交事件上调用 event.preventDefault()，用于避免表单提交重新加载页面

有关传播、冒泡/捕获的更多信息，请参阅我的 JavaScript 事件指南.

鼠标事件修饰符

• v-on:click .left 仅在左键单击时触发
• v-on:click .right 仅在右键单击时触发
• v-on:click .middle 仅在中键单击时触发

仅在按下特定键时触发事件

• v-on:keyup.enter
• v-on:keyup.tab
• v-on:keyup.delete
• v-on:keyup.esc
• v-on:keyup.up
• v-on:keyup.down
• v-on:keyup.left
• v-on:keyup.right

键盘事件修改器

仅在同时按下特定键盘键时触发事件：

• .ctrl
• .alt
• .shift
• .meta（Mac 上的 cmd，Win 上的 Windows 键）

Vue 自定义选项

v-bind

• v-bind .prop 绑定属性而不是属性
• v-bind .camel 以驼峰式为属性名
• v-bind .sync 是一个语法糖，它展开为 v-on 处理程序，用于更新绑定的值。了解更多请参阅这里。

生命周期钩子

• beforeCreate 在应用创建之前调用
• created 在应用创建之后调用
• beforeMount 在应用挂载到 DOM 之前调用
• mounted 在应用挂载到 DOM 之后调用
• beforeDestroy 在应用销毁之前调用
• destroyed 在应用销毁之后调用
• beforeUpdate 在属性更新之前调用
• updated 在属性更新之后调用
• activated 在已被保留的组件激活时调用
• deactivated 在已被保留的组件停用时调用

内建组件

Vue 提供了 5 个内建组件：

• <component>
• <transition>
• <transition-group>
• <keep-alive>
• <slot>

Vue 对象全局配置

Vue.config 对象具有以下属性，可以在创建实例时进行修改：

属性	描述
silent	默认为 false，如果为 true，则禁止日志和警告
optionMergeStrategies	允许为选项定义自定义合并策略
devtools	在开发中默认为 true，在生产环境中默认为 false。您可以覆盖这些值。
errorHandler	允许设置错误处理程序函数。有助于连接 Sentry 和其他类似的服务
warnHandler	允许设置警告处理程序函数，与 errorHandler 类似，但用于警告而不是错误
ignoredElements	用于让 Vue 忽略在外部定义的自定义元素，比如 Web 组件
keyCodes	让您为 v-on 定义自定义键别名
performance	默认为 false。如果设置为 true，则在浏览器开发工具中跟踪 Vue 组件的性能
productionTip	默认为 true。在控制台中开发期间关闭“您当前正在开发模式中”的警告，请将其设置为 false 来禁用

Vue 对象的方法

方法	描述
Vue.extend	允许对 Vue 对象进行子类化，以创建自定义配置文件
Vue.nextTick	将回调推迟到下一个 DOM 更新周期后执行
Vue.set	添加一个属性
Vue.delete	从对象中删除一个属性
Vue.directive	设置（或获取）全局指令
Vue.filter	设置（或获取）全局过滤器
Vue.component	设置（或获取）全局组件
Vue.use	安装一个 Vue.js 插件
Vue.mixin	设置全局 mixin
Vue.compile	将一个模板字符串编译为渲染函数
Vue.version	返回已安装 Vue 的当前版本

传递给 Vue 对象的选项

在初始化 Vue 对象时，您传入一个对象：

const vm = new Vue({

})

此对象接受许多属性。

属性	描述
data	允许传递用于 Vue 应用的一组响应式数据。所有的响应式属性必须在初始化时添加，您不能稍后添加新属性。
props	它是一组作为输入数据公开给父组件的属性。
propsData	用于传递 props 的默认数据值。仅在测试期间有用
methods	在 Vue 实例上定义的一组方法
computed	像方法一样，但在内部缓存
watch	允许监听属性的变化，并在其更改时调用函数

定义数据、方法和计算属性的示例：

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    methods: {
        reverseMessageAsMethod: function () {
            return this.message.split('').reverse().join('')
        }
    },
    computed: {
        // 计算 getter
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
})

console.log(vm.reverseMessageAsMethod) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

DOM

• el 设置 Vue 实例挂载的 DOM 元素。可以是 CSS 选择器或 HTMLElement
• template 是一个字符串表示的模板，将替换已添加的元素
• render 定义模板的另一种方式，使用渲染函数定义模板
• renderError 设置失败时的替代输出，并在与 render 相关的函数失败时调用

Vue 实例资源

• directives 关联到 Vue 实例的指令集合
• filters 关联到 Vue 实例的过滤器集合
• components 关联到 Vue 实例的组件集合

Vue 组合选项

• parent 指定父实例
• mixins 设置 mixin 对象数组
• extends 扩展另一个组件

其他 Vue 对象选项

• name 为组件设置一个名称，可以在调试时调用，也可以在模板中递归添加组件时使用
• functional 如果为 true，则将组件设置为无状态（无 data）且无实例（无 this），使其更加轻量
• model 允许自定义在事件中使用的属性，比如与表单交互时很有用
• comments 默认为 false。如果设置为 true，则保留在模板中放置的 HTML 注释

Vue 实例属性

给定一个 Vue 实例，存储在变量 const vm = new Vue(/*...*/) 中，您可以对其进行检查和交互。

Vue 实例属性

• vm.$data 关联到实例的数据对象
• vm.$props 实例接收到的 props
• vm.$el 实例绑定的 DOM 元素
• vm.$options 用于实例化 Vue 实例的对象
• vm.$parent 父实例
• vm.$root 根实例（如果是根实例，this 指向自身）
• vm.$children 子实例的数组
• vm.$slots 模板中包含的关联插槽的数组
• vm.$scopedSlots 关联作用域插槽的数组
• vm.$refs 包含每个在模板中由 ref 属性指向的元素的属性的对象
• vm.$isServer 如果 Vue 实例在服务器上运行，则为 true（在服务器端渲染时有用）
• vm.$attrs 是一个属性对象，提供给组件但未定义为 prop 的属性列表
• vm.$listeners 是分配给组件的 v-on 事件监听器的对象

Methods Data

• vm.$watch 设置一个观察者以监视 Vue 数据的更改。它也可以观察对象内的值更改
• vm.$set 设置一个属性
• vm.$delete 删除一个属性

事件

• vm.$emit 在 vm Vue 实例上触发自定义事件
• vm.$on 在 vm Vue 实例上监听自定义事件
• vm.$once 类似于 $on，但只监听一次
• vm.$off 从 Vue 实例中删除事件侦听器

生命周期方法

• vm.$mount 在 DOM 元素上挂载 Vue 实例，如果尚未挂载
• vm.$forceUpdate 强制 vm Vue 实例重新渲染。不会强制子组件重新渲染。
• vm.$nextTick 接受一个回调函数，并计划它在下一个 DOM 更新周期中执行
• vm.$destroy 销毁应用程序，并删除所有子组件、观察对象和侦听器

tags: [“Vue.js”, “前端开发”, “JavaScript”]