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

VUE中模块与组件的更多相关文章

  1. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  2. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  3. vue中8种组件通信方式, 值得收藏!

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

  4. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  5. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  6. vue中兄弟之间组件通信

    我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...

  7. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  8. Vue中iframe和组件的通信

    最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...

  9. 在vue中使用swiper组件

    第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...

随机推荐

  1. hihocoder 在线测试 补提交卡 （Google）

    题目1 : 补提交卡 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho给自己定了一个宏伟的目标:连续100天每天坚持在hihoCoder上提交一个程序.100天过去 ...

  2. Contiki 2.7 Makefile 文件（四）

    3.第三部分 这里我们假设TARGET为native (1) OBJECTDIR = obj_$(TARGET) LOWERCASE = -abcdefghijklmnopqrstuvwxyz UPP ...

  3. laravel基础课程---15、分页及验证码（lavarel分页效果如何实现）

    laravel基础课程---15.分页及验证码(lavarel分页效果如何实现) 一.总结 一句话总结: 数据库的paginate方法:$data=\DB::table("user" ...

  4. ffmpeg去水印

    1.用potplayer打开有水印的视频文件,截图一张待用.2.用IrfanView打开保存的图片,调整到100%大小,按住鼠标左键框选水印位置,记下标题“Selection:”右边的4组数字.3.f ...

  5. linux命令学习笔记（52）：ifconfig命令

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有 一个类似的工具,也就是ifconfig (interfaces config).通 ...

  6. 【C++】*p++ = *p不同环境下操作不同

    实测,Ubuntu16.04,gcc 5.3.0&5.4.0(编译选项选择C++11和不选择新标准结果相同) #include<iostream> using namespace ...

  7. 数据库小记：根据指定名称查询数据库表名及根据指定名称查询数据库所有表中的字段名称（支持mysql/postgre）

    意:本篇文章仅适用于mysql和postgre这两种数据库 1.查询数据库中所有表名及对应表的详细信息 select * from INFORMATION_SCHEMA.tables 2.根据指定名称 ...

  8. TTY,Console以及Terminal

    TTY可以理解是一种终端显示.可以在/dev文件夹看到多个tty开头的文件,可以通过alt+Fn(n=1~6)来进行切换.这个是不是和GUI场景下的多个Terminal窗口是一致的呢? 伪TTY是指一 ...

  9. CentOS虚拟机通过主机网络上网

    0 环境简介 环境如下: (1)宿主机为WIN7系统,连接内网,同时通过网关服务器上外网: (2)虚拟机为VMWare12下的CentOS7系统. 宿主机通过WIFI方式上外网的配置方法,参考本人另一 ...

  10. Unity查找Editor下Project视图中特定的资源

    [MenuItem("Tools/Check Text Count")] public static void CheckText () { //查找指定路径下指定类型的所有资源, ...