vue 备忘录

指令 (Directives)

Directives are attributes identified by the v- prefix.

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

v-bind and v-on have a shorthand format:

v-bind和v-on具有简写格式：

......

......

Example of v-if / v-else / v-else-if:

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

     
        it's A
     
     
        it's B
     
     
        it's C
     
     
        it's neither one
     

有条件的 (Conditionals)

You can embed a conditional in an expression using the ternary operator:

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

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

使用表单元素 (Working with form elements)

To make the model update when the change event occurs, and not any time the user presses a key, you can use v-model.lazy instead of just v.model.

要在发生更改事件v-model.lazy不是在用户按下键时更新模型，可以使用v-model.lazy而不是仅使用v.model 。

Working with input fields, v-model.trim is useful because it automatically removes whitespace.

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

And if you accept a number instead than a string, make sure you use v-model.number.

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

修改事件 (Modifying events)

I use click as an example, but applies to all possible events

我以click为例，但适用于所有可能的事件

• v-on:click.native trigger a native DOM event instead of a Vue event

  v-on:click.native触发本地DOM事件而不是Vue事件

• v-on:click.stop stop the click event propagation

  v-on:click.stop停止click事件传播

• v-on:click.passive makes use of the

  v-on:click.passive使用的

• v-on:click.capture use event capturing instead of event bubbling

  v-on:click.capture使用事件捕获而不是事件冒泡

• v-on:click.self make sure the click event was not bubbled from a child event, but directly happened on that element

  v-on:click.self确保click事件未从子事件中冒出，而是直接发生在该元素上

• v-on:click.once the event will only be triggered exactly once

  v-on:click.once事件只会被触发一次

• v-on:submit.prevent: call event.preventDefault() on the triggered submit event, used to avoid a form submit to reload the page

  v-on:submit.prevent ：在触发的提交事件上调用event.preventDefault() ，用于避免表单提交重新加载页面

For more on propagation, bubbling/capturing see my .

有关传播，冒泡/捕获的更多信息，请参阅我的 。

鼠标事件修改器 (Mouse event modifiers)

• v-on:click .left triggers only on left mouse button click

  v-on:click .left仅在鼠标左键单击时触发

• v-on:click .right triggers only on right mouse button click

  v-on:click .right仅在鼠标右键单击时触发

• v-on:click .middle triggers only on middle mouse button click

  v-on:click .middle仅在鼠标中键单击时触发

仅在按下特定键时才提交事件 (Submit an event only if a particular key is pressed)

• v-on:keyup.enter

  v-on:keyup.enter

• v-on:keyup.tab

  v-on:keyup.tab

• v-on:keyup.delete

  v-on:keyup.delete

• v-on:keyup.esc

  v-on:keyup.esc

• v-on:keyup.up

  v-on:keyup.up

• v-on:keyup.down

  v-on:keyup.down

• v-on:keyup.left

  v-on:keyup.left

• v-on:keyup.right

  v-on:keyup.right

键盘事件修饰符 (Keyboard event modifiers)

Only trigger the event if a particular keyboard key is also pressed:

仅当还按下特定的键盘键时才触发事件：

• .ctrl

  .ctrl

• .alt

  .alt

• .shift

  .shift

• .meta (cmd on Mac, windows key on Win)

  .meta (在Mac上为cmd，在Win上为Windows键)

v-bind

绑定

• v-bind .prop bind a prop instead of an attribute

  v-bind .prop绑定一个prop而不是一个属性

• v-bind .camel use camelCase for the attribute name

  v-bind .camel使用camelCase作为属性名称

• v-bind .sync a syntactic sugar that expands into a v-on handler for updating the bound value. See .

  v-bind .sync一个语法糖，该糖将扩展为v-on处理程序以更新绑定值。 看到 。

生命周期挂钩 (Lifecycle Hooks)

• beforeCreate called before the app is created

  在创建应用之前调用beforeCreate

• created called after the app is created

  created应用后调用创建的

• beforeMount called before the app is mounted on the DOM

  在将应用程序安装到DOM之前调用beforeMount

• mounted called after the app is mounted on the DOM

  mounted应用程序被安装在DOM之后调用

• beforeDestroy called before the app is destroyed

  在销毁应用程序之前调用beforeDestroy

• destroyed called after the app is destroyed

  destroyed应用程序被破坏后调用

• beforeUpdate called before a property is updated

  在更新属性之前调用的beforeUpdate

• updated called after a property is updated

  updated属性后调用

• activated called when a kept-alive component is activated

  activated保持活动的组件时调用

• deactivated called when a kept-alive component is deactivated

  deactivated保持活动的组件时调用

内置组件 (Built-in components)

Vue provides 5 built-in components:

Vue提供了5个内置组件：

• <component>

  <component>

• <transition>

  <transition>

• <transition-group>

  <transition-group>

• <keep-alive>

  <keep-alive>

• <slot>

  <slot>

Vue对象的全局配置 (Global Configuration of the Vue object)

The Vue.config object has these properties, which you can modify when you create the instance:

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

Vue对象的方法 (Methods of the Vue object)

传递给Vue对象的选项 (Options passed to a Vue object)

When initializing a Vue object, you pass in an object:

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

