【Vue组件化编程】
Vue组件化编程
- 1 对组件的理解
- 2 非单文件组件
-
- 2.1 基本使用
- 2.2 几个注意点
- 2.3 组件的嵌套
- 2.4 VueComponent构造函数
- 2.5 一个重要的内置关系
- 3 单文件组件
1 对组件的理解
- 组件：实现应用中局部功能代码和资源的集合。
- 优点：文件好维护；依赖关系不混乱；复用率高。
- 模块与组件：
(1.1)模块理解：向外提供特定功能的 js 程序, 一般就是一个 js 文件
(1.2)使用模块原因：js 文件很多很复杂
(1.3)模块作用：复用 js, 简化 js 的编写, 提高 js 运行效率
(2.1)组件理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
(2.2)使用组件原因：一个界面的功能很复杂
(2.3)组件作用：复用编码, 简化项目编码, 提高运行效率 - 模块化与组件化：
(1)当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
(2)当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。
2 非单文件组件
- 定义：一个文件中包含有n个组件
2.1 基本使用
- Vue中使用组件的三大步骤：
1> 定义组件(创建组件)
2> 注册组件
3> 使用组件(写组件标签) - 如何定义一个组件？
1> 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
2>区别如下：
① el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
② data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
3> 备注：使用template可以配置组件结构。 - 如何注册组件？
1> 局部注册：靠new Vue的时候传入components选项
2> 全局注册：靠Vue.component('组件名',组件) - 编写组件标签：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本使用title>
<script src="../JS/vue.js">script>
head>
<body>
<div id="root">
<hello>hello>
<hr/>
<school>school>
<hr/>
<student>student>
div>
<div id="root2">
<hello>hello>
div>
body>
<script>
Vue.config.productionTip = false
// 第一步：创建组件
// 创建school组件
const school = Vue.extend({
// el:'#root', // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
template:`
学校名称：{{schoolName}}
学校地址：{{address}}
`,
data(){ // 创建组件时，data必须使用函数式，否则会报错
return {
schoolName:'霍格沃茨魔法学院',
address:'苏格兰高地'
}
},
methods:{
showName(){
alert(this.schoolName)
}
}
})
// 创建student组件
const student = Vue.extend({
template:`
学生姓名：{{studentName}}
学生年龄：{{age}}
`,
data(){
return {
studentName:'小王',
age:18
}
}
})
// 创建hello组件 仅仅为了全局注册组件而写 可忽略
const hello = Vue.extend({
template:`
你好啊！{{name}}
`,
data(){
return {
name:'Tom'
}
}
})
// 注册组件(全局注册)
Vue.component('hello',hello)
// 创建vm
new Vue({
el: '#root',
// 第二步：注册组件(局部注册)
components:{
// xuexiao:school,
// school:school,
// 可简写为：
school,
// xuesheng:student
student
}
})
// 仅仅为了全局注册组件而写 可忽略
new Vue({
el: '#root2',
})
script>
html>
2.2 几个注意点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>几个注意点title>
<script src="../JS/vue.js">script>
head>
<body>
<div id="root">
<h1>{{msg}}h1>
<school>school>
div>
body>
<script>
Vue.config.productionTip = false
// 定义组件
const school = Vue.extend({
name:'xuexiao', // 可以使用name配置项指定组件在开发者工具中呈现的名字
template:`
学校名字：{{schoolName}}
学校地址：{{address}}
`,
data() {
return {
schoolName:'霍格沃兹魔法学院',
address:'苏格兰高地'
}
}
})
// 可简写为：
/* const school = {
name:'xuexiao', // 可以使用name配置项指定组件在开发者工具中呈现的名字
template:`
学校名字：{{schoolName}}
学校地址：{{address}}
`,
data() {
return {
schoolName:'霍格沃兹魔法学院',
address:'苏格兰高地'
}
}
} */
new Vue({
el:'#root',
data:{
msg:'欢迎学习Vue!'
},
// 局部注册组件
components: {
// 若组件名是多个单词写法一：
// 'my-school':school // 加引号、单词之间用短横杠
// 若组件名是多个单词写法二：
// MySchool:school // 每个单词首字母大写 但前提是在脚手架环境中写
// school:school
school
}
})
script>
html>
2.3 组件的嵌套
- app为一人(vm)之下，万人(所有其他组件)之上
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件的嵌套title>
<script src="../JS/vue.js">script>
head>
<body>
<div id="root">
div>
body>
<script>
Vue.config.productionTip = false
// 定义student组件(子)
const student = Vue.extend ({
template:`
学生姓名：{{name}}
学生年龄：{{age}}
`,
data() {
return {
name:'小王',
age:18
}
}
})
// 定义school组件(父)
const school = Vue.extend ({
template:`
学校名字：{{name}}
学校地址：{{address}}
{{msg}}
`,
data() {
return {
msg:'欢迎来到小王的博客!'
}
}
})
// 定义app组件
const app = Vue.extend ({
template:`
2.4 VueComponent构造函数
- school组件本质是一个名为
VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 - 我们只需要写
new VueComponent(options)。 - 特别注意：每次调用
Vue.extend，返回的都是一个全新的VueComponent！ - 关于this指向：
1> 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象(vc)。
2>new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是Vue实例对象(vm)。 VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)。
Vue的实例对象，以后简称vm。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueComponenttitle>
<script src="../JS/vue.js">script>
head>
<body>
<div id="root">
<school>school>
<hello>hello>
div>
body>
<script>
Vue.config.productionTip = false
// 定义school组件
const school = Vue.extend({
template:`
学校名字：{{name}}
学校地址：{{address}}
`,
data() {
return {
name:'霍格沃兹魔法学院',
address:'苏格兰高地'
}
},
methods: {
showName(){
console.log('showName',this) // 此时的this是VueComponent实例对象(vc)
}
}
})
// 定义test组件
const test = Vue.extend({
template:`atguigu`
})
//定义hello组件
const hello = Vue.extend({
template:`
{{msg}}
2.5 一个重要的内置关系
- 一个重要的内置关系：
VueComponent.prototype.__proto__ === Vue.prototype - 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个重要的内置关系title>
<script src="../JS/vue.js">script>
head>
<body>
<div id="root">
<school>school>
div>
body>
<script>
Vue.config.productionTip = false
Vue.prototype.x = 99 // 此时vm.x = 99
// 定义school组件
const school = Vue.extend ({
template:`
学校名字：{{name}}
学校地址：{{address}}
`,
data() {
return {
name:'霍格沃兹魔法学院',
address:'苏格兰高地'
}
},
methods:{
showX(){
console.log(this.x); // this指向vc 输出值为99 也就是vc.x = 99
}
}
})
// 创建vm
const vm = new Vue({
el: '#root',
data: {
msg:'你好'
},
components: {
school
}
})
// 验证VueComponent.prototype.__proto__ === Vue.prototype
// console.log(school.prototype.__proto__ === Vue.prototype); // true
// 定义一个构造函数
/* 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__); // true
// 程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 99
console.log('@',d.x); // 99 */
script>
html>
3 单文件组件
- 定义：一个文件中只包含有一个组件。
- 快捷键：输入
< + v再按Enter - School.vue:
学校名字：{{name}}
学校地址：{{address}}
- Student.vue:
学生姓名：{{name}}
学生年龄：{{age}}
- App.vue:
- main.js:
import App from './App.vue' // 引入App.vue
// 创建vm
new Vue ({
el:'#root',
template:`
- index.html:
练习一下单文件组件的语法
