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 ...
随机推荐
- oracle-数据库的各种-锁-详解
数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性. 如果是单用户的 ...
- JS如何定义方法及调用 精选
简单搜索了下,遇到点问题1,经常在JS中看到如var foo = function(){}的形式foo是方法名还是对象名,如果想调用此方法,是用foo(),foo.function(),还是该如何正确 ...
- freemaker开发
推荐书籍 百度云盘 密码: c3m9 1. 前言 本书为<FreeMarker 2.3.19 中文版手册>,包含了freemarker开发得方方面面,可以作为开发freemarker的字典 ...
- matlab保存txt文件
save roadsurfacepointcloud.xyz -ascii roaddata2 %保存路面点云文件 roaddata2是变量.
- HDU 3853 LOOPS：期望dp【网格型】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3853 题意: 有一个n*m的网格. 给出在每个格子时:留在原地.向右走一格,向下走一格的概率. 每走一 ...
- python- 常见算法 python内置模块
1.冒泡排序 需求:请按照从小到大对列表 [13, 22, 6, 99, 11] 进行排序 原理:相邻两个值进行比较,将较大的值放在右侧,依次比较! li=[39,11,43,88,765,9]for ...
- TEE&TrustZone
一.TEE(Trusted Execution Environment) 1 A look back 1)2009 OMTP(Open Mobile Terminal Platform),首次定义了T ...
- (转)C语言之原码、反码和补码
原码.反码和补码 1).数据在内存中存储的时候都是以二进制的形式存储的. int num = 10; 原码.反码.补码都是二进制.只不过是二进制的不同的表现形式. 数据是以补码的二进制存储的. 2). ...
- C/C++ 混合编程
[面试] C/C++ 语法(五) -- extern 1. C 调用 C++ 开发的DLL库 C和C++混合编程(__cplusplus 与 external "c" 的使用) # ...
- dataguard 下主备 online redo 与 standby redo log resize 重建
环境说明: 本实验环境是一个节点的rac + 单节点 asm dg database 与 grid 版本是 11.2.0.4 .提别提醒 如果是多节点集群,操作时需要特别注意 thread . ...