目录
1.传统方式编写应用
采用的是模块化开发。
缺点：
1.依赖关系混乱，不好维护
2.代码复用率不高
2.组件的定义
实现应用中的局部功能代码(css,html,js)和资源(mp3,mp4,ttf,.zip)的集合。
为什么要使用组件化开发：因为一个项目的功能很复杂，组件化开发可以使得代码复用，简化项目代码，提高运行效率。
组件：
3.非单文件组件：一个文件中包含n个组件
1.组件创建时注意点
组件在创建时，不会固定组件为谁服务(组件就是一块砖，哪里需要哪里搬)
注意点1：组件的配置项不能写el(目的是：不固定组件为谁服务)
注意点2：组件的配置项data必须写成函数式,不能写成对象式。目的是：组件在不同的地方调用时，组件配置项data是对象的话，引用的是同一地址的数据，某处一修改，其它地方就会自动修改。如果是函数式的话，返回一个对象，执行一次函数返回一个对象。某处一修改，其它地方不会自动修改。
注意点3：组件的配置项 templete 用于写组件的结构(html),且用模板字符串，里面代码要用一个div(或者一个块级标签)包起来。
//第一步：创建学校组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{schoolAddress}}</h2>
</div>
`,
data() {
return {
schoolName: '田中央',
schoolAddress: '北京'
}
}
})
//第一步：创建一个学生组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{
{studentName}}</h2>
<h2>学生年龄:{
{studentAge}}</h2>
</div>
`,
data() {
return {
studentName: '张三',
studentAge: '20'
}
}
})2.组件使用分三步(重点)
1.创建组件 Vue.extend({ })
//第一步：创建学校组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{schoolAddress}}</h2>
</div>
`,
data() {
return {
schoolName: '田中央',
schoolAddress: '北京'
}
}
})2.注册组件(局部注册和全局注册)
局部注册：只有当前的vm所对应的模板才能使用该组件 (局部注册用得比较多)
分析：school:school 第一个school是组件名，第二个school是组件所保存的变量名school，写组件标签时，用的是组件名。
全局注册：所有的vm对应的模板都可以使用该组件
//第二步:注册全局组件
Vue.component('hello',hello); //参数为：组件名hello，组件位置所保存的变量hello3.使用(在需要用到组件的地方编写组件标签)
原来:
组件化：
4.Vue中组件使用总结
Vue中使用组件的三大步骤：
一：定义组件(创建组件)
二：注册组件
三：使用组件(写组件标签等)
一:如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但是也有点区别:
01.el不要写，为什么？--->最终所有的组件都要经过一个vm管理，有vm中的el决定服务哪个容器
02.data必须写成函数式，为什么？--->避免组件被复用时，数据存在引用关系。
注意：使用templete可以配置组件结构(html)
二：如果注册组件？
01.局部注册：靠new Vue的时候传入components选项
02.全局注册：靠Vue.component('组件名'，组件)
三：编写组件标签:
eg:<school></school>
<body>
<h1>index页面</h1>
<!-- 创建一个模板 app-->
<div id="app">
<p>{
{msg}}</p>
<hr>
<hello></hello>
<hr>
<!-- 第三步：编写组件标签 -->
<school></school>
<hr>
<!-- 第三步：编写组件标签 -->
<student></student>
<!-- 验证组件可以复用 -->
<student></student>
</div>
<!-- 创建一个模板 app2-->
<div id="app2">
<hello></hello>
</div>
<script src="./JS/axios.min.js"></script>
<script src="./JS/axios.config.js"></script>
<script>
//第一步：创建学校组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{schoolAddress}}</h2>
</div>
`,
data() {
return {
schoolName: '田中央',
schoolAddress: '北京'
}
}
})
//第一步：创建一个学生组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{
{studentName}}</h2>
<h2>学生年龄:{
{studentAge}}</h2>
</div>
`,
data() {
return {
studentName: '张三',
studentAge: '20'
}
}
})
//第一步：创建一个hello全局组件
const hello = Vue.extend({
template: `
<div>
<p>hello啊!{
{name}}</p>
</div>
`,
data() {
return {
name: 'wjj',
}
}
})
//第二步:注册全局组件
Vue.component('hello',hello); //参数为：组件名hello，组件位置所保存的变量hello
new Vue({
el: '#app',
// 这里就不写data配置项了，因为要用的数据都在组件里面。也可以写，但是不要求必须是函数式
data:{
msg:'你好啊'
},
//第二步：注册组件（局部注册）
components: {
//组件们都是 key:value的形式
school, //school:school, 组件名:组件所保存的变量名
student
}
})
new Vue({
el:'#app2',
})
</script>
</body>5.组件的几个注意点
1.组件名的问题
一个单词组成：
第一种写法(首字母小写):eg:school
第二种写法(首字母大写):eg:School
多个单词组成：
第一种写法：kebab-case命名： my-school
第二种写法：CamelCase命名：MySchool （需要Vue脚手架支持）
备注：
（1）组件名尽可能回避HTML中已有的元素名称,eg:h2,H2都不行
（2）可以使用name配置项指定组件在开发者工具中呈现的名字。
注意：可以使用name配置项指定组件在Vue开发者工具中呈现的名字。意思是Vue得开发工具是看得name配置项，没有name配置项才看组件名：
2.关于组件标签
第一种写法：<school></school>
第二种写法:<school/>在脚手架环境才可。
注意：不使用脚手架时，<school/>会导致后续组件不能渲染。
3.创建组件的简写方式
const school = Vue.extend(options) 可简写为:const school = options
原来：
//第一步：创建学校组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{schoolAddress}}</h2>
</div>
`,
data() {
return {
schoolName: '田中央',
schoolAddress: '北京'
}
}
})简写：
//第一步：创建学校组件
const school ={
template: `
<div>
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{schoolAddress}}</h2>
</div>
`,
data() {
return {
schoolName: '田中央',
schoolAddress: '北京'
}
}
}6.组件的嵌套
组件的嵌套代码演示：
结果：
开发中常用的方式：
定义一个app组件(应用，整个Web页面),它用于管理应用里面所有的组件。
vm只管理一个组件app，然后app去管理应用里面所有组件。
此时容器里面只写一个app标签 0.0
<body>
<h1>index页面</h1>
<hr>
<!-- 创建一个模板 app-->
<div id="app">
<!-- 第三步：编写组件标签 -->
<app></app>
</div>
<script src="./JS/axios.min.js"></script>
<script src="./JS/axios.config.js"></script>
<script>
//第一步：创建学生组件
const student = Vue.extend({ //子组件要创建在父组件之前，不然会报错
name: 'student',
template: `
<div>
<h2>学生姓名:{
{name}}</h2>
<h2>学生年龄:{
{age}}</h2>
</div>
`,
data() {
return {
name: 'wxx',
age: '22'
}
}
})
//第一步：创建学校组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{schoolAddress}}</h2>
<student></student>
</div>
`,
data() {
return {
schoolName: '田中央',
schoolAddress: '北京'
}
},
components: { //套娃开始 父组件:school 子组件:student 子组件在父组件中去注册 子组件得标签要写在父组件的template中
student: student
}
})
const hello = Vue.extend({
template: `
<h1>{
{msg}}</h1>
`,
data() {
return {
msg: '欢迎来到北京学习'
}
}
})
//app组件
const app = Vue.extend({
template: `
<div>
<school></school>
<hello></hello>
</div>
`,
components: {
school,
hello
}
})
new Vue({
el: '#app',
//第二步：注册组件（局部注册）
components: {
app
}
})
</script>
</body>
结果:
如果容器#app里面啥都不想写，咋操作？
new Vue({
template:`<app></app>`,
el: '#app',
//第二步：注册组件（局部注册）
components: {
app
}
})这样就可以
