vue实现一个 todoList

v-model数据双向绑定，在 data里面注册
v-on:click=“function” function在 methods 里面注册
v-for 遍历列表元素

1.实现一个todo List
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello world</title>
		<script src="./vue.js">
			
		</script>
		<style>
			div#app{
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text"   v-model="todoValue" />
			<button v-on:click="addOneTask">确认</button>
			<ul>
				<li v-for="i in list">{{i}}</li>
			 
			</ul>
			
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					list:['1.学习vue','2.学习bootstrap'],
					todoValue:""
				},
				methods:{
					addOneTask:function() {
						console.log("click")
						// this.todoValue
						this.list.push(this.todoValue);
						this.todoValue="";
					}
				}
			});
			 
			
			
		</script>
	</body>
</html>

目录结构：
在这里插入图片描述

使用vue注册子组件实现一个 todoList

```java
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello world</title>
		<script src="./js/vue.js">
			
		</script>
		<style>
			div#app{
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text"   v-model="todoValue" />
			<button @click="addOneTask">确认</button>
			<ul>
				<!-- <li v-for="i in list">{{i}}</li> -->
				<todo-item v-bind:content="i" v-for="i in list"></todo-item>
			</ul>
			
		</div>
		
		<script>
			//创建了一个子组件
			var TodoItem = {
				props:['content'],
				template:"<li>{{content}}</li>"
			}
			
			var app = new Vue({
				el:'#app',
				components:{
					TodoItem:TodoItem
				},
				data:{
					list:[],
					todoValue:""
				},
				methods:{
					addOneTask:function() {
						console.log("click")
						// this.todoValue
						this.list.push(this.todoValue);
						this.todoValue="";
					}
				}
			});
			 
			
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello world</title>
		<script src="./js/vue.js">
			
		</script>
		<style>
			div#app{
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text"   v-model="todoValue" />
			<button @click="addOneTask">确认</button>
			<ul>
				<!-- <li v-for="i in list">{{i}}</li> -->
				<todo-item v-bind:content="i" v-for="(i,index) in list"
							v-bind:index="index"
							@delete="handleItem"
				></todo-item>
				<!--  
					v-bind传值 
						通过 v-bind 向
				  -->
			</ul>
			
		</div>
		
		<script>
			//创建了一个子组件
			var TodoItem = {
				props:['content',"index"],
				template:"<li @click='handleItem'>{{content}}</li>",
				methods:{
					handleItem:function(){
						this.$emit("delete",this.index);//向父组件发出 delete事件,对应@delete
						//v-bind:index 也可以写出 :index
						
					}
				}
			}
			
			var app = new Vue({
				el:'#app',
				components:{
					TodoItem:TodoItem
				},
				data:{
					list:[],
					todoValue:""
				},
				methods:{
					addOneTask:function() {
						console.log("click")
						// this.todoValue
						this.list.push(this.todoValue);
						this.todoValue="";
					},
					handleItem:function(index)
					{
						alert(index);
						this.list.splice(index,1);
					}
					 
				}
			});
			 
			
			
		</script>
	</body>
</html>

.GEEK

发布了151 篇原创文章 · 获赞 7 · 访问量 7510

私信关注

vue实现一个 todoList

猜你喜欢