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 ...
随机推荐
- codeforces 之 Little Pigs and Wolves
B-Little Pigs and Wolvestime limit per test2 secondsmemory limit per test256 megabytesinputstandard ...
- SDUT 2766 小明传奇2
小明传奇2 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 小明不但创建了自己的商店而且选择了建立了自己的货币系统. 传统地,一个 ...
- codeforces 659F F. Polycarp and Hay(并查集+bfs)
题目链接: F. Polycarp and Hay time limit per test 4 seconds memory limit per test 512 megabytes input st ...
- JQuery添加删除标签
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src= ...
- Android 在Activity中对SQLite的操作
注册 package com.scme.ui; import android.app.Activity; import android.content.Intent; import android.o ...
- 设计四个线程，其中两个线程每次对j加1，另外两个线程每次对j减1
public class ManyThreads2 { private int j = 0; public synchronized void inc() { j++; System.out.prin ...
- 关闭windows10自动更新
用windows10的小伙伴们应该都被windows10自动更新这个问题折磨过.那到底要这样禁止windows10的自动更新呢? 百度上有一篇文章写的非常好,并且有配套,大家只要根据步骤操作即可,本人 ...
- express使用https
目录 申请免费ssl证书 修改express的./bin/www 申请免费ssl证书 直接去阿里云申请一个免费的ssl,选择neginx下载证书就可以了,解压得到一个xxx.key.xxx.crt文件 ...
- Mysql 5.7.18忘记密码
5.7.18密码修改发生了变化,旧版的方法不再奏效. 1. ps -ef | grep mysqld,kill掉启动的mysql服务: 2. 创建/etc/my.cnf,添加: [mysqld] sk ...
- poj1966Cable TV Network——无向图最小割(最大流)
题目:http://poj.org/problem?id=1966 把一个点拆成入点和出点,之间连一条边权为1的边,跑最大流即最小割: 原始的边权赋成inf防割: 枚举源点和汇点,直接相邻的两个点不必 ...