VUE2 basic knowledge learning notes

VUE2

Template syntax

The difference syntax is used in the tag body, and the attribute is: (v-bind:) that is, the instruction syntax

[external link image transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-g8cocv8f-1662560470884) (C: \ users \ administrator \ appdata \ roaming \ typora \ typera user images \ image-2022082523807795. PNG)]

Syntax in Vue instantiation

Two methods of data binding

  1. v-bind single data binding

    Abbreviation: value = "name"

  2. v-model binomial data binding

It can only be applied to form class elements (input class with value)

Abbreviation: v-model = "name"

Two methods of binding container el

  1. Specify "new" at the beginning

    new vue({
        el:"#root",
        data:{}
    })
    
  2. I didn't know at first, and then I added

    const x = new vue({
        data:{}
    })
    x.$mount("#root")
    

Two ways to write data

  1. Object type (I won't talk about it)

  2. Functional (this must be used when designing components)

    data:function(){//Cannot use arrow function
        return{
            name:"sss"
        }//The return value is the function I need
    }
    
    //Can be abbreviated
    data(){//Cannot use arrow function
        return{
            name:"sss"
        }//The return value is the function I need
    }
    

Methods in Vue instances

new vue({
    el:"#root",
    data:{},
    
    methods:{
        xxx(e){
            ...
        }
    }
})
  • this in methods refers to vm or component instance object

Data proxy (Object.defineProperty())

let num = 18;
let person={
    name:"55",
    sex:"male"
}


//Data agent prototype
Object.defineProperty(person,"age",{
//    value = 18,
    //enumerable:false,
    //configurable:false,
    //writable:false,
    //The above three default values are all false
    
    get(){
        log(...)
            return num  //Take this variable as a value
    },
    
    set(value){
        log(...)
        num=value   //!!!!!!! There is no such step, but it is impossible to bind them together and change their values
    }
})

Instruction grammar

Two methods of data binding

  1. v-bind single data binding

    Abbreviation: value = "name"

  2. v-model binomial data binding

It can only be applied to form class elements (input class with value)

Abbreviation: v-model = "name"

event processing

####1. Click event binding

<button v-on:click="show">Click me</button>

Abbreviation:

<button @click="show">Click me</button>

If the function needs to pass parameters

<button @click="show($event,66)">Click me</button>
//$event stands for e. if you want to use = >, just take a place
			 If not=>Can be omitted

2. Event modifier

  • Can be written continuously
    • Example 1: @ click.stop.prevent = "show"
    • Example 2: check the key combination: @ keyup.ctrl.y = "show"
//Block default behavior (common)
<button @click.prevent="show($event,66)">Click me</button>

//Prevent bubbling (common)
<button @click.stop="show($event,66)">Click me</button>

//Event is triggered only once (one-time event) (common)
<button @click.once="show($event,66)">Click me</button>

//Event capture mode
<button @click.capture="show($event,66)">Click me</button>

//Only e.target is the element of the current operation can trigger the event
<button @click.self="show($event,66)">Click me</button>

//The default behavior of the event is to execute immediately without waiting for the event callback to complete
<button @click.passive="show($event,66)">Click me</button>

####3. Scroll bar event binding

<div @scroll="show">Get rid of me</div>

####4. Mouse wheel event binding

<div @wheel="show">Get rid of me</div>

####5. Keyboard event binding

<input @keyup="show">input</input>
<input @keydown="show">input</input>


//Press a key to trigger (alias)
<input @keyup.enter="show">input</input>

Monitoring properties

//The first is the writing method of monitoring attributes (applicable to determining what to monitor at the beginning)
const vm = new vue({
    el:"#root",
    data:{},
    methods:{},
    
    watch:{
        xxx:{
            deep:true,//Enable multi-level monitoring of all attributes
            immediate:false,
            handler(newvalue,oldvalue){
                log...
            }
                
        "num.a": {}//Monitor the change of an attribute of multi-level structure
        }
    }
        
})
    
//The second way to write monitoring attributes (applicable to those who are not sure what to monitor at the beginning)
    vm.$watch("xxx",{
    	immediate:false,
    	handler(newvalue,oldvalue){
    		...
	}
})

###Monitoring attribute abbreviation

(it can be abbreviated without other configuration items, only handler)

watch:{
    isHot(newValue,oldValue){
        ...
    }
}
    
//Second
    vm.$watch("...",function(newValue,oldValue){
        ...
    })

conditional rendering

"Boolean / expression that can be converted to Boolean"

1. v-show=""

2. v-if=""

v-else-if=""

v-else>

  • And no interruption is allowed
  • It can be used with template without affecting the final structure

List rendering

v-for="(value,index in xxx)"

  • list
  • object
  • character string
  • Specified number of cycles

"key":

Interview question: what is the role of key in vue?

Vue monitoring principle

Add monitorable data after

Vue.set()

vm.$set()


Built in instructions (important)

###1. v-text

Structure resolution is not supported, about equal to innerText

2. v-html

Support structure resolution, about equal to innerHtml

3. v-cloak

  • Is a special property with no value

  • It will be deleted when vue takes over

  • Can cooperate with css

    [v-cloak]{
        display:none
    }
    

4. v-once

  • After the first dynamic rendering, it is regarded as static data and will not change

5. v-pre

  • vue does not compile
  • Skip code without compilation to improve performance

6. User defined instructions

  • Customize this window in the command

  • When will custom instructions be called?

    1. When the instruction and element are successfully bound (at the beginning)
    2. When the template of the instruction is parsed again
  • Functional formula

    • new Vue({
          el:"#root",
          data:{
              name:"hhh",
              n:1
          },
          directives:{
              big(ele,bingding){
                  ele.innerText = bingding.value*10
              }
          }
      })	
      
  • Object type

    • new Vue({
          el:"#root",
          data:{
              name:"hhh",
              n:1
          },
          directives:{
              big:{
                  bind(ele,binding){
                      //Element binding
                  },
                  inserted(ele,binding){
              //When the element is placed on the page
          },
          update(ele,binding){
              //When binding element is updated
          }
          
              }
          }
      })	
      
  • summary

Life cycle (important)

1. Illustration

  • summary

Important properties of components

render function

  • Used in scaffolding, because the introduced vue is a compact version without a template compiler

  • render:h=>h(App)
    
    
    //Replace the following two lines
    //<template><App></App></template>
    //components:{App}
    

Modify scaffold default configuration

  • Configuration of entry file and syntax check
  • You can modify the vue.config.js file by querying the official document

ref attribute

  • Used to get the element as a substitute for id

  • What you get with html elements is real dom elements, and what you get with component elements is component instance objects (vc)

  • How to use: mark first, then get

    • <h1 ref="title">
          Hello
      </h1>
      
    • console.log(this.$refs.title)
      

props configuration

  • Function: let components accept external data

  • use:

    • Transfer data

      <SchoolMsg name="xxx" age="18"></SchoolMsg>
      
      //If you want to pass a numeric type, add a colon
      <SchoolMsg name="xxx" :age:"18"></SchoolMsg>
      
    • There are three ways to receive data:

        1. Simply accept without limitation

          methods:{},
          props:["name","age"]
          
        1. Restriction type:

          props:{
              name:String,
              age:Number
          }
          
        1. Complete writing, limit type, limit necessity, specify default value

          props:{
              name:{
                  type:String,
                  requirea:true
              },
              age:{
                  type:Number,
                  default:99
              }
          }
          
  • Note: the props property is read-only, and vue will detect it and won't let you modify it. If you want to modify, you can back up the data to be modified to data, and then modify the data of data

    //backups
    data(){
        return{
            myName:this.name
        }
    }
    

mixin

  • Essence: in fact, it is code reuse, which extracts the common code configuration of multiple components into a mixed object

  • usage method:

    • Definition: blending

      • Create a new mixin.js

      • Write common configuration

        export const mixin = {
            data(){},
            methods:{}
        }
        
        export const mixin2 = {
            data(){},
            methods:{}
        }
        
    • Introduction and use

      • Global blending:

        import {mixin,mixin2} from './xxx/mixin.js'
        Vue.mixin(xxx)
        
      • Local mixing:

        import {mixin} from './xxx/mixin.js'
        mixins:[xxx]
        

vue plug-in (Plugins.js)

  • Essence: an object containing the install method. The first parameter is Vue, and the second parameter is the data passed by the plug-in user

    export default{
        install(Vue){
            ...
            //1. Add a global filter
            Vue.filter("Filter name",function(val){
                return val.xxxxxx
            })
            
           //2. Add global instruction
            Vue.derective("Instruction name",{
                bind(ele,bingding){
                    ...
                    ele.value = bingding.value
                },
                inserted(ele,binding){
                    ...
                },
                    updata(ele,binding){
                        ...
                    ele.value = bingding.value
                    }
            })
            
            //3. Configure global mixing
            Vue.mixin({
                //Example:
                data(){
                return{
                    ...
                }
            }
            })
                      
            //4. Add instance method
            Vue.prototype.$myMethods=function(){...}
            Vue.prototype.$myPrototype = xxx
                                                		Vue.prototype.hello=()=>{alert("555")}
        }
    }
    
  • use:

    import Plugins from './.../Plugins.js'
    Vue.use(Plug in name)
    

scoped

  • Function: prevent multi component class name conflicts

  • use:

    <style scoped>....</style>
    

Component custom event (for child to parent)

binding

  • The first @ / v-on method

    <student @zidingyi="demo(This is the function you want to callback)"/>
    
    methods:{
    	demo(name){
    		console.log("I received some data:" +name)
    	}
    }
    

    student component

    //< button @ Click = "chufa" > Click to trigger custom events < / button >
    methods:{
        chufa(){
            this.$emit("zidingyi",this.name)//this.name is the parameter I want to pass. You can pass more than one parameter to pass from child to parent
        }
    }
    
  • The second method is ref

    <student ref="student"/>
    
    mounted(){
        this.$refs.student.$on("zidingyi",this.demo)
        //this.$refs.student.$once("zidingyi",this.demo)
        
        //this. The demo is either configured in the parent component or called back directly to use the arrow function, otherwise there will be problems with this pointing (pointing to emit his component)
    }
    

    student component

    //< button @ Click = "chufa" > Click to trigger custom events < / button >
    methods:{
        chufa(){
            this.$emit("zidingyi",this.name)//this.name is the parameter I want to pass. You can pass more than one parameter to pass from child to parent
        }
    }
    

Unbind

jiebang(){
    this.$off("zidingyi")//Unbinding zidingyi
    this.$off(["zidingyi","zidingyi"])//Unbind two
    this.$off()//Unbind all
    this.$destroy()//Destroy this component and unbind all related custom events
}

Component binding native dom events

The native modifier is required, otherwise the component will regard it as a custom event

<demo @click.native="show"></demo>

Component global event bus (important)

  • Applicable to communication between any components

  • Installing the global time bus

    new Vue({
        ...
        beforeCreate(){
        	Vue.prototype.$bus=this
    	},
        ...
    })
    
  • Use event bus

    1. Accept data. If a wants to receive data, a binds a custom event to bus

      methods:{
          demo(data){
              console.log("I got it."+data)
          }
      },
         mounted(){
             this.$bus.$on("zidingyi",this.demo)
         }
      
    2. Components that provide data, trigger custom events, and transmit data to be sent at the same time

      //Writable in a function
      this.$bus.$emit("zidingyi",Data to be transmitted xxx)
      
  • Unbind event

    • It is better to unbind the event with the beforeCreate hook in the component a bound with the custom event

      ...
      beforeCreate(){
          this.$bus.$off("zidingyi")
      }
      ...
      

Message subscription and Publication (PubSub JS)

  • Installation: NPM I PubSub JS

  • use:

    1. Receive data (subscribe to messages). If a wants to receive data, a subscribes to a message for bus
    import pubsub from 'pubsub-js'
    
    methods:{
        demo(msgName,data){
            console.log("I got it."+data)
        }
    },
       mounted(){
           	this.pubId=pubsub.subscribe("hello",this.demo)
           this.pubId=pubsub.subscribe("hello",(msgName,data)=>{
               ...
           })
       }
    
    1. Components that provide data, trigger custom events, and transmit data to be sent at the same time

      import pubsub from 'pubsub-js'
      //Writable in a function
      pubsub.publish("hello",Data to be transmitted xxx)
      
    2. Unsubscribe

      It is better to unbind the event with the beforeCreate hook in component a that has subscribed to the message

           ...
           beforeCreate(){
               pubsub.unsubscribe(this.pubId)
           }
           ...
      

$nextTick hook (important)

  • Syntax:

    this.$nextTick(function(){
        ...
    })
    
  • Function: perform callback after the next dom update

  • When to use: if you want to do some operations based on the updated new dom after changing the data, you can perform those operations in this hook

Tags: Javascript Vue.js

Posted by SetToLoki on Thu, 08 Sep 2022 03:05:44 +0930