vue 备忘录
Options passed to a Vue object
指令 (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 eventv-on:click.native
触发本地DOM事件而不是Vue事件v-on:click.stop
stop the click event propagationv-on:click.stop
停止click事件传播v-on:click.passive
makes use of the passive option of addEventListenerv-on:click.passive
使用addEventListener的被动选项v-on:click.capture
use event capturing instead of event bubblingv-on:click.capture
使用事件捕获而不是事件冒泡v-on:click.self
make sure the click event was not bubbled from a child event, but directly happened on that elementv-on:click.self
确保click事件未从子事件中冒出,而是直接发生在该元素上v-on:click.once
the event will only be triggered exactly oncev-on:click.once
事件只会被触发一次v-on:submit.prevent
: callevent.preventDefault()
on the triggered submit event, used to avoid a form submit to reload the pagev-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 clickv-on:click .left
仅在鼠标左键单击时触发v-on:click .right
triggers only on right mouse button clickv-on:click .right
仅在鼠标右键单击时触发v-on:click .middle
triggers only on middle mouse button clickv-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 attributev-bind .prop
绑定一个prop而不是一个属性v-bind .camel
use camelCase for the attribute namev-bind .camel
使用camelCase作为属性名称v-bind .sync
a syntactic sugar that expands into av-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 createdcreated
应用后调用创建的beforeMount
called before the app is mounted on the DOM在将应用程序安装到DOM之前调用
beforeMount
mounted
called after the app is mounted on the DOMmounted
应用程序被安装在DOM之后调用beforeDestroy
called before the app is destroyed在销毁应用程序之前调用
beforeDestroy
destroyed
called after the app is destroyeddestroyed
应用程序被破坏后调用beforeUpdate
called before a property is updated在更新属性之前调用的
beforeUpdate
updated
called after a property is updatedupdated
属性后调用activated
called when a kept-alive component is activatedactivated
保持活动的组件时调用deactivated
called when a kept-alive component is deactivateddeactivated
保持活动的组件时调用
内置组件 (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 HTMLElementel
设置实例安装所在的DOM元素。 它可以是CSS选择器,也可以是HTMLElementtemplate
is a template, represented as a string, that will replace the mounted elementtemplate
是用字符串表示的模板,它将替换已安装的元素render
alternatively to define the template, you can define a template using a render functionrender
或定义模板,您可以使用渲染功能定义模板renderError
set an alternative output when the function attached torender
fails当附加到
render
的函数失败时,renderError
设置替代输出
Vue实例资产 (Vue instance assets)
directives
the set of directives to associate to the Vue instancedirectives
与Vue实例关联的指令集filters
the set of filters to associate to the Vue instancefilters
一组过滤器以关联到Vue实例components
the set of components to associate to the Vue instancecomponents
一组要与Vue实例关联的组件
Vue组成选项 (Vue composition options)
parent
specifies the parent instanceparent
指定父实例mixins
sets an array of mixin objectsmixins
设置一个mixin对象数组extends
extend another componentextends
扩展另一个组件
其他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 templatename
的名称设置为组件可以调用它,有用的调试或者当你需要在递归其模板添加组件functional
if true, sets the component to be stateless (nodata
) and instanceless (nothis
), making it more lightweight如果为true,则为
functional
,将组件设置为无状态(无data
)和无实例(无this
),从而使其更轻便model
allows to customize the property used in events, useful for example when interacting with formsmodel
允许自定义事件中使用的属性,例如在与表单交互时很有用comments
defaults to false. If set to true, retains the HTML comments that are put in templatescomments
默认为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 instancevm.$data
与实例关联的数据对象vm.$props
the props the instance has receivedvm.$props
实例收到的道具vm.$el
the DOM element to which the instance is boundvm.$el
实例绑定到的DOM元素vm.$options
the object used to instantiate the Vue instancevm.$options
用于实例化Vue实例的对象vm.$parent
the parent instancevm.$parent
父实例vm.$root
the root instance (if this is the root instance, this points to itself)vm.$root
根实例(如果这是根实例,则指向自身)vm.$children
an array of children instancesvm.$children
一个子实例实例的数组vm.$slots
an array of the associated slots contained in the templatevm.$slots
模板中包含的相关vm.$slots
的数组vm.$scopedSlots
an array of the associated scoped slotsvm.$scopedSlots
关联范围的插槽的数组vm.$refs
an object that contains a property for each element pointed by aref
attribute defined in the templatevm.$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 propsvm.$attrs
提供给组件但未定义为props的属性的对象vm.$listeners
an object ofv-on
event listeners assigned to the componentvm.$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 objectsvm.$watch
为Vue数据中的属性更改设置了vm.$watch
程序。 它还可以观察对象内部的价值变化vm.$set
set a propertyvm.$set
设置一个属性vm.$delete
delete a propertyvm.$delete
删除属性
大事记 (Events)
vm.$emit
triggers a custom event on thevm
Vue instancevm.$emit
在vm
Vue实例上触发自定义事件vm.$on
listen for a custom event on thevm
Vue instancevm.$on
监听vm
Vue实例上的自定义事件vm.$once
like$on
, but listens only oncevm.$once
像$on
,但是只听一次vm.$off
removes an event listener from the Vue instancevm.$off
从Vue实例中删除事件监听器
生命周期方法 (Lifecycle Methods)
vm.$mount
mount a Vue instance on a DOM element, in case it was not mounted yetvm.$mount
在DOM元素上挂载Vue实例,以防尚未挂载vm.$forceUpdate
force thevm
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 cyclevm.$nextTick
接受回调并安排在下一个DOM更新周期vm.$destroy
destroys the application and remove all child components, observers and listenersvm.$destroy
破坏应用程序并删除所有子组件,观察者和监听者
vue 备忘录