instruction

  • The essence is custom properties
  • Vue specifies that it starts with a V –

1.v-cloak

  • Prevent flicker during page loading
    {{msg}}

2.v-text

  • The V-text instruction is used to fill labels with data, similar to interpolation, but without the flash problem

  • If there is an HTML tag in the data, the HTML tag is output

  • Note: this is one-way binding, the value of the data object changes, the interpolation will change; However, changes in interpolation do not affect the value of the data object

    {{msg}}

3.v-html

  • The usage is similar to v-text but it can be used to fill HTML fragments into tags

  • There may be security issues, and V-HTML is generally only used for trusted content, never for user-submitted content

  • The difference between V-text and V-text is that V-text outputs plain text. The browser does not parse it in HTML, but V-HTML outputs it as AN HTML tag.

      

    <p>{{message}}</p> <! -- Output: <span> bound by double parentheses </span> --> &emsp; &emsp; <p v-text="text"></p> <! </span> --> </div> <script> &emsp; &emsp; let app = new Vue({ &emsp; &emsp; el: "#app", &emsp; &emsp; data: { &emsp; &emsp; &emsp; &emsp; Message: "<span> bind with double parentheses </span>", &emsp; &emsp; &emsp; &emsp; HTML: "<span> HTML tags are parsed at render time </span>", &emsp; &emsp; &emsp; &emsp; <span> </span>, &emsp; &emsp; }}); </script>Copy the code

4.v-pre

  • Displaying the raw information skips compilation

  • Skip the compilation of this element and its children.

  • Some static content does not need to be compiled with this command to speed up rendering

    <span v-pre>{{ this will not be compiled }}</span> <! {{this will not be compiled}} --> <span v-pre>{{MSG}}</span> <! {{MSG}} -->Copy the code

5.v-once

  • Perform a one-time interpolation [when data changes, the content of the interpolation does not continue to update]

    <! Hello vue.js --> <span v-once>{{MSG}}</span>Copy the code

6. V-model: two-way data binding

  • When the data changes, the view changes
  • The v-model is a directive that is limited to input, SELECT, Textarea, and Components
    {{msg}}
    When the content in the input box changes, the MSG on the page will be updated automatically

7.v-on

  • Used to bind events
  • The form is: V-on :click abbreviated @click;

The v-ON event function passes in parameters

{{num}}
Click 1, click 2

Event modifier

Key modifier

  • Keyboard events are sometimes used in projects, and when listening for keyboard events, we often need to check for detailed keystrokes. Vue allows you to add key modifiers for V-Ons when listening for keyboard events

    Common key modifiers.Enter => Enter. TAB => TAB. Delete (capture the Delete and backspace keys) => Delete. Esc => Cancel. Space => space .left => left. Right => right

Custom key modifier alias

  • You can customize key modifier aliases in Vue via config.keyCodes

    Keycode 116 (F5) has a predefined alias of F5, so pressing F5 in the text input box triggers the prompt method

8.v-bind

  • The V-bind directive is used to update HTML attributes in response

  • V-bind :href Can be abbreviated to :href;

Binding objects

  • We can give v-bind:class an object to dynamically switch classes.

  • Note: The V-bind :class directive can coexist with the normal class feature

    If an object is to be bound, the key is the corresponding class name and the value is the data in the corresponding data

    • Learning Vue
    • Learning Node
    • Learning the React
    Object syntax

    Var vm= new Vue({el:’. Box ‘, data:{isColor:true, isSize:true, activeColor:”red”, activeSize:”25px”,}})

The binding class

V-bind supports binding an array where classA and classB correspond to the data in data. ClassA and classB correspond to classA in data and classB <ul in data class="box" :class="[classA, ClassB] "> < li > learning Vue < / li > < li > learning Node < / li > < li > learning React < / li > < / ul > < script > var = new vm Vue ({el: 'box', Data :{classA: 'textColor', classB: 'textSize'}}) </script> <style>. } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style>Copy the code

The difference between bound objects and bound arrays

  • When you bind an object, the property of the object is the name of the class to be rendered and the property value of the object corresponds to the data in data
  • When you bind an array, it holds the data in data

The binding style

<div V-bind :style="styleObject"> Bind style object </div>' <! --> <div v-bind:style=" color: activeColor, fontSize: activeColor; FontSize,background:'red'}"> Inline </div> <! <div v-bind:style="[styleObj1, styleObj2]"></div> <script> new Vue({el: '#app', data: {styleObject: {color: 'green', fontSize: '30px', BACKGROUND :'red'}, activeColor: 'green', fontSize: {styleObject: {color: 'green', fontSize: '30px', BACKGROUND :'red'} "30px" }, styleObj1: { color: 'red' }, styleObj2: { fontSize: '30px' } </script>Copy the code

9. Application scenario of V-IF branch structure

  • 9.1- Multiple elements use conditional judgment to show or hide an element. Or multiple elements

  • 9.2- Switch between two views

    If flag is true, it is displayed; false, it is not displayed! 
    <div v-if="type === 'A'"> A </div> <! V - - v - else - if everything on the if - else - if said after v or v - if conditions and execution - > < div v - else - if = "type = = = 'B'" > B < / div > < div v - else - if = "type = = = 'C'" >  C </div> <! <div v-else> Not A/B/C </div>Copy the code

Difference between V-show and V-if

  • V-show is essentially the tag display set to None, which controls hiding
    • V-show compiles only once and controls CSS, whereas V-if destroys and creates all the time, so v-show performs better.
  • V-if dynamically adds or removes DOM elements from the DOM tree
    • The V-IF switch has a partial compile/unload process in which the internal event listeners and subcomponents are destroyed and rebuilt as appropriate

10. V-for cycle structure

  • The values in the array used for the loop can be objects or ordinary elements

    • {{ item.message }}

  • It is not recommended to use both V-if and V-for

  • When v-if is used with V-for, v-for has a higher priority than V-if.

    <! -- - traversal cycle structure v represents the object of value k represents the object's key I index - > < div v - if = 'v = = 13 v - for =' (v, k, I) in obj "> {{v + '-' '-' +, k + + i}}</div>Copy the code

  • The key role

    • Key to give each node a unique identity
    • The key’s main purpose is to update the virtual DOM efficiently