Basic content of Vue

Time:2020-4-21

1. Vue life cycle:
The process from creation to destruction of Vue instances is the declaration cycle. From creating instances, initializing data, compiling templates, mounting DOM (- > rendering), updating (- > rendering, unloading and other processes, we call it the life cycle of Vue.

There are eight stages as follows:
Before / after creation, before / after loading, before / after updating, before / after destruction.

  • beforeCreate: you can add a loading event here, which will be triggered when the instance is loaded
  • created: when the initialization is completed, the event is written here. If the loading event is ended here, the asynchronous request is also suitable to be called here.
  • beforeMount
  • mounted: Mount element, get to DOM node.
  • beforeUpdate
  • updated: if the data is processed uniformly, write the corresponding function here.
  • beforeDestroy: you can make a confirmation box to confirm the stop event.
  • destroyed

2. The role of Vue life cycle:
There are many event hooks in its life cycle, which makes it easier to form good logic when controlling the whole process of Vue instance.

3. In which period is DOM rendering completed
DOM rendering is done in mounted.

4. Differences between v-show and V-IF:
V-show is CSS switch, V-IF is complete destruction and re creation;
V-show is used when frequent switching is used, and V-IF is less used when running;
When the value of V-IF is false, no HTML tag will be generated. When the value of v-show is false, the HTML element still exists, only the display in CSS shows or hides.

5. Instructions commonly used in development:
·V-model: it is generally used in form input to realize bidirectional binding of form control and data;
·V-html: innerHTML for updating elements
·V-IF and v-show: conditional rendering
·V-on: Click: it can be abbreviated to @ click, @ to bind an event.
·V-for: render elements or templates multiple times based on source data quickly
·V-bind: when the value of an expression changes, it will affect the DOM in a reactive way.

V-bind: title = "MSG" abbreviation:: title = "MSG"

6. Array usage of bound class:
·Object method:v-bind:class="{ active: isActive, 'text-danger': hasError }"
When isactive and haserror are true, active and text danger styles are added to the class.

·Array method:<div v-bind:class="[activeClass, errorClass]"></div>

·Binding inline style:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

7. Value communication between components:
<1> Pass value from parent component to child component: use props

<template>
    <child :msg="message"></child>
</template>

<script>
import child from './child.vue';
export default{
    components:{
        child
    },
    data(){
        return{
            message: 'father message';
        }
    }
}
</script>
<template>
    <div>{{ msg }}</div>
</template>

<script>
export default{
    props:{
        msg:{
            type: String,
            required: true
        }
    }
}
</script>

<2> Child components communicate with parent components:
The parent component passes the event method to the child component. The child component triggers the event through $emit, and the callback is sent to the parent component

<template>
    <child @msgFunc="func"></child>
</template>

<script>
import child from './child.vue';
export default{
    components:{
        child
    },
    methods:{
        func(msg){
            console.log(msg);
        }
    }
}
</script>
<template>
    < button @ Click = "handleclick" > Click me < / button >
</template>

<script>
export default{
    props:{
        msg:{
            type:String,
            required: true
        }
    },
    methods:{
        handleClick(){
            this.$emit('msgFunc');
        }
    }
}
</script>

<3> Communication between brother components:
You can use a Vue instance bus as a medium to introduce bus into the communication brother components, and then call bus event trigger and monitor respectively to realize communication and parameter transfer

//Bus.js
import Vue from 'vue'  
export default new Vue()
<template>
    < button @ Click = "tobus" > pass to brother component < / button >
</template>

<script>
import  Bus from "../common/js/bus.js";
export default{
    methods:{
        toBus(){
            Bus. $emit ('on ','from brother component');
        }
    }
}
</script>
import Bus from "../common/js/bus.js";
export default{
    data(){
        return {
            message: ''
        }
    },
    mounted:{
        Bus.$on('on',(msg)=>{
            this.message = msg
        })
    }
}

8. Route jump mode:Router link tags are rendered as < a > tags

<router-link to="/about">About</router-link>

9.MVVM:Model-View-viewModel
·The model represents the data model, and the business logic of data modification and operation can also be defined in the model;
·View represents the UI component, which is responsible for transforming the data model into UI presentation;
·ViewModel listens for data model changes, controls view behavior, and handles user interactions. It is equivalent to an object that synchronizes view and model, connecting model and view.

10. Computed and watch:
<1>Computed:

·Computed is a calculation attribute, more scenarios for calculating values
·The computed value will be cached after the getter is executed. Only after the attribute value it depends on changes, the corresponding getter will be called again to calculate the next time the computed value is acquired
·Computed is applicable to the calculation scenario of comparing consumption performance

<2>Watch:

·It is more of a function of observation, similar to the listening callback of some data. It is used to observe the values of props, $emit or this component. When the data changes, the callback will be executed for subsequent operations
·No caching, the value will not change when the page is re rendered

<3> Usage:

1. When we want to do numerical calculation and rely on other data, we design this data as computed
2. If you need to do something when a certain data changes, use watch to observe the data change

11.

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]