抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

第五课主要讲的是组件化开发

如何编写组件

把上节的代码父之过来进行改动,把Vue.createApp声明一个变量叫app

1
2
3
4
<script>
const app = Vue.createApp({...})
app.mount("#app")
</script>

有了app就可以自定义组件了,比如写一个标题组件

1
2
3
app.component('my-title', {
template: '<h1 style="text-align:center">大众浴池</h1>'
})

有了这个组件,就可以在app的模板部分使用了,比如我们放在template的最上面,代码如下:

1
2
3
4
5
template: `
<div>
<my-title />
</div>
`

动态组件的编写

这里的动态组件指的是显示内容不固定,通过父组件或者程序控制而输出的内容。
学会了静态组件使用以后,把搓澡工组件单独写出来.组件会绑定一些props,用于接收父组件传参,动态显示出内容. 动态组件有一个关键的指令是v-bind,用这种方法,组件可以通过props取得对应的值。

1
2
3
4
app.component('my-cuozaoer', {
props: ['item', 'index'],
template: ` <li >[{{index}}]-{{item}}</li>`
})

props是一个数组,可以接受多个值。有了my-cuozaoer组件后,就可以在apptemplate中使用了,方法如下。

1
2
3
4
5
<my-cuozaoer 
v-for="(item,index) of list"
v-bind:item="item"
v-bind:index="index"
/>

最后整体的代码

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
<!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>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<my-title />
<input v-model="inputValue" />
<button v-on:click="handleAddItem">加人</button>
<ul>
<my-cuozaoer
v-for="(item,index) of list"
v-bind:item="item"
v-bind:index="index"
/>
</ul>
</div>
`,
data() {
return {
inputValue: '',
list: ['赵四', '刘能', '谢广坤']
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
})
app.component('my-title', {
template: '<h1 style="text-align:center">大众浴池</h1>'
})
app.component('my-cuozaoer', {
props: ['item', 'index'],
template: ` <li >[{{index}}]-{{item}}</li>`
})
app.mount("#app")
</script>

</html>

评论