Vue学习笔记（五）

芒果炒香菜
1,423 阅读4分钟

Vue组件化编程

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

image.png

image.png

image.png

2.1.1.模块

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

2.1.2.组件

  1. 理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)
  2. 为什么：一个界面的功能很复杂
  3. 作用：复用编码,简化项目编码,提高运行效率

2.1.3.模块化

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

2.1.4.组件化

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

2.2.非单文件组件

  1. 模板编写没有提示
  2. 没有构建过程,无法将ES6转换成ES5
  3. 不支持组件的CSS
  4. 真正开发中几乎不用

2.2.1非单文件组件的基本使用

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

	一、如何定义一个组件？
		使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几
                乎一样，但也有点区别；
			1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
			2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
			备注：使用template可以配置组件结构。

	二、如何注册组件？
		1.局部注册：靠new Vue的时候传入components选项
		2.全局注册：靠Vue.component('组件名',组件)

	三、编写组件标签(来实现组件复用)：
		<school></school> <student></student> <hello></hello>

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

	<div id="root2">
		<hello></hello>
	</div>
</body>

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

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

	//第一步：创建student组件
	const student1 = Vue.extend({
		template: `
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
		data() {
			return {
				studentName: '张三',
				age: 18
			}
		}
	})

	//第一步：创建hello组件
	const hello1 = Vue.extend({
		template: `
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
		data() {
			return {
				name: 'Tom'
			}
		}
	})

	//第二步：全局注册组件
	Vue.component('hello', hello1)

	//创建vm
	new Vue({
		el: '#root',
		data: {
			msg: '你好啊！'
		},
		//第二步：注册组件（局部注册）
		components: {
			school: school1,
			student: student1
			// 组件名：中转变量，如果组件名和中转变量一致如school:school则可以写为school
		}
	})

	new Vue({
		el: '#root2',
	})
</script>
</html>

image.png

2.2.2组件的几个注意点

