一、模块与组件的定义
1、模块——
模块定义:模块即向外提供特定功能的js程序,一般一个模块就是一个js文件
模块作用: 复用js,简化js的编写,提高js运行效率
2、组件的定义——
组件是实现应用中局部功能代码和资源的集合
代码:html、css、js
资源:mp3 mp4 ttf .zip
局部:将所有功能写在一个组件中是没有意义的所以要分开写。
组件的作用:复用编码,简化项目编码,提高运行效率
3、传统方式和组件的对比
传统方式:
依赖关系混乱,不好维护
代码复用率不高
4、模块化
当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。
将一个大的js拆分成多个小的js以实现模块化、
5、组件化
当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用。
将应用按功能点拆分,一个功能就是一个组件。
组件中的js也可以拆分成多个js,实现js的模块化。
二、单文件组件与非单文件组件
1、单文件组件
一个文件中只包含有1个组件。
该文件名的后缀就是.vue
.vue文件格式
栗子:
<template>
<!-- 组件的结构 -->
</template>
<script>
// 组件交互的代码(数据、方法)
</script>
<style>
/* 组建的样式 */
</style>
1)、组件一般需要暴露出去
可以将Vue.extend()省略,直接将组件的配置对象暴露出去
eg:
栗子:
// 组件交互的代码(数据、方法),相当于非单文件中的除了template的配置
<script>
// export default Vue.extend(
// {
// name:'School',
// data() {
// },
// })
export default {
name:'School',
data() {
},
}
</script>
2、非单文件组件:
一个文件中包含有n个组件。
一个html文件中可以包含多个组件
组建的编写需要分成3步:创建组件、注册组件
1)创建组件
栗子:
// 创建school组件
const school = Vue.extend({
// el: "#root",不要写el配置项,由vm决定该组件给谁用
data() {
return {
schoolName: "nefu",
address: "哈尔滨",
};
},
template: `
<div>
<h2>学校名字:{{schoolName}}</h2>
<h2>地址:{{address}}</h2>
</div>`,
});
2)、注册组件
注册局部组件
在vue实例中注册组件,靠new Vue的时候传入components选项
栗子:
new Vue({
components:{
组件名:定义的组件
}
});
const vm = new Vue({
el: "#root",
components:{
school:school
}
});
3)、注册全局组件
全局注册靠Vue.component(‘组件名’,组件位置)
栗子:
Vue.component("school", school);
4)、使用组件
在html中编写组件标签
栗子:
<div id="root">
<school></school>
</div>
5)、局部注册:
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
<hr />
<student></student>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
// 创建school组件
const school = Vue.extend({
// el: "#root",不要写el配置项,由vm决定该组件给谁用
data() {
return {
schoolName: "nefu",
address: "哈尔滨",
};
},
template: `
<div>
<h2>学校名字:{{schoolName}}</h2>
<h2>地址:{{address}}</h2>
</div>`,
});
const student = Vue.extend({
// el: "#root",不要写el配置项,由vm决定该组件给谁用
data() {
return {
studentName: "🐏",
age: 18,
};
},
template: `
<div>
<h2>名字:{{studentName}}</h2>
<h2>年龄:{{age}}</h2>
</div>`,
});
const vm = new Vue({
el: "#root",
// 第二步,注册组件
components:{
school:school,
student:student,
}
});
</script>
</body>
</html>
6)全局注册:
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h2>实例1:</h2>
<div id="root">
<school></school>
<hr />
<student></student>
</div>
<h2>实例2:</h2>
<div id="root2">
<school></school>
<hr />
<student></student>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
// 创建school组件
const school = Vue.extend({
// el: "#root",不要写el配置项,由vm决定该组件给谁用
data() {
return {
schoolName: "nefu",
address: "哈尔滨",
};
},
template: `
<div>
<h2>学校名字:{{schoolName}}</h2>
<h2>地址:{{address}}</h2>
</div>`,
});
const student = Vue.extend({
// el: "#root",不要写el配置项,由vm决定该组件给谁用
data() {
return {
studentName: "🐏",
age: 18,
};
},
template: `
<div>
<h2>名字:{{studentName}}</h2>
<h2>年龄:{{age}}</h2>
</div>`,
});
// 第二步,注册组件(全局注册)
Vue.component("school", school);
Vue.component("student", student);
const vm = new Vue({
el: "#root",
// 第二步,注册组件
// components:{
// school:school,
// student:student,
// }
});
new Vue({
el: "#root2",
});
</script>
</body>
</html>