Vue gets DOM, data monitor, component, mix and slot

Time:2020-12-7

Vue gets DOM, data monitor, component, mix and slot

Note: “is the abbreviation of instruction” v-bind “,” @ “is the abbreviation of instruction” v-on “; and”. “” is modifier.

Vue gets DOM

Add a ref attribute to the tag: ref = my_ box”
Get: this$ refs.my_ box;

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    
    Click to display the text


    const app = new Vue({
        el:"#app",
        data:{},
        methods:{
            my_click: function(){
                let ele = this.$refs.my_box;
                console.log(ele);
                ele.innerText = "hello"
            }
        }
    })

Computed: computes the property, which contains the data to be processed

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    
        
            subject
            achievement
        
        
            Python
            
        
        
            Java
            
        
        
            Go
            
        
        
            Total score
            {{total}}
        
        
            average
            {{average}}
        










    


    const app = new Vue({
        el:"#app",
        data:{
            python:"",
            java:"",
            go:""
        },
        methods:{},
        computed:{
            total: function(){
                return this.python + this.java + this.go
            },
            average: function(){
                return this.total/3
            }
        }
    })

Data monitoring

Watch: unable to listen, you can add the deep attribute
deep:true : deep listening. Deep listening cannot be heard. You can use the $. Set() property to operate the value
$.set()

String listening: the old and new values are different.
Array: only the length change can be heard. The old and new values are the same. When changing the array value, use $set (array, index, value)
Object: can only listen to the change of value, must listen in depth: deep, add the key of the object must use: $set (array, key, value)

Note: there are holes in array monitoring

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    {{name}}
    
    {{hobby}}
    
    {{obj}}
    
    Click me to change the data


    const app = new Vue({
        el:"#app",
        data:{
            name:"eric",
            Hobby: ["playing games", "playing Doudou"],
            obj:{
                boy:"PDD",
                age:23
            }
        },
        methods:{
            my_click: function(){
                //Modify name data
                this.name = "bob";
                // this.hobby.push ("diving");
                // this.hobby [0] = diving;
                // app.$set( this.hobby , 0, "diving");
                // this.obj.age = 20;
                // this.obj ["sex"] = male;
                app.$set( this.obj "Sex", "male");
            }
        },
        watch: {
            name: {
                handler: function(val,oldVal){
                    console.log(val);
                    console.log(oldVal);
                }
            },
            hobby: {
                handler: function(val,oldVal){
                    //The old and new values are the same when changing the length of the array
                    console.log(val);
                    console.log(oldVal);
                },
                // deep: true
            },
            obj: {
                handler: function(val,oldVal){
                    console.log(val);
                    console.log(oldVal);
                },
                deep: true
            }
        }
    })

assembly

Reusable
Definition of global components: Vue.component (“myheader”,{})
Use of global components:

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    


    


    Vue.component("myheader",{
        template: '<div><h1>{{ title }}</h1></div>',
        // template: '<div><h1>Hello world!</h1></div>',
        Data() {// singleton mode of the object
            return{
                title: "HelloWorld!"
            }
        },
        methods:{}
    });
    const app = new Vue({
        el:"#app",
        data:{},
        methods:{}
    });
    const apps = new Vue({
        el:"#apps",
        data:{},
        methods:{}
    })

Definition of local component: components: {my_ com: my_ com_ config}
Use of local components:

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    


    let my_com_config = {
        Template: '< div > < H1 > local component < / H1 > < / div >'
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })

Parent child components:
Note: components recognize only one scope block

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    


    let child_config = {
        Template: '< div > < H2 > subcomponents < / H2 > < / div >'
    };
    let my_com_config = {
        Template: '< div > < H1 > parent component < / H1 > < child > < / child > < / div >',
        components: {
            child: child_config
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })

Communication between parent and child components:
Parent child communication (main operation at parent level)
Parent definition method:: Father_ say=”f_ say”
Child call method: props: [‘father_ say’]
Child usage method (directly called by template language): {father_ say}}

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    


    let child_config = {
        Template: '< div > < H2 > subcomponents < / H2 > < p > father_ say:{{father_ say}}</p></div>',
        props: ['father_say']
    };
    let my_com_config = {
        Template: '< div > < H1 > parent component < / H1 > < child: Father_ say="f_ say"></child></div>',
        components: {
            child: child_config
        },
        data(){
            return {
                F_ Say: "roll ~ ~"
            }
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })

