VUE中模块与组件 

组件：我们项目中，每一个资源(.js，.css，.vue，...)都是一个模块，这些模块是相互独立，但是我们可以通过类似于webpack构建工具把它们整合在一起，你可以理解为模块就是一个一个积木，通过webpack就可以把这些积木拼凑成想要的玩具(项目)

 

特点:就要进行导出和导入
组件，组件也是一个模块，他更多的是和视图展现相关，组件就是封装的可重用的代码

 写长篇幅并不是我的本意，主要是自己还不能精简吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <brand-manager></brand-manager>
    </div>
    <!-- 组件的template -->
    <template id="templateId">
        <div>

            <div class="add">
                编号:
                <input v-model="id" type="text"> 品牌名称:
                <input v-model="name" @keyup.enter="add" type="text">
                <input type="button" @click="add" value="添加">
            </div>

            <div class="add">
                品牌名称:
                <input type="text" placeholder="请输入搜索条件">
            </div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <!-- 动态生成内容tr -->
                <tr v-if="list.length==0">
                    <td colspan="4">没有数据了哦</td>
                </tr>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <a href="#">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </template>
    <script>
        //定义和注册组件
        //关于命名约定 https://cn.vuejs.org/v2/guide/components.html#%E7%BB%84%E4%BB%B6%E5%91%BD%E5%90%8D%E7%BA%A6%E5%AE%9A
        Vue.component('brandManager', {
            template: "#templateId",
            data() {
                return {
                    id: '',
                    name: '',
                    list: [{
                            id: 1,
                            name: '宝马',
                            ctime: new Date()
                        },
                        {
                            id: 2,
                            name: '奥迪',
                            ctime: new Date()
                        }
                    ]
                }
            },
            methods: {
                //增加
                add() {
                    this.list.push({
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    })

                    //清空
                    this.id = ''
                    this.name = ''
                },
                deleteBrand() {

                }
            }
        })

        const vm = new Vue({
            el: "#app"
        })
    </script>
</body>

</html>

 

谈谈你对模块化的理解？

答：

• 模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

• 让开发者便于维护，同时也让逻辑相同的部分可复用

• 模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

任何事物都有一个过程，那么模块化的过程通俗点讲就是：

模块化的过程就是：

• 1、拆分

将整个系统按功能，格式，加载顺序，继承关系分割为一个一个单独的部分.

注意：拆分的粒度问题，可复用问题，效率问题.如何这些问题处理的不好，就有可能出现不想要的后果。

将功能或特征相似的部分组合在一起，组成一个资源块.

将每个资源块按找需求，功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案：

1. namespace

2. sass，less

3. AMD&CMD

4. html模版

5. grunt，gulp，webpack

6. FIS，YUI，KISSY

posted @ 2015-04-26 10:44  Fanyee  阅读(1644)  评论(0)  编辑  收藏  举报