Vue组件进阶 - 飞行的猪哼哼

公告

一：VUE的基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <ul>
            <li v-for='book in books'>书名:{{ book.btitle }}</li>
        </ul>
    </div>

    <script>
        // 嵌入当前html页面中的js代码

        // 实例化一个vue对象，绑定操作的标签是id为app的标签
        new Vue({
            // 绑定操作的标签(包含其子标签)
            el: '#app',
            data: {
                books: [] // books应该由动态请求，请求django来获取
            },
            methods: {
                getListBooks: function() {
                    // 通过axios请求来获取动态数据
                    // GET + /books/?page=1&pagesize=5
                    axios.get(
                        'http://127.0.0.1:8000/books/', // page=1&pagesize=5
                        {
                            // 查询字符串参数
                            params: {
                                page: 1,
                                pagesize: 5
                            }
                        }
                    ).then(response => {
                        // 函数体
                        // response.data: 响应体数据json
                        this.books = response.data.lists;
                    }).catch(response => {
                        console.log(response.data.errmsg);
                    })
                }
            },
            mounted() {
                // vue对象实例化、变量绑定之后，页面渲染之前会自动调用
                this.getListBooks();
            },
        });
    </script>

</body>
</html>

源码分析：

响应结果：

二：全局组件的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 把组件的名字，当作成标签在html页面中调用渲染 -->
        <zujian_all></zujian_all>
    </div>

    <script>

        // 创建一个vue全局组件
        Vue.component(
            'zujian_all', // 组件名称
            {  
                // 组件封装的模版，有且只能有唯一的根标签
                template: "<div>  <ul><li v-for='book in books'>书名:{{ book.btitle }}</li></ul>  </div>",
                // 封装数据
                data: function() {
                    // data函数的返回值就是该组件封装的数据部分
                    return {
                        books: []
                    }
                },
                mounted() {
                    // 组件的mounted函数是在，组件对象构建、模版变量绑定之后，组件渲染之前会调用的
                    this.getListBooks();
                },
                // 封装方法
                methods: {
                    getListBooks: function() {
                        // 通过axios请求来获取动态数据
                        // GET + /books/?page=1&pagesize=5
                        axios.get(
                            'http://127.0.0.1:8000/books/', // page=1&pagesize=5
                            {
                                params: {
                                    page: 1,
                                    pagesize: 5
                                }
                            },
                        ).then(response => {
                            // 函数体
                            // response.data: 响应体数据json
                            this.books = response.data.lists;
                        }).catch(response => {
                            console.log(response.data.errmsg);
                        })
                    }
                },
            }
        ); 

        // 实例化一个vue对象，绑定操作的标签是id为app的标签
        new Vue({
            // 绑定操作的标签(包含其子标签)
            el: '#app'
        });
    </script>

</body>
</html>

源码分析：

响应结果：

三：局部组件的基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 把组件的名字，当作成标签在html页面中调用渲染 -->
        <zujian_all></zujian_all>

        <!-- 在html页面中，只有调用全局组件渲染；局部组件需要注册到全局组件中，在全局组件的模版中调用渲染 -->
        <!-- <zujian_a></zujian_a> -->
    </div>

    <script>
        // 创建一个vue局部组件
        // zujian_a变量/对象名字就是局部组件名
        var zujian_a = {
            template: "<div>局部组件zujian_a: 姓名:{{name}} </div>",

            // 封装数据
            data() {
                return {
                    name: 'zhangsan'
                }
            }
        }
        var zujian_b = {
            template: "<div>局部组件zujian_b: 姓名: {{name}}</div>",
             // 封装数据
             data() {
                return {
                    name: 'lisi'
                }
            },
        }

        // 创建一个vue全局组件
        Vue.component(
            'zujian_all', // 组件名称
            {  
                // 组件封装的模版，有且只能有唯一的根标签
                // 在全局组件的模版中，调用注册的局部组件
                template: "<div>全局组件 <zujian_a></zujian_a>  <zujian_b></zujian_b> </div>",

                // 注册局部组件到当前全局组件中
                components: {
                    zujian_a,
                    zujian_b
                },

                // 封装数据
                data() {
                    return {
                        name: "quanju"
                    }
                },
            }
                
        ); 

        // 实例化一个vue对象，绑定操作的标签是id为app的标签
        new Vue({
            // 绑定操作的标签(包含其子标签)
            el: '#app'
        });
    </script>

</body>
</html>

测试：

四：组件嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 把组件的名字，当作成标签在html页面中调用渲染 -->
        <zujian_all></zujian_all>

        <!-- 在html页面中，只有调用全局组件渲染；局部组件需要注册到全局组件中，在全局组件的模版中调用渲染 -->
        <!-- <zujian_a></zujian_a> -->
    </div>

    <script>
        // 创建一个vue局部组件
        // zujian_a变量/对象名字就是局部组件名
        var zujian_a = {
            template: "<div>局部组件zujian_a: 姓名:{{name}} </div>",

            // 封装数据
            data() {
                return {
                    name: 'zhangsan'
                }
            }
        }
        
        var zujian_b = {
            template: "<div>局部组件zujian_b: 姓名: {{name}} <zujian_a></zujian_a> </div>",
            components: {
                zujian_a
            },
             // 封装数据
             data() {
                return {
                    name: 'lisi'
                }
            },
        }

        // 创建一个vue全局组件
        Vue.component(
            'zujian_all', // 组件名称
            {  
                // 组件封装的模版，有且只能有唯一的根标签
                // 在全局组件的模版中，调用注册的局部组件
                template: "<div>全局组件  <zujian_b></zujian_b> </div>",

                // 注册局部组件到当前全局组件中
                components: {
                    zujian_b
                },

                // 封装数据
                data() {
                    return {
                        name: "quanju"
                    }
                },
            }
                
        ); 

        // 实例化一个vue对象，绑定操作的标签是id为app的标签
        new Vue({
            // 绑定操作的标签(包含其子标签)
            el: '#app'
        });
    </script>

</body>
</html>

五：组件传值（父传子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 把组件的名字，当作成标签在html页面中调用渲染 -->
        <zujian_all></zujian_all>

        <!-- 在html页面中，只有调用全局组件渲染；局部组件需要注册到全局组件中，在全局组件的模版中调用渲染 -->
        <!-- <zujian_a></zujian_a> -->
    </div>

    <script>
        // 组件传值
        // 1、父组件传值给子组件
        //    (1)、子组件如何接收
        //    (2)、父组件如何发送

        // 2、子组件传值给父组件

        var zujian_a = {
            template: "<div>局部组件zujian_a, 获取的父亲的财富：{{data1}} {{data2}} </div>",
            // props属性定义多个特殊的变量 —— data1、data2....相当于“基金”，用于接收父传值
            props: ['data1', 'data2']
        }

        Vue.component(
            'zujian_all',
            {  
                template: "<div>全局组件  <zujian_a v-bind:data1='money' v-bind:data2='salary'></zujian_a>  </div>",
                // 注册局部组件到当前全局组件中
                components: {
                    zujian_a
                },
                data() {
                    return {
                        money: 10000,
                        salary: 99999
                    }
                },
            }
                
        ); 

        // 实例化一个vue对象，绑定操作的标签是id为app的标签
        new Vue({
            // 绑定操作的标签(包含其子标签)
            el: '#app'
        });
    </script>

</body>
</html>

六：组件传值（子传父）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 把组件的名字，当作成标签在html页面中调用渲染 -->
        <zujian_all></zujian_all>

        <!-- 在html页面中，只有调用全局组件渲染；局部组件需要注册到全局组件中，在全局组件的模版中调用渲染 -->
        <!-- <zujian_a></zujian_a> -->
    </div>

    <script>
        // 组件传值
        // 1、父组件传值给子组件
        // 2、子组件传值给父组件
        //    (1)、儿子怎么发送
        //    (2)、老子怎么接收

        var zujian_a = {
            template: "<div>局部组件zujian_a <button v-on:click='sendMsg'>点击发送</button> </div>",
            data() {
                return {
                    money: 10000
                }
            },
            methods: {
                sendMsg: function() {
                    // 子组件中调用该函数，把money变量值10000发送出去
                    // 该函数将数据以"消息"形式发送出去，消息的名字叫做"upload"
                    this.$emit('upload', this.money);
                }
            },
        }

        Vue.component(
            'zujian_all',
            {  
                // 父组件通过绑定消息函数来监听该消息，一旦子组件发送该消息，会自动调用父组件绑定的函数处理
                template: "<div>全局组件 <zujian_a v-on:upload='getMsg'></zujian_a></div>",
                // 注册局部组件到当前全局组件中
                components: {
                    zujian_a
                },
                methods: {
                    getMsg: function(value) {
                        // value就是接收到的子组件传值
                        alert(value);
                    }
                },
            }
                
        ); 

        // 实例化一个vue对象，绑定操作的标签是id为app的标签
        new Vue({
            // 绑定操作的标签(包含其子标签)
            el: '#app'
        });
    </script>

</body>
</html>

posted on 2020-09-25 13:04 飞行的猪哼哼阅读(34) 评论(0) 收藏举报

刷新页面返回顶部