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

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

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

Vue get DOM

Add ref attribute to tag: ref = "my" box "
Get: this. $refs. My "box;

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div ref="my_box"></div>
    <button v-on:click="my_click">Click to display text</button>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{},
        methods:{
            my_click: function(){
                let ele = this.$refs.my_box;
                console.log(ele);
                ele.innerText = "hello"
            }
        }
    })
</script>
</body>
</html>

computed: the calculated attribute is used to put the data to be processed

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>Subject</th>
            <th>achievement</th>
        </tr>
        <tr>
            <td>Python</td>
            <td><input type="text" v-model.number="python"></td>
        </tr>
        <tr>
            <td>Java</td>
            <td><input type="text" v-model.number="java"></td>
        </tr>
        <tr>
            <td>Go</td>
            <td><input type="text" v-model.number="go"></td>
        </tr>
        <tr>
            <td>Total score</td>
            <td>{{total}}</td>
        </tr>
        <tr>
            <td>Average</td>
            <td>{{average}}</td>
        </tr>
<!-- Tedious method -->
<!-- <tr> -->
<!-- <td>Total score</td> -->
<!-- <td>{{python + java + go}}</td> -->
<!-- </tr>  -->
<!-- <tr> -->
<!-- <td>Average</td> -->
<!-- <td>{{total/3}}</td> -->
<!-- </tr> -->

    </table>
</div>
<script>
    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
            }
        }
    })
</script>
</body>
</html>

Data monitoring

watch: you can add the deep attribute if you cannot listen
deep:true: deep listening. If deep listening is not available, you can use the $. set() property to operate the value
$.set()

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

Note: there are holes in array monitoring

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    {{name}}
    <br>
    {{hobby}}
    <br>
    {{obj}}
    <br>
    <button v-on:click="my_click">Click me to change the data</button>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"eric",
            hobby:["Play games","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){
                    // When changing the length of an array, the old and new values are the same
                    console.log(val);
                    console.log(oldVal);
                },
                // deep: true
            },
            obj: {
                handler: function(val,oldVal){
                    console.log(val);
                    console.log(oldVal);
                },
                deep: true
            }
        }
    })
</script>
</body>
</html>

assembly

Reusable
Definition of global component: Vue.component("myheader", {})
Use of global components: < myheader > < myheader >

<!-- Global registration component -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <myheader></myheader>
</div>
<div id="apps">
    <myheader></myheader>
</div>
<script>
    Vue.component("myheader",{
        template: '<div><h1>{{ title }}</h1></div>',
        // template: '<div><h1>Hello world!</h1></div>',
        data(){  // Object's monomer mode
            return{
                title: "HelloWorld!"
            }
        },
        methods:{}
    });
    const app = new Vue({
        el:"#app",
        data:{},
        methods:{}
    });
    const apps = new Vue({
        el:"#apps",
        data:{},
        methods:{}
    })
</script>
</body>
</html>

Definition of a local component: components: {my ﹣ com: my ﹣ com ﹣ config}
Use of local components: < My com > < My com >

<!-- Local registration component -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let my_com_config = {
        template: '<div><h1>Local components</h1></div>'
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })
</script>
</body>
</html>

Parent child component:
Note: the component recognizes only one scope block

<!-- The use of parent-child components -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let child_config = {
        template: '<div><h2>Sub components</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
        }
    })
</script>
</body>
</html>

Parent child communication:
Parent child communication (the main operation is at the parent level):
Parent definition method:: father_say = "f_say"
Child call method: props: ['family_say ']
Method used by child (directly called by template language): {{family {say}}}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let child_config = {
        template: '<div><h2>Sub components</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: "rolling~~"
            }
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })
</script>
</body>
</html>

Child parent communication (primary operation at child level):
Subset definition method: @ Click = 'my ABCD click'
Child submit event: this.$emit("event name", data)
Event submitted by parent binding child: @ event name = method processed
Parent processing method: methods: {processing method: function(data){data processing}}}
Parent method (called directly by template language): {{say}}}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let child_config = {
        template: "" +
            "<div>" +
            "<h2>Sub components</h2>" +
            "<button @click='my_click'>Transfer data to parent</button>" +
            "</div>",
        methods: {
            my_click(){
                // Subcomponent submit event name
                this.$emit("son_say","rolling~~")
            }
        }
    };
    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
        }
    })
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
<eric></eric>
<jing></jing>
</div>
<script>
    let midlen = new Vue();
    let eric = {
        template: "" +
            "<div>" +
            "<h1>This is Eric</h1>" +
            "<button @click='my_click'>Click notice to be quiet</button>" +
            "</div>",
        methods: {
            my_click(){
                // Tell bob to wait for me in the evening
                // Submit events to bob
                midlen.$emit("email","Dinner together in the evening")
            }
        }
    };
    let jing = {
        template: "" +
            "<div>" +
            "<h1>This is jing</h1>" +
            "<p>eric Say to me:{{ eric_email }}</p>" +
            "</div>",
        data(){
            return {
                eric_email: ""
            }
        },
        mounted(){
            // Method to execute 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
        }
    })
</script>
</body>
</html>

blend

In fact, very little is used in the framework
Function: reuse common code block
minxins:[base]

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click=\"show_text\">Click to display text</button>
    <button @click=\"hide_text\">Click to hide text</button>
    <button @mouseenter="show_text" @mouseleave="hide_text">prompt box</button>
    <div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>
</div>
<script>
    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
            }
        }
    })
</script>
</body>
</html>
<!-- Mixed example -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <com1></com1>
    <com2></com2>
</div>
<script>
    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 to 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
        }
    })
</script>
</body>
</html>

slot

Function: realize the distribution of component content
slot:
Use the slot label directly: < slot > < slot >
Name slot label:
First, add the name attribute to the slot: < slot name = "title" > < slot >
Add slot attribute to tag element: < H3 slot = "title" > Python</h3>

<!-- Unnamed slot Label -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <com>
        <slot>This is jing</slot>
    </com>
    <com>
        <slot>This is wyl</slot>
    </com>
</div>
<template id="my_com">
    <div>
        <h1>This is a component</h1>
        <slot></slot>
    </div>
</template>
<script>
    let com = {
        template: "#my_com"
    };
    const app = new Vue({
        el:"#app",
        components: {
            com: com
        }
    })
</script>
</body>
</html>
<!-- Named slot Label -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <com>
        <h3 slot="title">Python</h3>
        <p slot="brief">This is jing</p>
    </com>
    <com>
        <h3 slot="title">Git</h3>
        <p slot="brief">This is wyl</p>
    </com>
</div>
<template id="my_com">
    <div>
        <h1>This is a component</h1>
        <slot name="title"></slot>
        <slot name="brief"></slot>
    </div>
</template>
<script>
    let com = {
        template: "#my_com"
    };
    const app = new Vue({
        el:"#app",
        components: {
            com: com
        }
    })
</script>
</body>
</html>
Published 85 original articles, won praise 8, visited 1480
Private letter follow

Tags: Vue npm Python Attribute

Posted on Fri, 13 Mar 2020 07:25:08 -0400 by johnsworld