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 normal
HTML
Insert-not asVue
The template is compiled.
If you try to usev-html
Combining templates, you can reconsider whether to replace them by using components.
<span style=”color:red; font-weight:bold;” > rendering arbitrary dynamically on the websiteHTML
It is very dangerous because it is easy to causecross site scripting. Use only on trusted contentv-html
And 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 expressiondisplay
CSS properties. This command triggers the transition effect when conditions change.
<span style=”color:red;” > with
v-show
The elements of will always be rendered and retained in theDOM
China.v-show
The element is simply switchedCSS
Attributedisplay
. </span>
v-if
Type
: anyusage
: 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-if
Instruction is to insert or delete elements according to the value of conditional expression. </span>
v-else
usage: isv-if
Or ..v-else-if
Add “else block.”
<span style=”color:red;” > note
v-else
Element must immediately followv-if
Or ..v-else-if
Element-otherwise it will not be recognized. </span>
v-else-if
Type:any
limit: The former sibling element must havev-if
Orv-else-if
.
usage: Indicatesv-if
The “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 expression
To 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 listenerscapture
Mode..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 monitoredDOM
Events. When used on custom element components, you can also listen for custom events triggered by subcomponents.
Listening to NativeDOM
When 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)"
.
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-on
Listeners.
usage:
Dynamically bind one or more properties, or a componentprop
To expression.
In bindingclass
Orstyle
Property, other types of values, such as arrays or objects, are supported.
In bindingprop
At that time,prop
Must 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 timeclass
Andstyle
Bindings do not support arrays and objects.
v-model
Type: varies depending on the type of form control.
Modifier:
.lazy
-Replacementinput
Monitorchange
Events.number
-Input string to number.trim
-Enter the leading and trailing spaces to filter
usage:v-model
Instructions are used toinput
、select
、text
、checkbox
、radio
Such 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-model
In 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-model
Does 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 useinput
Events. </span>
Binding value
For radio buttons, check boxes and select list options,v-model
Boundvalue
Usually static string (logical value for check box)
But sometimes we want to bindvalue
To a dynamic attribute of the Vue instance, you can use thev-bind
Implemented, and the value of this property may not be a string.
Modifier
By default,v-model
Ininput
The event synchronizes the value and data of the input box (except the IME part above), but you can add a modifierlazy
In order to change into inchange
Synchronization in Events:
.lazy
<input v-model.lazy="msg">
.number
If you want to automatically convert the user’s input value toNumber
Type (return original value if conversion result of original value is NaN), you can add a modifiernumber
tov-model
To 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 addtrim
Modifier tov-model
Filter input on.
v-pre
usage: Skips compilation of this element and its child elements. Can be used to display the originalMustache
Label. 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 uncompiledMustache
Tags are not available until the instance is ready, otherwise users may see them first when rendering the page.Mustache
Tag, and then see the compiled data.
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.