Vue built-in instruction

  vue.js

v-text

Type：string
usage: for updating elementstextContent. If you want to update part of thetextContent, you need {{ Mustache }} interpolation.

v-html

Type：string
usage: for updating elementsinnerHTML.

Note: The content is normalHTMLInsert-not asVueThe template is compiled.
If you try to usev-htmlCombining templates, you can reconsider whether to replace them by using components.

<span style=”color:red; font-weight:bold;” > rendering arbitrary dynamically on the websiteHTMLIt is very dangerous because it is easy to causecross site scripting. Use only on trusted contentv-htmlAnd should never be used on content submitted by users. </span>

v-show

Type：any
usage: Toggles the of the element according to the true or false value of the expressiondisplayCSS properties. This command triggers the transition effect when conditions change.

<span style=”color:red;” > withv-showThe elements of will always be rendered and retained in theDOMChina.
v-showThe element is simply switchedCSSAttributedisplay. </span>

v-if

Type： any
usage: Renders an element according to the true or false condition of the expression’s value. The element and its data bindings/components are destroyed and rebuilt during switching. If the element is<template>, will put forward its content as a conditional block.

<span style=”color:red;” > note:v-ifInstruction is to insert or delete elements according to the value of conditional expression. </span>

v-else

usage: isv-ifOr ..v-else-ifAdd “else block.”

<span style=”color:red;” > note
v-elseElement must immediately followv-ifOr ..v-else-ifElement-otherwise it will not be recognized. </span>

v-else-if

Type：any
limit: The former sibling element must havev-ifOrv-else-if.
usage: Indicatesv-ifThe “else if block” of the. Can be called in chain.

Key to Manage Reusable Elements

Vue renders elements as efficiently as possible, usually reusing existing elements instead of rendering from scratch.

v-for

Type：Array|Object|number|string
usage: Renders elements or templates multiple times based on source data. The value of this command must use a specific syntaxalias in expressionTo provide an alias for the currently traversed element.

v-on

Abbreviations：@
Type：Function|Inline Statement
Parameter：event (required)
Modifier：

.stop-Callevent.stopPropagation().
.prevent-Callevent.preventDefault().
.capture-Used when adding event listenerscaptureMode.
.self-Triggers callbacks only if the event is triggered from the listener-bound element itself.
.{keyCode | keyAlias}-Triggers callbacks only if the event is triggered from a specific key.
.native-Listen for native events of the component root element.
.once-Triggers only one callback.
.left-(2.2.0) Triggered only when left mouse button is clicked.
.right-(2.2.0) Triggered only when the right mouse button is clicked.
.middle-(2.2.0) Triggered only when middle mouse button is clicked.
.passive-(2.3.0) to{ passive: true }Schema Add Listener

usage：

Bind event listeners. The event type is specified by the parameter. An expression can be the name of a method or an inline statement, or it can be omitted without modifiers.

When used on common elements, only native elements can be monitoredDOMEvents. When used on custom element components, you can also listen for custom events triggered by subcomponents.

Listening to NativeDOMWhen the event occurs, the method takes the event as the only parameter. If an inline statement is used, the statement can access a$event Properties:v-on:click="handle('ok', $event)".

Reference example

v-bind

Abbreviations：:
Type：any(with argument) |Object(without argument)
Parameter：attrOrProp (optional)
Modifier：

.prop-Used to bind DOM attributes.
.camel– (2.1.0+) transform the kebab-case attribute name into camelCase. (supported since 2.1.0)
.sync(2.3.0+) syntax sugar, will be extended to update the parent component binding valuev-onListeners.

usage：

Dynamically bind one or more properties, or a componentpropTo expression.
In bindingclassOrstyleProperty, other types of values, such as arrays or objects, are supported.
In bindingpropAt that time,propMust be declared in a subassembly. You can use modifiers to specify different binding types.
Without parameters, you can bind to an object that contains key-value pairs. Note at this timeclassAndstyleBindings do not support arrays and objects.

Reference example

v-model

Type: varies depending on the type of form control.
Modifier：

.lazy-ReplacementinputMonitorchangeEvents
.number-Input string to number
.trim-Enter the leading and trailing spaces to filter

usage：v-modelInstructions are used toinput、select、text、checkbox、radioSuch as form controls or components to create a two-way binding.
It automatically selects the correct method to update the element according to the control type. Although some magic, butv-modelIn essence, it is nothing more than a grammar sugar. It is responsible for monitoring the user’s input events to update the data, and specially handles some extreme cases.

<span style=”color:#d9534f;” >v-modelDoes not care about the value generated by the form control initialization. Because it will choose Vue instance data as the specific value.
For languages that require ime (such as Chinese, Japanese, Korean, etc.), you will find that the v-model will not be updated in IME composition. If you also want to implement the update, please useinputEvents. </span>

Binding value

For radio buttons, check boxes and select list options,v-modelBoundvalueUsually static string (logical value for check box)

But sometimes we want to bindvalueTo a dynamic attribute of the Vue instance, you can use thev-bindImplemented, and the value of this property may not be a string.

Modifier

By default,v-modelIninputThe event synchronizes the value and data of the input box (except the IME part above), but you can add a modifierlazyIn order to change into inchangeSynchronization in Events:

.lazy

<input v-model.lazy="msg">

.number

If you want to automatically convert the user’s input value toNumberType (return original value if conversion result of original value is NaN), you can add a modifiernumbertov-modelTo process input values:

<input v-model.number="age" type="number">

This is usually useful because the value entered in HTML when type=”number “always returns the string type.

.trim

If you want to automatically filter the leading and trailing spaces entered by the user, you can addtrimModifier tov-modelFilter input on.

Reference example

v-pre

usage: Skips compilation of this element and its child elements. Can be used to display the originalMustacheLabel. Skipping a large number of nodes without instructions speeds up compilation.

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

usage: This instruction remains on the element until the associated instance finishes compiling. And CSS rules such as[v-cloak] { display: none }When used together, this instruction can hide uncompiledMustacheTags are not available until the instance is ready, otherwise users may see them first when rendering the page.MustacheTag, and then see the compiled data.

Reference example

v-once

usage: Renders elements and components only once. For subsequent re-rendering, elements/components and all their child nodes will be treated as static content and skipped. This can be used to optimize update performance.

Reference example

Related Posts: