VUE框架实现组件化开发使用模板实现组件复用------VUE框架-摩杜云开发者社区

VUE框架实现组件化开发使用模板实现组件复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 使用组件 -->
        <userlist></userlist>
        <userlist></userlist>
        <userlist></userlist>
        <!-- 组件的使用分为三部分 -->
        <!-- 第一步创建组件 -->
        <!-- 第二部注册组件 -->
        <!-- 第三步使用组件 -->
    </div>
    <script>
        // 第一步创建组件,传递的内容和我们new Vue传递的内容几乎是一样的
        const myCon = Vue.extend({
            // 创建组件的时候,不能使用EL配置项,只能使用TEMPLATE配置项(模板语句)
            template : `
                <ul>
                    <li v-for="user,index in users" :key="user.id">
                        {{index}}:{{user.id}}:{{user.name}}
                    </li>
                </ul>
            `,
            // 创建组件的时候,配置项不能使用el配置项
            // 在组件中的data必须是function返回对象的方式获取数据
            // 配置项的data必须使用function
            data()
            {
                return {
                    users : [
                        {id : "001",name : "Jack"},
                        {id : "002",name : "Rose"},
                        {id : "003",name : "Tom"},
                        {id : "004",name : "Jerry"}
                    ]
                }
            }
            // 如果是大括号的形式就会导致多个data共享一个数据,复用就实现不了
            // 比方说我们在多个页面中都使用了同一个组件
            // 一旦该组件的数据更新,就会导致我们多个页面的内容遭到更新
            // 使用函数的形式就能保证每次返回的是一个单独的数据
        });
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello"
            },
            // 这里是局部注册
            // 注册组件在这里注册
            components : {
                // 左边是我们组件的名字,右边是组件
                userlist : myCon
            }
        });
        // let data = {
        //     counter : 1
        // };
        // function data(){
        //     return {
        //         counter : 1
        //     }
        // };
        // let x = data();
        // let y = data();
    </script>
</body>
</html>