Vue学习笔记|Vue组件

基本概念

模块

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

组件

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

模块化

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

组件化

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

非单文件组件

一个文件中包含有n个组件
Vue中使用组件的三大步骤：
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
如何定义一个组件
- 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别，区别如下：
  - el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
  - data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系
- 备注：使用template可以配置组件结构。
如何注册组件
- 局部注册：靠new Vue的时候传入components选项
- 全局注册：靠Vue.component('组件名',组件)
编写组件标签：<school></school>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<!-- 准备好一个容器-->
<div id="root">
    <hello></hello>
    <hr>
    <h1>{{msg}}</h1>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <school></school>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <student></student>
</div>

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72


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

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

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

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

//创建vm
new Vue({
    el:'#root',
    data:{
        msg:'你好啊！'
    },
    //第二步：注册组件（局部注册）
    components:{
        school,
        student
    }
})

new Vue({
    el:'#root2',
})

几个注意点

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

1
2
3
4


<div id="root">
    <h1>{{msg}}</h1>
    <school></school>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


//定义组件
const s = Vue.extend({
    name:'atguigu',
    template:`
		<div>
		<h2>学校名称：{{name}}</h2>	
		<h2>学校地址：{{address}}</h2>	
		</div>
		`,
    data(){
        return {
            name:'wyatt',
            address:'xian'
        }
    }
})

new Vue({
    el:'#root',
    data:{
        msg:'欢迎学习Vue!'
    },
    components:{
        school:s
    }
})

组件嵌套

1
2
3
4


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

</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70


//定义student组件
const student = Vue.extend({
    name:'student',
    template:`
		<div>
		<h2>学生姓名：{{name}}</h2>	
		<h2>学生年龄：{{age}}</h2>	
		</div>
		`,
    data(){
        return {
            name:'wyatt',
            age:18
        }
    }
})

//定义school组件
const school = Vue.extend({
    name:'school',
    template:`
		<div>
		<h2>学校名称：{{name}}</h2>	
		<h2>学校地址：{{address}}</h2>	
		<student></student>
		</div>
		`,
    data(){
        return {
            name:'xaut',
            address:'xian'
        }
    },
    //注册组件（局部）
    components:{
        student
    }
})

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

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

VueComponent

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
关于this指向：
- 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象
- new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
Vue的实例对象，以后简称vm

1
2
3
4
5


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


//定义school组件
const school = Vue.extend({
    name:'school',
    template:`
		<div>
		<h2>学校名称：{{name}}</h2>	
		<h2>学校地址：{{address}}</h2>	
		<button @click="showName">点我提示学校名</button>
		</div>
		`,
    data(){
        return {
            name:'xaut',
            address:'xian'
        }
    },
    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}
})

Vue与VueComponent关系

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

1
2
3


<div id="root">
    <school></school>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


Vue.prototype.x = 99

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

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

单文件组件

一个文件中只包含有1个组件

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
		<!-- <script type="text/javascript" src="./main.js"></script> -->
	</body>
</html>

main.js

1
2
3
4
5
6
7


import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

App.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


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

School.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


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

<script>
    export default {
        name:'School',
        data(){
            return {
                name:'xaut',
                address:'xian'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

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

Student.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

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