HiDocs

2. Vue组件化编程

2.1. 模块与组件、模块化与组件化

2.1.1. 模块

针对js文件

理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
为什么：js 文件很多很复杂
作用：复用 js，简化 js 的编写，提高 js 运行效率
思想：模块化

2.1.2. 组件

针对html文件

定义：用来实现局部功能的代码和资源的集合（html/css/js/image/music/fonts…）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率
思想：封装（组件化），解耦

2.1.3. 模块化

当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用

2.1.4. 组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

注意：

模块化和组件化可以同时应用！

组件里面的js代码可以进行模块化（拆分成多个小js文件，实现复用）

2.1.5. 单文件组件和非单文件组件区别

1.非单文件组件：一个文件中包含有n个组件 ——> .html文件

2.单文件组件：一个文件中只包含有1个组件 ——> .vue文件

也就是说一个文件就是一个组件

非单文件组件：一个组件包含的最基本的内容：结构template，数据data！ 乘以 n

单文件组件：一个组件包含的最基本的内容：结构html，数据data！

非单文件组件包括n个组件，里面的组件有一个弊病：就是组件的样式没法跟着组件走，要单独定义style
但是单文件组件，直接包括了结构、交互、样式三个部分！

2.2. 非单文件组件：.html文件

2.2.1. 基本使用

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步：创建school组件，.extend方法
		const school = Vue.extend({
     
            //组件定义时，一定不要写el配置项！因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
			template:` 
				<div class="demo">
					<h2>学校名称：{
      {schoolName}}</h2>
					<h2>学校地址：{
      {address}}</h2>	
				</div>
			`,
			data(){
     
				return {
     
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			}
		})

		//第一步：创建student组件
		const student = Vue.extend({
     
			template:`
				<div>
					<h2>学生姓名：{
      {studentName}}</h2>
					<h2>学生年龄：{
      {age}}</h2>
				</div>
			`,
			data(){
     
				return {
     
					studentName:'JOJO',
					age:20
				}
			}
		})
		
		//创建vm
		new Vue({
     
			el:'#root',
			data:{
     
				msg:'你好，JOJO！'
			},
			//第二步：注册组件（局部注册）
			components:{ //两个组件服务#root这个容器！
                
				school,
				student
			}
		})
	</script>
</html>

效果：

总结：

Vue中使用组件的三大步骤：
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)

记住一句话：组件就是一块砖，哪里需要哪里搬！

如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别：
- el不要写也不能写，为什么？最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
- data必须写成函数式，为什么？避免组件被复用时，data数据存在引用关系（因为有引用指向对象，在一个地方改对象，另一个地方也变化）
  写成函数的话，令返回值为对象，每次调用函数就会得到一个新对象，复用时不会发生冲突！
如何注册组件？
- 局部注册：new Vue的时候传入components选项 ——>在这个文件内部复用组件
- 全局注册：Vue.component('组件名',组件) ——>在任意文件中复用这个组件
编写组件标签：

