用组件改写TodoList 学习笔记2

最新推荐文章于 2022-08-12 10:55:15 发布

Nineteen Hundred

最新推荐文章于 2022-08-12 10:55:15 发布

阅读量200

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/Vegetable_baicai/article/details/100006679

版权

学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用组件改写TodoList

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <input type="text" v-model="inputVale">
		    <button v-on:click="handBtnClick">提交</button>
		    <ul>
				<!-- v-bind绑定变量content=“item ” -->
				<Todo-Item v-bind:content="item" 
							v-for="item in list">

				</Todo-Item>
		    </ul>
		</div>
		<script>
			//方法1：Vue.component全局组件定义了一个TodoItem组件,props定义一个接受外部传给的数据的变量
			// 	Vue.component('TodoItem',{
			// 	props:['content'],
			// 	template:"<li>{{this.content}}</li>"
			// })
			
			//方法2：定义一个局部变量,局部变量需要在Vue实例中进行注册
			var TodoItem = {
				//props后面接:而不是=
				props:['content'],
				//组件模板
				template:"<li>{{content}}</li>"
				
			}
			
		    var app =new Vue({
				
		        el:'#app',
		        //进行局部组件的注册
				components:{
					TodoItem: TodoItem
				},
				
		        data:{
		            list:[],
					inputVale:' '
		        },
				methods:{
					handBtnClick:function(){
						//把输入框的数据传到list列表中
						this.list.push(this.inputVale)
						//为了在点击提交后清空输入框
						this.inputVale = ''
						
					}
				}
		    })
		</script>
	</body>
</html>