组件：我们项目中，每一个资源(.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