您在日常的 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 选择器或 HTMLElementtemplate
是一个字符串表示的模板,将替换已添加的元素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
实例接收到的 propsvm.$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
销毁应用程序,并删除所有子组件、观察对象和侦听器