Child parent communication (master operation at child level)
Subset definition method: @ click’my_ click’
Child submit event: this. $emit (“event name”, data)
Event submitted by parent binding child: @ event name = handled method
Parent processing method: Methods: {processing method: function (data) {data data processing}}
Parent usage method (directly called by template language): {say}}

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    


    let child_config = {
        template: "" +
            "<div>" +
            "< H2 > subcomponents < / H2 >"+
            "<button @click='my_ Click '> transfer data to the parent < / button > "+
            "</div>",
        methods: {
            my_click(){
                //Sub component submit event name
                this.$emit("son_ Say "," roll ~ ~)
            }
        }
    };
    let my_com_config = {
        template: '' +
            '<div>' +
            '< H1 > parent component < / H1 >'+
            '<child @son_say="my_son_say"></child>' +
            '<p>son_say:{{say}}</p>' +
            '</div>',
        components: {
            child: child_config
        },
        data(){
            return {
                say:""
            }
        },
        methods: {
            my_son_say: function(data){
                this.say = data
            }
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })

Non parent-child communication:
Define intermediate scheduler: let event = new Vue ()
The component that needs to communicate submits the event to the intermediate scheduler: event. $emit (“event name”, data)
The receiving component listens for events in the intermediate scheduler: event. $on (“event name”, function (data) {data operation (Note: this problem)})

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    







    let midlen = new Vue();
    let eric = {
        template: "" +
            "<div>" +
            "<h1>This is Eric</h1>" +
            "<button @click='my_ Click 'click' to notify 'quietly < / button > "+
            "</div>",
        methods: {
            my_click(){
                //Tell Bob to wait for me in the evening
                //Submit the event to Bob
                Midlen. $emit ("email", "dinner together in the evening")
            }
        }
    };
    let jing = {
        template: "" +
            "<div>" +
            "<h1>This is jing</h1>" +
            "< p > Eric and I said: {{Eric_ email }}</p>" +
            "</div>",
        data(){
            return {
                eric_email: ""
            }
        },
        mounted(){
            //Methods executed after component loading
            let that = this;
            midlen.$on("email", function(data){
                that.eric_email = data;
                // console.log(data);
            })
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            eric: eric,
            jing: jing
        }
    })

blend

In fact, it’s rarely used in the framework
Function: reuse common code blocks
minxins:[base]

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    Click to display the text
    Click to hide text
    prompt box
    look wyl and kjj


    const app = new Vue({
        el: "#app",
        data: {
            is_show:false
        },
        methods: {
            show_text: function(){
                this.is_show = true
            },
            hide_text: function(){
                this.is_show = false
            }
        }
    })
Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    
    


    let base = {
        data(){
            return {
                is_show:false
            };
        },
        methods: {
            show_text(){
                this.is_show = true
            },
            hide_text(){
                this.is_show = false
            }
        }
    };
    let com1 = {
        template:"" +
            "<div>" +
            "<button @click=\"show_ Text \ "> Click to display text < / button >"+
            "<button @click=\"hide_ Text \ "> Click hide text < / button >"+
            "<div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>" +
            "</div>",
        mixins: [base],
        data(){
            return {
                is_show: true
            }
        }
    };
    let com2 = {
        template:"" +
            "<div>" +
            "<button @mouseenter=\"show_ text\" @mouseleave=\"hide_ Text \ "> prompt box < / button >"+
            "<div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>" +
            "</div>",
        mixins: [base],
    };
    const app = new Vue({
        el:"#app",
        components: {
            com1: com1,
            com2: com2
        }
    })

slot

Function: realize the distribution of component content
slot:
Use the slot tag directly:
Name slot tag:
First add the name attribute to the slot
Add the slot attribute to the tag element:

Python

Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    
        This is jing
    
    
        This is wyl
    


    
        This is a component
        
    


    let com = {
        template: "#my_com"
    };
    const app = new Vue({
        el:"#app",
        components: {
            com: com
        }
    })
Title
    
    
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    



    
        Python
        This is jing
    
    
        Git
        This is wyl
    


    
        This is a component
        
        
    


    let com = {
        template: "#my_com"
    };
    const app = new Vue({
        el:"#app",
        components: {
            com: com
        }
    })