First, the basic grammar
1. Each Vue applications require realization by instantiating Vue
2. el parameter, which is the DOM element of id, we mean all of the following changes within the above specified elements, external elements are not affected
3. Data for defining properties
4. Methods for the function definition, the function may return values return.
5. {{}} for outputting object attributes and function return values
6. In addition to the data attributes, Vue also provides some examples of useful methods and instance attributes. They have a $ prefix to distinguish the area of the user-defined attribute.
Second, the template syntax:
1. Text: The most common form is to use data binding {{...}} (curly brackets) Interpolation text
2. html: instructions for using the v-html html code output
3. Properties: HTML attribute value shall be v-bind command
4. expression: Vue.js provides full support JavaScript expression. For example: digital plus, Miki, character reverse.
5. Command: v- instruction is prefixed with a special property, such as: v-if the instruction to decide whether to insert element according to the value of the expression seen p (true or false)
6. Parameter: parameter specifies a colon after the instruction. For example: href is a parameter, the command informing v-bind href attribute value of the expression url element binding; v-on instruction, which is used to monitor events DOM
7. modifier: modifier based on periods to indicate special suffix used to indicate an instruction should be bound in a special way. For example, .prevent modifier tells v-on instruction for event-triggered calls event.preventDefault () :
8. The user input: the input box in the input we can use the two-way data binding command v-model;
v-model is used in the instruction input, select, textarea, checkbox, radio and other form control element to create a two-way data binding, according to the value on the form, automatically update the value of the binding element.
Event button we can use the v-on monitor events and respond to user input.
9. Filter: Vue.js allows you to customize the filter, is used as a common text formatting. A "pipe symbol" indicated in the following format:
<! - the two braces -> {{Message | capitalize}} <! - the v-bind command -> < div v-bind: ID = "rawId | formatid" > </ div >
Filter function takes as an expression value of the first parameter. For example: a string to upper case first letter input;
Filters in series: {{ Message | filterA ( 'arg1' , arg2 ) }}, where, message is the first parameter, the string 'arg1' pass filter as the second argument, the value of the expression arg2 It will be evaluated and then passed as the third parameter filter.
10. Abbreviations: Vue.js provides particular abbreviated two most commonly used instructions:
<! - complete syntax -> < A V-the bind: the href = "URL" > </ A > <! - Abbreviations -> < A : the href = "URL" > </ A > <! - complete syntax -> < A V-ON: the Click = "doSomething" > </ A > <-! abbreviations -> < A @click = "doSomething" > </ A >
Three, vue.js conditional and loop:
1. Analyzing conditions: v-if, v-else, v-else-if, v-show
Using v-if condition determination instruction; v-if the instruction to decide whether to insert element according to the value of the expression seen p (true or false)
Add a "else" block with v-else instruction to the v-if
v-else-if added in 2.1.0, as the name implies, it is used as the v-if else-if blocks. The chain can be used more than once:
We can also use the v-show command to display elements according to the conditions: