One, interpolation operation
1. Mustache
How to insert the text data in data into HTML?
We have already learned it and can passMustache语法(that is, double braces).Mustache: Mustache/beard.
We can use it like the following, and the data is responsive
2. v-once
However, in some cases, we may not want the interface to follow the changes at will. At this time, we can use a Vue command
v-once
v-once:
- The instruction does not need to be followed by any expression (for example, the previous v-for is followed by an expression)
- This instruction indicates that the elements and components (the components will be learned later) are only rendered once, and will not change as the data changes .
code show as below:
3. v-html
In some cases, the data we request from the server is itself an HTML code.
If we output it directly through { {}}, the HTML code will also be output.
But what we might want is to parse it in HTML format and display the corresponding content.
If we want to parse out the HTML display, we can use the v-html command
- This instruction is often followed by a string type
- The html of the string will be parsed and rendered
4. v-text
- The function of v-text is similar to Mustache: both are used to display data in the interface
- v-text usually accepts a string type
5. v-pre
v-pre is used to skip the compilation process of this element and its sub-elements, and is used to display the original Mustache syntax.
For example, the following code:
- The content in the first h2 element will be compiled and parsed to get the corresponding content
- The second h2 element will directly display {
{message}}
6. v-cloak
In some cases, our browser may directly show the uncompiled Mustache tags.
When the network is slow and the web page is still loading Vue.js, Vue is too late to render, then the page will display the Vue source code. We can use the v-cloak command to solve this problem. Use the v-cloak command to solve the problem of screen flickering
cloak: cloak
Two, binding properties
The main function of the instructions we learned earlier is to insert values into the content of our template.
However, in addition to the content that needs to be determined dynamically, we also want to bind some properties dynamically.
- For example, dynamically bind the href attribute of the a element
- For example, dynamically bind the src attribute of the img element
At this time, we can use the v-bind command:
- Role: dynamic binding properties
- abbreviation::
- 预期：any (with argument) | Object (without argument)
- Parameters: attrOrProp (optional)
v-bind is used to bind one or more property values, or to pass props values to another component (this will be introduced when you learn about components).
In development, what properties need to be dynamically bound?
There are still many, such as image link src, website link href, dynamic binding of some classes, styles, etc. For
example, binding element src and href through data in the Vue instance, the code is as follows:
1.v-bind syntactic sugar:
v-bind has a corresponding syntactic sugar, which is shorthand.
In development, we usually use the form of syntactic sugar because it is more concise.
The abbreviation is as follows:
2.v-bind binding class
In many cases, we hope to switch classes dynamically, for example,
when the data is in a certain state, the font will be red.
When the data is in another state, the font is displayed in black.
There are two ways to bind a class:
- Object syntax
- Array syntax
1) Binding method: object syntax
The meaning of object syntax is: class is followed by an object .
Object syntax has the following uses:
用法一：直接通过{}绑定一个类
<h2 :class="{
'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
2) Binding method: array syntax
The meaning of array syntax is: class is followed by an array.
The array syntax has the following uses:
用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
3.v-bind binding style
We can use v-bind:style to bind some CSS inline styles.
When writing CSS property names, such as font-size,
we can use camelCase fontSize
or dash separation (kebab-case, remember to enclose it in single quotes)'font-size'
There are two ways to bind a class:
-
Object syntax
-
Array syntax
-
Binding method one: object syntax
:style="{color: currentColor, fontSize: fontSize + 'px'}"
style is followed by an object type
- The key of the object is the CSS property name
- The value of the object is a specific assigned value, and the value can come from an attribute in data
2) Binding method two: array syntax
<div v-bind:style="[baseStyles, overridingStyles]"></div>
- style is followed by an array type
- Multiple values can be divided into
Three, calculated properties
1. What are calculated properties?
We know that some data in data can be displayed directly in the template through interpolation syntax.
But in some cases, we may need to convert the data before displaying it, or we need to combine multiple data for display
- For example, we have two variables, firstName and lastName, and we need to display the full name.
- But if the full name needs to be displayed in multiple places, we need to write multiple {
{firstName}} {
{lastName}}
We can replace the above code with calculated attributes:
- OK, we found that the calculated properties are written in the computed option of the instance.
2. Complicated operations for calculating attributes
Some more complex operations can also be performed in the calculated attributes, such as the following example:
3. Calculate the setter and getter of the property
Each calculated property contains a getter and a setter.
In the above example, we just use the getter to read it.
In some cases, you can also provide a setter method (not commonly used) .
When you need to write a setter, the code is as follows:
4. Cache of calculated attributes
We may consider such a question: methods and computed seem to be able to achieve our functions.
So why do we need one more computing property?
Reason: The calculated attribute will be cached. If it is used multiple times, the calculated attribute will only be called once.
