vue learning (grammar)

v-html command

You can insert the corresponding page code in the page and display the effect.

v-bind instruction

The following example judges the value of use, if it is true, the style of class1 is used, otherwise the class is not used. Refer to the following address:
https://www.runoob.com/vue2/vue-template-syntax.html
https://cn.vuejs.org/v2/guide/syntax.html

Vue.js provides full JavaScript expression support.

v-if instruction

Judgment instructions. Here, the v-if instruction will determine whether to insert the p element according to the value of the expression seen (true or false).

v-model directive

Two-way data binding. The p note calls the value of the lb variable, and the input and lb variables are two-way data-bound, so whatever you enter in the input box, the p note will immediately display what it is. The advantage of this is that the value of the input box and the value of the lb variable are the same no matter what, if you need to submit the form, you can directly transfer the value of the lb variable. This command can also be used in other places, such as input, select, textarea, checkbox, radio and other form control elements.

v-on instruction

(Abbreviated as @) button events we can use v-on to monitor events. In this example, v-on (@) is used to monitor the button, and if it is clicked, it triggers the reverseLc method.

Filters

Vue.js allows you to customize filters, which are used for some common text formatting. The filter function accepts the value of the expression as the first parameter. The following example converts the first letter of the input string to uppercase:

v-if v-else-if v-else 指令

It's a simple if-else.
v-if:

v-else:

v-else-if:

v-show command

You can use the v-show command to display elements based on conditions

v-for instruction

Cycle instructions, cycle a data set,

display the attribute value of an object,

display key-value pairs,

display key-value pairs and add the serial number to

directly cycle integers

computed (computed attributes) and methods (methods)

We can use methods instead of computed. The effect is the same for both, but computed is based on its dependency cache, and the value will be re-valued only when the related dependency changes. With methods, when re-rendering, the function will always be called and executed again. It can be said that computed performance will be better, but if you don't want caching, you can use the methods attribute.

Monitor attribute watch

Style binding

We can set an object for v-bind:class to dynamically switch class:


multiple styles to render at the same time.



Use styles to write objects for rendering.

Note: A problem was found when writing styles to object rendering. If the active3 and active4 positions are reversed , Active4 is invalid (as follows).

In addition, we can also bind the calculated properties of the returned object here. This is a commonly used and powerful pattern:

we can pass an array to v-bind:class, an example is as follows:

we can also use a ternary expression to switch the class in the list:

Event handler, v-on instruction

v-on can receive a defined method to call.



In addition to directly binding to a method, you can also use inline JavaScript statements: