1.v-bind

(1). Problem {{}} cannot be used if the attribute value of the element may automatically change with the variable.

A. standard < element V-bind: attribute name = “js expression “>

Principle of b.

New Vue() automatically evaluates the JS expression in =”” whenever it finds v-bind while scanning the page and sets the result to the property value c of the current property. Shorthand < elements: the attribute name = “js expression” > d. emphasis If the attribute former add: after = “” don’t need to write in the {{}},” “is served for the role of the {{}} instead! The original {{}} can write whatever,”” write whatever! As long as the attribute value of the element may automatically change with the variable, use: attribute name =” JS expression “to bind, not {{}}.

2. V-show (controls the show and hide of an element)

  1. Requirements: Control the show and hide of an element;
  2. How to:< element v-show=" return js expression of type bool ">

Principle:

When a.new Vue() scans v-show, it will automatically calculate the js expression value after = and get a bool; B. If the result is true, the current element does nothing and is displayed by default! C. If the result is false, the current element is automatically added display: None, hiddenCopy the code

3. V-if and V-else (display either of two elements)

  1. Requirement: choose one of two elements to display
  2. How to:< element 1 v-if=" return bool expression "> < element 2 v-else>
  3. Stressed: Dr. – if and v – else tourmaline next to two elements, in the middle can’t insert any other element | b.v – after the else can’t add any =, and in the program if the else else after without expression
  4. Principle: a.n ew Vue () scanning to v – if, after the first automatic computing = the value of the expression of | b. If v – if the value of the expression is true, then keep 1 v – if the element, delete 2 | c v – where else. If the value of the expression after v-if is false, element 1 where v-if is deleted and element 2 where v-else is preserved
  5. V – show and v – if the difference: Dr. – show through display: none of the method of controlling the show hidden, because they don’t modify the DOM tree, so the efficiency of a slightly higher | b.v – if control by way of removing elements show hidden, so want to modify the DOM tree, slightly lower efficiency

4. V-else -if(select one of multiple elements to display)

  1. Requirement: multiple elements to select one display
  2. How to:< element 1 v-if=" return bool expression "> < element 2 v-else-if=" return bool expression ">.< element n v-else>
  3. Emphasize:aV-if, V-else -if, and v-else elementsMust be right next toCan’t insert any other element | in the centerbDo not add any = after the. V -else, just like if else in the program does not add the else expression
  4. Principle:
A. new vue(), if encountered v-if, first execute the expression after =, get bool result b. If the value of the v-if expression returns true, the V-if is retained and the remaining V-else -if and V-else elements c are deleted. If the value of the V-if expression returns false, the v-else-if expression continues successively, and as soon as a V-else -if expression is encountered with a value of true, only the V-else -if element is retained, and the remaining V-if V-else -if and V-else D are deleted. If both the previous v-if and v-else-if expressions are false, the last V-else element is retained and the remaining V-if and V-else -if elements are deletedCopy the code

5.v-for

Repeatedly generate multiple elements of the same structure based on the contents of the array

  1. Requirement: Repeatedly generate multiple elements of the same structure based on the contents of the array
  2. How to:< element v-for="(value, I) of array/object ">
  3. Emphasis on
A. To repeatedly generate elements, just write a template can be! B. v-for must be written on the iterated element, not the parent of the iterated element. C. V-for can be used to iterate over groups of numbers as well as objects -- for in and for of are unifiedCopy the code

Principle 4.

A. new Vue() scans v-for and automatically traverses the array or object B after of. Each traversal of an element in an array or a member of an object automatically creates a new copy c of the current HTML element. Two variables of V-for, value and I, can be used to dynamically bind content on iterated elements or their children, where :value automatically gets the element value or attribute value currently being iterated over, and I automatically gets the subscript of the current array element or the attribute of the object memberCopy the code

5. Note: When using V-for, you must also bind a :key attribute

A. problem: because v - for each repeatedly generated between elements in addition to the content, single element is five difference, even if in the future to know change the value of an element in an array, because v - for cannot distinguish repeatedly to generate multiple elements, cannot be accurately update only one element, v - for only the stupid way, will be in charge of v - for all the elements to life Do it again.-- Very inefficient B. If each element in the array changes, V-for can find a page element with the unique identifier. Just update one page and leave the rest unchanged. C. how: ` < repeatedly generated elements v - for = "(value, subscript of an array or object" : the key = "subscript" > `Copy the code

