Vue.js备忘单

日常Vue.js编码会议中将使用的常见命令和说明

指令

指令是由v-字首。

指示 描述
v-text 使用属性作为元素的文本值
v-html 使用属性作为元素的文本值,解释HTML
v-if 仅在条件为true时显示元素
v-else 如果前面的内容显示一个替代元素v-if是假的
v-else-if 添加else if块v-if构造
v-show 如同v-if,但即使是伪造的元素也会将其添加到DOM中。只需将其设置为display: none
v-for 遍历数组或可迭代对象
v-on 监听DOM事件
v-bind 反应性地更新HTML属性
v-model 为表单输入设置双向绑定。用于表单元素中,当用户更改表单字段值时更新模型
v-once 仅一次应用该属性,即使传递的数据发生更改也永远不会刷新该属性

v-bindv-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的被动选项
  • v-on:click.capture使用事件捕获而不是事件冒泡
  • v-on:click.self确保click事件没有从子事件中冒出,而是直接发生在该元素上
  • v-on:click.once该事件只会被触发一次
  • v-on:submit.prevent: 称呼event.preventDefault()在触发的Submit事件上,用于避免表单提交以重新加载页面

有关传播,冒泡/捕捉的更多信息,请参阅我的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键)

绑定

  • v-bind .prop绑定道具而不是属性
  • v-bind .camel使用camelCase作为属性名称
  • 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 允许设置错误处理程序功能。有助于钩住哨兵和其他类似服务
warnHandler 允许设置警告处理程序功能,类似于errorHandler,但用于警告而不是错误
ignoredElements 用于让Vue忽略在其外部定义的自定义元素,例如Web组件
keyCodes 让您为以下项定义自定义键别名v-on
performance 默认为false。如果设置为true,则在浏览器DevTools中跟踪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 设置全局混合
Vue.compile 将模板字符串编译成渲染函数
Vue.version 返回当前安装的Vue版本

传递给Vue对象的选项

初始化Vue对象时,您传入一个对象:

const vm = new Vue({

})

该对象接受许多属性。

财产 描述
data 允许传递一组将由Vue应用程序使用的反应性数据。所有反应性属性必须在初始化时添加,以后不能添加新的。
props 它是一组属性,作为输入数据公开给父组件。
propsData 道具的默认数据。仅在测试期间有用
methods 在Vue实例上定义的一组方法
computed 相似的方法,但在内部缓存
watch 允许观看属性,并在属性更改时调用函数

定义数据,方法和计算属性的示例:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

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

DOM

  • el设置实例安装所在的DOM元素。它可以是CSS选择器,也可以是HTMLElement
  • template是一个模板,以字符串表示,它将替换已安装的元素
  • render或者定义模板,您可以使用渲染功能定义模板
  • renderError附加功能时设置替代输出render失败了

Vue实例资产

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

Vue组成选项

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

其他Vue对象选项

  • name为组件设置名称可以调用它,这在调试时或需要在其模板中递归添加组件时很有用
  • functional如果为true,则将组件设置为无状态(否data)和无实例(否this),使其更轻巧
  • model允许自定义事件中使用的属性,例如在与表单交互时很有用
  • comments默认为false。如果设置为true,则保留模板中的HTML注释

实例属性

给定Vue的实例,将其存储到变量中const vm = new Vue(/*...*/),您可以对其进行检查并进行交互。

Vue实例的属性

  • vm.$data与实例关联的数据对象
  • vm.$props实例收到的道具
  • vm.$el实例绑定到的DOM元素
  • vm.$options用于实例化Vue实例的对象
  • vm.$parent父实例
  • vm.$root根实例(如果这是根实例,则指向自身)
  • vm.$children一系列子实例
  • vm.$slots模板中包含的相关插槽的数组
  • vm.$scopedSlots相关作用域插槽的数组
  • vm.$refs一个对象,该对象包含一个指向的每个元素的属性ref模板中定义的属性
  • vm.$isServer如果Vue实例正在服务器上运行,则为true(在服务器端呈现中很有用)
  • vm.$attrs提供给组件但未定义为属性的属性对象
  • vm.$listeners的对象v-on分配给组件的事件侦听器

方法数据

  • vm.$watch为Vue数据中的属性更改设置观察程序。它也可以观察对象内部的价值变化
  • vm.$set设置一个属性
  • vm.$delete删除属性

大事记

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

生命周期方法

  • vm.$mount在尚未安装DOM元素的情况下将其安装在DOM元素上
  • vm.$forceUpdate强迫vmVue实例重新渲染。不强制重新渲染子组件。
  • vm.$nextTick接受回调并计划在下一个DOM更新周期进行
  • vm.$destroy销毁应用程序并删除所有子组件,观察者和侦听器

免费下载我的Vue手册


更多vue教程: