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
VUE中模块与组件的更多相关文章
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- Vue中iframe和组件的通信
最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...
- 在vue中使用swiper组件
第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...
随机推荐
- 素数筛总结篇___Eratosthenes筛法和欧拉筛法（*【模板】使用 ）
求素数 题目描述 求小于n的所有素数的数量. 输入 多组输入,输入整数n(n<1000000),以0结束. 输出 输出n以内所有素数的个数. 示例输入 10 0 示例输出 4 提示 以这道题目为 ...
- join()方法作用
当在主线程当中执行到t1.join()方法时,就认为主线程应该把执行权让给t1 废话不多说看代码: package com.toov5.thread; public class JoinThreadT ...
- 我所理解的RESTful Web API [Web标准篇]【转】
原文:http://www.cnblogs.com/artech/p/restful-web-api-01.html REST不是一个标准,而是一种软件应用架构风格.基于SOAP的Web服务采用RPC ...
- Composer基础应用1
先唠叨唠叨一些琐碎的事.本人最早从事.Net开发,后来处于好奇慢慢转到了php,因为.net从一早就使用了命名空间(反正从我使用就存在这玩意了),所以在转php时很自然的就使用了命名空间,但是在使用过 ...
- T56
警方派人监视那个可疑人的住宅.The police put a watch on the suspect's house.他们利用自己的实践经验,设计了一台气冷柴油机.According their ...
- [Shell]Tetris Game
这篇文章主要介绍Shell脚本编写俄罗斯方块的方法,原文来自脚本之家,http://www.jb51.net/article/48926.htm 效果图: 代码: #!/bin/bash # Tetr ...
- 递归------python实现列表创建二叉树
# -*- coding:utf-8 -*- '二叉树结点类' class TreeNode: def __init__(self, x): self.val = x self.left = None ...
- BZOJ_1999_[Noip2007]Core树网的核_单调队列+树形DP
BZOJ_1999_[Noip2007]Core树网的核_单调队列+树形DP Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T ...
- ACM学习历程—HDU 1272 小希的迷宫（并查集）
Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就 ...
- Vue cli项目开启Gzip
目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...