一、 组件
1. 非单文件组件
Vue 使用组件的三大步骤：
创建组件
使用 Vue.extend(options) 创建组件
注意：
- el 不好写
- data 必须写成函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
studentName: "张三",
age: 18,
};
},
});
|
注册组件
- 局部注册：靠 new Vue 的时候传入 components 选项
- 全局注册：靠 Vue.component(‘组件名’,组件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
Vue.component("hello", hello);
new Vue({
el: "#root",
data: {
msg: "你好啊！",
},
components: {
student,
},
});
|
使用组件
1
2
3
4
| <div id="root">
<student></student>
</div>
|
关于组件名:
- 一个单词组成：
- 第一种写法(首字母小写)：school
- 第二种写法(首字母大写)：School
- 多个单词组成：
- 第一种写法(kebab-case 命名)：my-school
- 第二种写法(CamelCase 命名)：MySchool (需要 Vue 脚手架支持)
备注：
可以使用 name 配置项指定组件在开发者工具中呈现的名字。
关于组件标签:
- 第一种写法：
- 第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。
一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options
代码示例
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <!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; //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name: "student",
template: `
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
name: "尚硅谷",
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>
|
2. 单文件组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
<h2>学生姓名：{{ name }}</h2>
<h2>学生年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "张三",
age: 18,
};
},
};
</script>
|
</code-block>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
<Student></Student>
</div>
</template>
<script>
//引入组件
import Student from "./Student.vue";
export default {
name: "App",
components: {
Student,
},
};
</script>
|
</code-block>
1
2
3
4
5
6
7
| import App from "./App.vue";
new Vue({
el: "#root",
template: `<App></App>`,
components: { App },
});
|
</code-block>
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>练习一下单文件组件的语法</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
|
</code-block>
</code-group>