2.2.2. 组件注意事项

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件注意事项</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>{{msg}}</h1>
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const school = Vue.extend({
     
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{
      {name}}</h2>	
					<h2>学校地址：{
      {address}}</h2>	
				</div>
			`,
			data(){
     
				return {
     
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		new Vue({
     
			el:'#root',
			data:{
     
				msg:'欢迎学习Vue!'
			},
			components:{
     
				school
			}
		})
	</script>
</html>

效果：

总结：

关于组件名（.vue文件名也是一样）：

一个单词组成：
- 第一种写法（首字母小写）：school
- 第二种写法（首字母大写）：School
多个单词组成：
- 第一种写法（kebab-case命名）：my-school
- 第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持，不然不支持驼峰命名）
备注：
- 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
- 可以使用name配置项指定组件在vue开发者工具（浏览器工具）中呈现的名字，对其他地方不产生影响，只影响那个开发者工具！——> 没啥用

关于组件标签：

第一种写法：
第二种写法：自闭和
备注：不使用脚手架时，会导致后续组件不能渲染出来
一个简写方式：const school = Vue.extend(options)可简写为：const school = options

即：

const school = {
    template: `
          <div>
            <h2>学校名称:{{ name }}</h2>
            <h2>学校地址:{{ address }}</h2>
          </div>
        `,
    data(){
        return {
            name: '中南民族大学',
            address: '武汉'
        }
    },
    name: 'test' //该配置是指定组件在开发者工具中指定的名称
}

2.2.3. 组件的嵌套

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义student组件
		const student = Vue.extend({
     
			template:`
				<div>
					<h2>学生名称：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
     
				return {
     
					name:'JOJO',
					age:20
				}
			}
		})

		//定义school组件
		const school = Vue.extend({
     
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			components:{
     
				student
			},
			data(){
     
				return {
     
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		//定义hello组件
		const hello = Vue.extend({
     
			template:`
				<h1>{{msg}}</h1>
			`,
			data(){
     
				return {
     
					msg:"欢迎学习尚硅谷Vue教程！"
				}
			}
		})

		//定义app组件
		const app = Vue.extend({
     
			template:`
				<div>
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
     
				school,
				hello
			}
		})

		//创建vm
		new Vue({
     
			template:`
				<app></app>
			`,
			el:'#root',
			components:{
                
				app
			}
		})
	</script>
</html>

效果：

2.2.4. VueComponent

关于VueComponent：

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是执行Vue.extend(options)方法生成的
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
关于this指向：

Vue.extend(options)组件配置中（即vc对象）：data函数、methods中的函数、watch中的函数、computed中的函数 ==它们的this均是VueComponent实例对象==
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 ==它们的this均是Vue实例对象==

VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）；Vue的实例对象，以后简称vm

只有在本笔记中VueComponent的实例对象才简称为vc

2.2.5. 一个重要的内置关系

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
         //操作原型对象追加x属性（Vue.prototype就是原型对象，类和对象都有原型对象）
        //类获得原型对象（显示原型对象）的属性：通过 类.prototype.属性
        //对象获得原型对象（隐式原型对象）的属性：通过 对象.__proto__.属性 或者直接 对象.属性（对象本身就有__proto__这个属性，可以省略不写）
        //注：显示原型对象 = 隐式原型对象
		Vue.prototype.x = 99

		const school = Vue.extend({
     
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
     
				return {
     
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
     
				showX(){
     
					console.log(this.x)
				}
			},
		})

		const vm = new Vue({
     
			el:'#root',
			data:{
     
				msg:'你好'
			},
			components:{
                
     			school
            }
		})
	</script>
</html>

效果：

总结：

一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
Vue做了一件事：Vue让VueComponent的原型对象的隐式原型属性指向了Vue的原型对象！
即VueComponent的原型对象是Vue的原型对象的实例对象！
即VueComponent的原型对象的原型对象是Vue的原型对象！
为什么要有这个关系？
让VueComponent的实例对象（vc）可以访问到 Vue 的原型对象上的属性、方法
因为它们都位于__proto__那条线上！可以依次向下寻找！
实例对象只有隐式原型，构造函数（类）才有显示原型
有一句话要记住：实例的隐式原型属性永远指向自己的缔造者的原型对象

2.3. 单文件组件：.vue文件

一般起名使用School.vue和MySchool.vue的方式！

包含三个标签：

vue

<template>组件的结构</template>
<script>组件交互相关的代码（数据、方法等）</script></script>
<style>组件的样式</style>

然后需要export default {} 暴露组件对象，别人才可以import进去

School.vue:

vue

<template>
    <div id='Demo'>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    // // 完整版写法：用export default默认引入比较多，因为引入时只需要import xxx from xxx，不需要加{}就可以
    // const school = Vue.extend({
    //     name:'School',
    //     data() {
    //         return {
    //             name:'尚硅谷',
    //             address:'北京'
    //         }
    //     },
    //     methods: {
    //         showName(){
    //             alert(this.name)
    //         }
    //     },
    // })
    // export default school
    
    //简便写法：常用写法
    export default {
        name:'School', //定义一下name，最好和文件名相同
        data() {
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
    #Demo{
        background: orange;
    }
</style>

Student.vue:

vue

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'JOJO',
                age:20
            }
        },
    }
</script>

App.vue: 老大

vue

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    import School from './components/School.vue' //.vue写不写都行
    import Student from './components/Student.vue' //.vue写不写都行

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

main.js: 入口文件，在这里创建vm（在.vue文件中是不可能创建vm的，因为组件只能是vc，不是由new Vue来的）

import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#root',
    template:`<App></App>`, //这样在index.html里面就不用写<App>标签了！
    components:{
        App
    }
})

index.html：这是容器，用来装所有页面的

html

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 开启移动端的理想端口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 配置页签图标 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <!-- 配置网页标题 -->
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <!-- 容器 -->
        <div id="app"></div>
        <script type="text/javascript" src="../js/vue.js"></script>
	    <script type="text/javascript" src="./main.js"></script>
    </body>
</html>

效果：

最后我们发现：根本无法运行，因为浏览器解析不了ES6的语法，如 export default

所以我们只能利用webpack和babel 或者使用vue脚手架（集成了webpack和babel）才能运行单文件组件应用！

结论：让我们非使用脚手架的原因就是，单文件组件运行的需求，本质是ES6的需求！

不用脚手架也可以使用组件化编程，简化了组件和组件之间的通讯、全局通讯等需求

2. Vue组件化编程 ​

2.1. 模块与组件、模块化与组件化 ​

2.1.1. 模块 ​

2.1.2. 组件 ​

2.1.3. 模块化 ​

2.1.4. 组件化 ​

2.1.5. 单文件组件和非单文件组件区别 ​

2.2. 非单文件组件：.html文件 ​

2.2.1. 基本使用 ​

2.2.2. 组件注意事项 ​

2.2.3. 组件的嵌套 ​

2.2.4. VueComponent ​

2.2.5. 一个重要的内置关系 ​

2.3. 单文件组件：.vue文件 ​

2. Vue组件化编程

2.1. 模块与组件、模块化与组件化

2.1.1. 模块

2.1.2. 组件

2.1.3. 模块化

2.1.4. 组件化

2.1.5. 单文件组件和非单文件组件区别

2.2. 非单文件组件：.html文件

2.2.1. 基本使用

2.2.2. 组件注意事项

2.2.3. 组件的嵌套

2.2.4. VueComponent

2.2.5. 一个重要的内置关系

2.3. 单文件组件：.vue文件