5.组件化应用构建---(vue入门文档学习记录)

最新推荐文章于 2022-01-23 12:42:51 发布

原创最新推荐文章于 2022-01-23 12:42:51 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#组件化 #vue #js #入门 #学习记录

vue 同时被 3 个专栏收录

24 篇文章

订阅专栏

前端

23 篇文章

订阅专栏

vue 文档学习

22 篇文章

订阅专栏

本文介绍如何使用Vue.js实现组件化应用构建，通过定义可复用的组件来提高开发效率和代码可维护性。示例展示了如何创建一个todo-item组件，并在应用中动态渲染列表项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件化应用构建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件化构建应用</title>
		<script type="text/javascript" src="../img/vue.js" ></script>
	</head>
	<body>
		<div id="app-7">
			<ol>
				<!--现在我们为每个 todo-item 提供 todo 对象
					todo 对象是变量，即其内容可以是动态的。
					我们也需要为每个组件提供一个“key”，稍后再
					作详细解释。-->
			<todo-item 
				v-for="item in groceryList"
				v-bind:todo="item"
                v-bind:key="item.id"
				></todo-item>
			</ol>
		</div>
		
		<script>
			/*
			 * 通过Vue.component()函数指定组件的id todo-item,
			 *  todo-item 组件现在接受一个"prop"，类似于一个自定义特性。这个 prop 名为 todo。
			 *  template 是prop的value值,相当于提供展示的模板
			 * TODO props是数组,如果是多个,怎样使用
			 */
			Vue.component('todo-item',{
				props:['todo'],
				template: '<li>{{ todo.text }}</li>'
			})
			
			var app7 = new Vue({
				el: '#app-7',
				data: {
					groceryList:[
					{id:0,text:'蔬菜'},
					{id:1,text:'奶酪'},
					{id:2,text:'随便其他什么人吃的东西'}
					]
				}
			})		
		</script>	
	</body>
</html>