Vue小例子笔记(todolist)

最新推荐文章于 2024-06-02 22:12:52 发布

海面有风

最新推荐文章于 2024-06-02 22:12:52 发布

阅读量310

点赞数 2

分类专栏： Vue学习笔记文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/weixin_44659458/article/details/107789832

版权

Vue学习笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>todoList</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="root">
			
			<div>
				<input v-model="inputValue"/>
				<button @click="handleClick">提交</button>
			</div>
			<!--组件-->
			<ul>
				<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
				<!--父组件向子组件传值是通过属性进行传值的  @delete监听子组件事件delete-->
			</ul>
			
		</div>
		<script>
			
			/*
			 * 组件也是一个Vue实例
			 */
			
			
			//创建组件(全局)
			Vue.component('todo-item',{
				props:['content','index'],//接收到组件传递过来的数据
				template:'<li @click="handleClick">{{content}}</li>',
				methods:{
					handleClick:function(){
						this.$emit('delete',this.index)//向外触发一个事件delete 传递参数index
					}
				}
			})
			
			
			/**
			 *局部(在父组件里面无法调用该组件)
			 * 需要在该父组件中定义components
			 */
//			var todoItem={
//				template:'<li>item</li>'
//			}
			
			
			new Vue({
				el:"#root",
//				components:{//引入局部组件
//					'todo-item':todoItem
//				},
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleClick:function(){
						this.list.push(this.inputValue)
						this.inputValue=""
					},
					handleDelete:function(index){
						this.list.splice(index,1)//删除
					}
				}
			})
		</script>
	</body>
</html>

欢迎访问我的个人博客

海面有风

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue小例子笔记(todolist)

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>todoList</title> <script src="vue/vue.js"></script> </head> <body> <div id="root"> <div> <input v
复制链接

扫一扫