4.TodoList

最新推荐文章于 2020-10-25 00:44:19 发布

小仙女般的张小琦

最新推荐文章于 2020-10-25 00:44:19 发布

阅读量142

点赞数

分类专栏： vue2.5入门

本文链接：https://blog.csdn.net/qq_41423485/article/details/104096020

版权

vue2.5入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList</title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			 <div>
			 	<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			 </div>
			 <ul>
			 	<!-- <li v-for="(item, index) of list" :key="index">
					{{item}}
				</li> -->
				<!-- 用组件 -->
				<todo-item
				 v-for="(item, index) of list"
				 :key="index"
				 :content="item"
				 :index="item"
				 @delete="handleDelete"></todo-item>
			 </ul>
		</div> 
		<script>
			// 组件  全局组件  每一个组件都是一个Vue实例
			Vue.component('todo-item',{
				props: ['content'],    //vue中父组件向子组件传值是用属性（props）的形式传递的
				template: '<li @click="handleClick">{{content}}</li>',
				methods:{
					handleClick:function(){
						this.$emit('delete',this.index)  //子组件可以使用 $emit 触发父组件的自定义事件
					}
				}
			})
			
			//局部组件  使用时，需要在vue实例中components属性中声明注册
			// var TodoItem = {
			// 	template:'<li>item</li>'
			// }
			
			new Vue({
				el:"#root",
				// components:{
				// 	'todo-item': TodoItem
				// },
				data: {
					inputValue:'',
					list: []
				},
				methods:{
					handleSubmit: function(){
						this.list.push(this.inputValue)
						this.inputValue=''
					},
					handleDelete:function(index){
						this.list.splice(index,1)
					}
				}
			}) 
		</script>
	</body>
</html>