脚本化组件[component]
组件(Component)是自定义封装代码的功能。在前端开发的过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同意的功能。
而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css生命功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式，我们称之为”组件”。
所以，组件就是一个html网页中的功能，一般就是一个标签，标签中有自己的html内容结构，css样式和js特效。
这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
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
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.3.3.4.js"></script>
</head>
<body>
<header-nav></header-nav>
<div id="box">
<header-nav></header-nav>
<header-nav></header-nav>
</div>
<script>
//组件声明
//组件使用/其实和过滤器的使用方式很相似
// Vue.component("组件名", {
// data() {
// },//组件内部的数据
// methods: {},//组件内部操作方法
// template:"",//组件内部的html代码
// });
//一般使用的方法组件名作为标签使用，所以组件名一般以两个单词左右
//组件内部的数据是隔离开来的是互相独立的，在操作过程中，又属于当前组件的vm对象进行控制
//以往我们学习过的所有代码都可以在组件中使用
const headerNav = {//导航栏
data() {
return {
nav_list: ['首页', '注册', '详情', '列表'],
num: 0//组件与组件之间的数据是隔离开来的
}
},//组件内部的数据
methods: {
show(nav) {
alert(nav)
}
},//组件内部操作方法
template: `
<ul>
<li v-for="nav in nav_list"><a href="" @click.prevent="show(nav)">{{ nav }}</a></li>
<button @click="num++">+</button>
<input type="text" v-model.number="num">
</ul>`,//组件内部的html代码
};
//设计模式：链式调用：方法以当前对象作为返回值
const vm = Vue.createApp({
data() {
return {}
},
methods: {},
mounted() {
},
// });
// vm.component('header-nav', headerNav);
// vm.mount("##box");
}).component('header-nav', headerNav).mount("##box");
</script>
</body>
</html>
|
局部注册
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.3.3.4.js"></script>
</head>
<body>
<header-nav></header-nav>
<div id="box">
<header-nav></header-nav>
<header-nav></header-nav>
<headerNav></headerNav>
</div>
<script>
const headerNav = {
data() {
return {
nav_list: ['首页', '注册', '详情', '列表'],
num: 0
}
},
methods: {
show(nav) {
alert(nav)
}
},
template: `
<ul>
<li v-for="nav in nav_list"><a href=""
@click.prevent="show(nav)">{{ nav }}</a></li>
<button @click="num++">+</button>
<input type="text" v-model.number="num">
</ul>`,
};
const vm = Vue.createApp({
data() {
return {}
},
methods: {},
mounted() {
},
component: {
headerNav
}
}).mount("##box");
</script>
</body>
</html>
|