组件化应用构建

蓝白咖啡

于 2020-08-25 13:58:49 发布

阅读量271

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43141611/article/details/108219364

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

组件系统是Vue的一个重要概念，它是抽象的，允许我们使用小型、独立、可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

在这里插入图片描述

不写id也是可以的

在这里插入图片描述

这是写了id的

在这里插入图片描述

这里放代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件化应用构建</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ol>
				<todo-item v-for="item in itemList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
			</ol>
		</div>
	</body>
</html>
<script type="text/javascript">
	Vue.component('todo-item', {
		props: ['todo'],
		template: '<li>{{todo.text}}</li>'
	})
	new Vue({
		/* el:'#app',这个千万别忘记了 */
		el: '#app',
		data: {
			itemList:[
				{id:0,text:'蔬菜'},
				{id:1,text:'水果'},
				{id:2,text:'奶酪'}
			]
		},
	})
</script>