const vm = new Vue({})

This object accepts a number of properties.

该对象接受许多属性。

Example of defining data, methods and computed properties:

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

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 (DOM)

• el sets the DOM element where the instance mounts on. It can be a CSS Selector, or an HTMLElement

  el设置实例安装所在的DOM元素。 它可以是CSS选择器，也可以是HTMLElement

• template is a template, represented as a string, that will replace the mounted element

  template是用字符串表示的模板，它将替换已安装的元素

• render alternatively to define the template, you can define a template using a render function

  render或定义模板，您可以使用渲染功能定义模板

• renderError set an alternative output when the function attached to render fails

  当附加到render的函数失败时， renderError设置替代输出

Vue实例资产 (Vue instance assets)

• directives the set of directives to associate to the Vue instance

  directives与Vue实例关联的指令集

• filters the set of filters to associate to the Vue instance

  filters一组过滤器以关联到Vue实例

• components the set of components to associate to the Vue instance

  components一组要与Vue实例关联的组件

Vue组成选项 (Vue composition options)

• parent specifies the parent instance

  parent指定父实例

• mixins sets an array of mixin objects

  mixins设置一个mixin对象数组

• extends extend another component

  extends扩展另一个组件

其他Vue对象选项 (Other Vue object options)

• name setting a name to the component lets you invoke it, useful in debugging or when you need to recursively add a component in its template

  name的名称设置为组件可以调用它，有用的调试或者当你需要在递归其模板添加组件

• functional if true, sets the component to be stateless (no data) and instanceless (no this), making it more lightweight

  如果为true，则为functional ，将组件设置为无状态(无data )和无实例(无this )，从而使其更轻便

• model allows to customize the property used in events, useful for example when interacting with forms

  model允许自定义事件中使用的属性，例如在与表单交互时很有用

• comments defaults to false. If set to true, retains the HTML comments that are put in templates

  comments默认为false。 如果设置为true，则保留模板中HTML注释

实例属性 (Instance properties)

Given an instance of Vue, stored into a variable const vm = new Vue(/*...*/), you can inspect and interact with it.

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

Vue实例的属性 (Properties of a Vue instance)

• vm.$data the data object associated to the instance

  vm.$data与实例关联的数据对象

• vm.$props the props the instance has received

  vm.$props实例收到的道具

• vm.$el the DOM element to which the instance is bound

  vm.$el实例绑定到的DOM元素

• vm.$options the object used to instantiate the Vue instance

  vm.$options用于实例化Vue实例的对象

• vm.$parent the parent instance

  vm.$parent父实例

• vm.$root the root instance (if this is the root instance, this points to itself)

  vm.$root根实例(如果这是根实例，则指向自身)

• vm.$children an array of children instances

  vm.$children一个子实例实例的数组

• vm.$slots an array of the associated slots contained in the template

  vm.$slots模板中包含的相关vm.$slots的数组

• vm.$scopedSlots an array of the associated scoped slots

  vm.$scopedSlots关联范围的插槽的数组

• vm.$refs an object that contains a property for each element pointed by a ref attribute defined in the template

  vm.$refs一个对象，该对象包含模板中定义的ref属性所指向的每个元素的属性

• vm.$isServer true if the Vue instance is running on the server (useful in server-side rendering)

  vm.$isServer如果Vue实例正在服务器上运行， vm.$isServer true(在服务器端呈现中很有用)

• vm.$attrs an object of attributes that are provided to the component but not defined as props

  vm.$attrs提供给组件但未定义为props的属性的对象

• vm.$listeners an object of v-on event listeners assigned to the component

  vm.$listeners分配给组件的v-on事件vm.$listeners的对象

方法数据 (Methods Data)

• vm.$watch set up a watcher for property changes in the Vue data. It can also watch for value changes inside objects

  vm.$watch为Vue数据中的属性更改设置了vm.$watch程序。 它还可以观察对象内部的价值变化

• vm.$set set a property

  vm.$set设置一个属性

• vm.$delete delete a property

  vm.$delete删除属性

大事记 (Events)

• vm.$emit triggers a custom event on the vm Vue instance

  vm.$emit在vm Vue实例上触发自定义事件

• vm.$on listen for a custom event on the vm Vue instance

  vm.$on监听vm Vue实例上的自定义事件

• vm.$once like $on, but listens only once

  vm.$once像$on ，但是只听一次

• vm.$off removes an event listener from the Vue instance

  vm.$off从Vue实例中删除事件监听器

生命周期方法 (Lifecycle Methods)

• vm.$mount mount a Vue instance on a DOM element, in case it was not mounted yet

  vm.$mount在DOM元素上挂载Vue实例，以防尚未挂载

• vm.$forceUpdate force the vm Vue instance to re-render. Does not force child components to rerender.

  vm.$forceUpdate强制重新渲染vm Vue实例。 不强制重新渲染子组件。

• vm.$nextTick accepts a callback and schedules that for the next DOM update cycle

  vm.$nextTick接受回调并安排在下一个DOM更新周期

• vm.$destroy destroys the application and remove all child components, observers and listeners

  vm.$destroy破坏应用程序并删除所有子组件，观察者和监听者

翻译自:

vue 备忘录