几个注意点：
	1.关于组件名:
		一个单词组成：
			第一种写法(首字母小写)：school
			第二种写法(首字母大写)：School
		多个单词组成：
			第一种写法(kebab-case命名)："my-school"
			第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
	备注：
		(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
		(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
	2.关于组件标签:
		第一种写法：<school></school>
		第二种写法：<school/>
		备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
        3.一个简写方式：
		const school = Vue.extend(options) 可简写为：const school = options

<!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

	//定义组件
	const s = {
		name: 'atguigu',
		template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
		data() {
			return {
				name: '尚硅谷',
				address: '北京'
			}
		}
	}
	new Vue({
		el: '#root',
		components: {
			"school": s
		}
	})
</script>
</html>

2.2.3组件的嵌套

子组件要在父组件之前定义

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

<body>
	<!-- 准备好一个容器-->
	<div id="root">

	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	//定义student组件
	const student = Vue.extend({
		name: 'student',
		template: `
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
		data() {
			return {
				name: 'pink老师',
				age: 18
			}
		}
	})
	//定义school组件
	const school = Vue.extend({
		name: 'school',
		template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
		data() {
			return {
				name: '尚硅谷',
				address: '北京'
			}
		},
		//注册组件（局部）
		components: {
			student
		}
	})

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

	//定义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>

image.png

2.2.4 VueComponent

关于VueComponent：
   1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

   2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
	  即Vue帮我们执行的：new VueComponent(options)。

   3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

   4.关于this指向：
	(1).组件配置中：
	  data函数、methods中的函数、watch中的函数、computed中的函数 ，它们的this均是【VueComponent实例对象】。
	(2).new Vue(options)配置中：
	  data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

   5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
    Vue的实例对象，以后简称vm。vm管理着vc

如图所示：打印出vm，展开，$children中包含着两个vc image.png

image.png

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>VueComponent</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<school></school>
		<hello></hello>
	</div>
</body>

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

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

	const test = Vue.extend({
		template: `<span>atguigu</span>`
	})

	//定义hello组件
	const hello = Vue.extend({
		template: `
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
		data() {
			return {
				msg: '你好啊！'
			}
		},
		components: { test }
	})
	// console.log('@',school)
	// console.log('#',hello)

	//创建vm
	const vm = new Vue({
		el: '#root',
		components: { school, hello }
	})
	console.log(vm);
</script>

</html>

2.2.5 一个重要的内置关系

	1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
	2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

image.png

Vue构造函数:
Vue构造函数的prototype是Vue的原型对象

vm（Vue构造函数构造的实例对象）：
vm对象的原型等于其构造函数的prototype，即是Vue的prototype,即指向Vue的原型对象：vm.__proto__===Vue.prototype

Vue的原型对象的原型：
即Vue.prototype.__proto__等于其构造函数的prototype：Vue.prototype.__proto__===Object.prototype

VueComponent构造函数：
VueComponent构造函数的prototype是VueComponent的原型对象

vc（VueComponent构造函数构造的实例对象）：
vc对象的原型等于其构造函数的prototype，即是VueComponent的prototype,即指向VueComponent的原型对象：
this.__proto__ === VueComponent.prototype

最后，强行改变VueComponent原型对象的.__proto__指向，让其指向从Object原型对象到Vue的原型对象
VueComponent.prototype.__proto__ === Vue.prototype

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>一个重要的内置关系</title>
	<!-- 引入Vue -->
	<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 //阻止 vue 在启动时生成生产提示。
	Vue.prototype.x = 99

	//定义school组件
        //这里的school是VueComponents构造函数，在使用<school></school>时Vue帮你new出实例对象vc(即该组件的this)
	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)
			}
		},
	})

	console.log(school.prototype.__proto__ === Vue.prototype)
	console.dir(school)
	

	//创建一个vm
	const vm = new Vue({
		el: '#root',
		data: {
			msg: '你好'
		},
		components: { school }
	})

	//定义一个构造函数
	/*	function Demo() {
			this.a = 1
			this.b = 2
		}
		//创建一个Demo的实例对象
		const d = new Demo()

		console.log(Demo.prototype) //显示原型属性,只有函数拥有
		// 这两个原型属性的地址都指向原型对象
		console.log(d.__proto__) //隐式原型属性，对象拥有

		console.log(Demo.prototype === d.__proto__)

		//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
		Demo.prototype.x = 99
		// 顺着这条线放东西
		console.log("输出:", d.__proto__.x)
		// 顺着这条线取东西

		console.log('@', d)
	*/
</script>

</html>

2.3单文件组件

大体结构是这样的：
image.png

<v 加enter能够快速生成模板

2.3.1其余文件(这些文件内创建组件)

School.vue文件

<template>
    <!-- 必须有一个根标签 -->
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>
//  <v 加enter能够快速生成模板
<script>
	 export default Vue.extend({ //可省略Vue.extend（）
		name:'School',//定义Chrome工具栏Vue工具组件名称
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	})
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

Student.vue文件

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

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

2.3.2 App.vue文件

// 创建一个App.vue文件汇总其余组件，将其余vue中创建的组件注册并且编写组件标签
<template>
  <div>
    <School></School>
    <Student></Student>
    <!-- 编写组件标签 -->
  </div>
</template>
<script>
//引入组件
import School from "./School.vue";
import Student from "./Student.vue";
export default {
  name: "App",
  components: {
    //注册组件
    School,
    Student,
  },
};
</script>
<style>
</style>

2.3.3 main.js文件

import App from './App.vue'
// 在main.js文件中创建vue实例vm，并引入最高级的App.vue文件
new Vue({
	el: '#root',
	template: `<App></App>`,
	components: { App },
})

2.3.4 index.html文件，准备一个容器

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>练习一下单文件组件的语法</title>
</head>
<body>
	<!-- 准备一个容器 -->
	<div id="root"></div>
        //引入script标签在body的最下方，并且优先引入Vue
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="./main.js"></script>
</body>
</html>
avatar
文章
阅读
粉丝