6.V-for can count!

A.< element v-for=” I of an integer “:key=” I “>

B. principle:

1).V-for starts from 1, increments by 1 each time, and ends at the integer value given after of. For (var I =1; I <= an integer; i++){... } 2). Each loop creates a new copy of the current element 3). Variable I catches each new value after +1 and can be used for binding syntax in element contentCopy the code

6. V-on: event binding

How: (1).

A. Criteria :< element V-on: event name =" handler name (argument value)"> b. Short: 1).< element @event name =" handler name (argument value)"> 2). If the handler does not require an argument value, () can be omitted :< element @event name =" handler name "> c. All event handlers needed by a page should be defined centrally in a Methods objectCopy the code

(2). How to get event object in Vue :(how to get mouse click position in Vue)

Methods :{// create event object handler (e){// create event object handler (e){// create event object handler (e){// create event object handler (e)}} b < element @event name =" handler (argument value)"> methods:{handler (parameter 1,e){// The argument value can be passed in, but e cannot be obtained. }} 2). Error 2: < element @event name =" handler (argument value)"> methods:{// the argument value is in the first place, but the parameter definition is in the second place! Not in the right place! Handler function (e, parameter 1){}} 3). Correct: Manually replace e with the $event keyword provided by vUE. Manual parameter I :$event:vue automatically encapsulates the DOM event object to save a special keyword, can be used to pass parameters! Ii: how to: $event ($event, parameter 1){$event ($event, parameter 1)}} Note: there is no fixed order in the position of the $event and argument values in the handler, but it must be in the same order as the parameter columns in the methdos handler definition!Copy the code

7. V-html (bound variable value is a piece of HTML code)

  1. Problem: If the variable value to be bound is a piece of HTML code, using the {{}} binding leaves the HTML code as it is and displays it directly on the page without being compiled
  2. Solution: In the future, you must use v-HTML directives instead of {{}} whenever the bound variable value is a piece of HTML code
  3. How to:< element V-html =" variable or JS expression "> </ element >
  4. Pros: V-HTML gives the HTML snippet of a variable to the browser to parse into something readable before replacing it with the content of an element

8. V-cloak and V-text (to prevent users from briefly seeing {{}})

  1. Problem: When the network speed is slow, users may briefly see the {{}} syntax on the page if the JS code has not been downloaded and executed
  2. Solution :2 ways:
2).atv = 1).atV = 1).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2).atV = 2 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # As a result, all v-cloak elements are hidden until new Vue() is loaded and the V-cloak attribute is removed.Copy the code
B.v - text instructions: 1). Principle: since don't want to see {{}}, you can use a special instruction instead of {{}}, function also the same! Since the instructions are written in the attributes of the element, it is impossible for the user to see the attributes of the element even if they are not loaded! I.< element v-text=" variable or JS expression "> </ element > ii. Principle: When the content of v-text is calculated, the result of execution will automatically replace the content of the element. Problem: If the content of an element is concatenated with fixed content and variable variations, you are forced to use template strings! < element v-text=" 'template string' > </ element > 4). Shorthand: If v-text is followed by a template string, omit the "" and leave the template string in the back quotes. < element v-text= 'template string' ></ element >Copy the code

9. V-once (Binding is only modified once when it is first loaded)

  1. Problem: Some bindings are changed only once the first time they are loaded. If an element does not need to be updated, but occupies a position in the virtual DOM tree, it will affect the traversal speed of the virtual DOM tree!
  2. Optimizations: If only displayed at first load and later modified elsewhere, binding here will not be affected, availablev-onceThe binding
  3. How to:< element v-once>{{variable or js expression}}</ element >
  4. How it works: The binding syntax content of an element is replaced only when the page is first rendered, but the current element is not added to the virtual DOM tree.Results:It’s only loaded once, and it doesn’t change after that

10. V-pre ({{}} does not want to be compiled by VUE)

1. Extreme problem: if the content body of an element also happens to contain {{}}, but does not want to be compiled by VUE, but displays it as is! 2. < elements v - pre >.. {{xxxx}}... < / element >Copy the code