vue 备忘录_Vue.js备忘单

最新推荐文章于 2024-04-27 19:18:31 发布

cuk0051

最新推荐文章于 2024-04-27 19:18:31 发布

阅读量319

点赞数

文章标签： vue java javascript react jquery ViewUI

原文链接：https://flaviocopes.com/vue-cheat-sheet/

版权

vue 备忘录

指令 (Directives)

Directives are attributes identified by the v- prefix.

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

Directive	Description
`v-text`	uses the property as the text value of the element
`v-html`	uses the property as the text value of the element, interpreting HTML
`v-if`	show an element only if the conditional is true
`v-else`	shows an alternative element if the preceding `v-if` is false
`v-else-if`	adds an else if block for a `v-if` construct
`v-show`	similar to `v-if`, but adds the element to the DOM even if falsy. Just sets it to `display: none`.
`v-for`	iterates over an array or iterable object
`v-on`	listen to DOM events
`v-bind`	reactively update an HTML attribute
`v-model`	sets up a two-way binding for form inputs. used in form elements, updates the model when the user changes the form field value
`v-once`	applies the property just once, and never refreshes it even if the data passed changes

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

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

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

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

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

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

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>

有条件的 (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 passive option of addEventListener
v-on:click.passive使用addEventListener的被动选项
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 JavaScript events guide.

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

鼠标事件修改器 (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 this.
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对象具有以下属性，您可以在创建实例时对其进行修改：

Property	Description
`silent`	defaults to false, if true suppress logs and warnings
`optionMergeStrategies`	allows to define a custom merging strategy for options
`devtools`	defaults to true in development, and false in production. You can override those values.
`errorHandler`	allows to set an error handler function. Useful to hook Sentry and other similar services
`warnHandler`	allows to set a warning handler function, similar to `errorHandler`, but for warnings instead of errors
`ignoredElements`	used to let Vue ignore custom elements defined outside of it, like Web Components.
`keyCodes`	let you define custom key aliases for `v-on`
`performance`	defaults to false. If set to true, traces the performance of Vue components in the Browser DevTools.
`productionTip`	defaults to true. Set to false to disable the warning “you’re in development mode” during development in the console.

属性	描述
`silent`	默认为false，如果为true，则禁止显示日志和警告
`optionMergeStrategies`	允许为选项定义自定义合并策略
`devtools`	在开发中默认为true，在生产中默认为false。您可以覆盖这些值。
`errorHandler`	允许设置错误处理程序功能。对挂钩哨兵和其他类似服务有用
`warnHandler`	允许设置警告处理程序函数，类似于`errorHandler` ，但是用于警告而不是错误
`ignoredElements`	用于让Vue忽略在其外部定义的自定义元素，例如Web Components 。
`keyCodes`	让您定义`v-on`自定义键别名
`performance`	默认为false。如果设置为true，则在浏览器DevTools中跟踪Vue组件的性能。
`productionTip`	默认为true。设置为false可在控制台中的开发过程中禁用警告“您处于开发模式”。

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

Method	Description
`Vue.extend`	allows to subclass the Vue object, to create a custom profile
`Vue.nextTick`	defers the callback to be executed after the next DOM update cycle
`Vue.set`	add a property to the object
`Vue.delete`	delete a property from the object
`Vue.directive`	set (or get) a global directive
`Vue.filter`	set (or get) a global filter
`Vue.component`	set (or get) a global component
`Vue.use`	install a Vue.js plugin
`Vue.mixin`	set a global mixin
`Vue.compile`	compile a template string into a render function
`Vue.version`	returns the currently installed version of 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对象的选项 (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.

该对象接受许多属性。

Property	Description
`data`	allows to pass a set of reactive data that will be used by the Vue app. All reactive properties must be added at initialization time, you can’t add new ones later.
`props`	it’s a set of attributes that are exposed to parent components as input data.
`propsData`	default data for props. Only useful during testing
`methods`	a set of methods that are defined on the Vue instance
`computed`	like methods, but cached internally
`watch`	allows to watch properties, and call a function when they change

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

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破坏应用程序并删除所有子组件，观察者和监听者