1. Basic usage of instructions

v-show

Usage: v - show = "expression | Boolean value", when the condition is false, v - show only on elements add inline style display: noneCopy the code

v-if

Usage: v - if = "expression | Boolean value", when the condition is false, containing elements, v - if instructions will be destroyed in the domCopy the code

v-else

Usage: V-else, must be used with V-ifCopy the code

v-else-if

Usage: v - else - if: Boolean value expression "|", can the v - if, v - else - if, v - else to form a chain callsCopy the code

V-for, loop traversal

Usage: v-for="(item,index) in items" : v-for="(item,index) in items" : v-for="(item,index) in items" : Use of v-for="(value,item,index) in items" key: this is equivalent to an identifier, which is very useful when the Differ algorithm looks for elementsCopy the code

V-on, event listener, syntax sugar @

V-on :click="btnClick" syntax sugar: @click="btnClick" parameter reference: . Top /. Prevent /. {keyCode | keyAlias} / native /. Once. - stop to prevent bubble < div @ click = "divClick" > "button <form> <form> <form type="submit" value=" submit" @click.prevent="submitClick"> </form> ---.{keyCode | keyAlias} <input type="text" @keyup="keyUp"> <input type="text" Native <nav-bar @click. Native =" nav-bar click "></nav-bar> --once <button @ click. Once = "" btn2CLick > button < / button >Copy the code

V-bind, attribute binding, syntax sugar:

<img :src="src"></img>
data(){
    return{
        scr:'https://vuejs.org/images/logo.svg'
    }
}
Copy the code

V-model, bidirectional binding

<input type="text" v-model="message"> <input type="text" v-model="message">Copy the code

v-text

<h2 v-text="message"></h2>Copy the code

v-html

HTML <h2 V-html ="message"></h2> message:"<span>hello vue.js</span>"Copy the code

v-slot

It's not easy to writeCopy the code

V-pre -> Skip the compilation of this element and its children

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

v-once

<h2 V-one >{{message}}</h2> with the V-once instruction, only one assignment can be performed. When data changes, the contents of the interpolation will not change.Copy the code

v-cloak

V-cloak is essentially the initial default for hiding Mustache [v-cloak]{display:none; } <h2 v-cloak>{{message}}</h2>Copy the code

Component communication

Parent component passes child component — define props in the child component to receive data

Props in two ways:

Method 1: string array, the string in the array is the name of the pass

Method 2: object, object can be set when the type of transfer, can also set the default value

$emit(‘ outgoing event ‘, parameter)

3. Sibling component — $bus

const eventBus = new Vue(); export eventBus; Component 1 Import eventBus from 'path' eventBus. Emit (' event name ', Locate (){eventBus.$on(' discover ', method name)} beforeDestroyed (){delete all elements from 'discover'. EventBus.$off(' event name ', method name)Copy the code

3. Access mode of parent and child components

Parent accessing children: children(fetch result is an array)/children(fetch result is an array)/children(fetch result is an array)/refs(reference reference)

Child components to access the parent component: parent/parent/parent/root

Option 1: Options/data

Data, props, propsData, Computed, Watch, Methods, filter

2. Options/lifecycle

BeforeCreate before creation created beforeMount mounted before mounting beforeUpdate updated beforeUpdate update activated deactivated BeforeDestroy Destroyed errorCapturedCopy the code