to-do-list

最新推荐文章于 2024-06-01 09:35:09 发布

spfLinux

最新推荐文章于 2024-06-01 09:35:09 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： to-do-list

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div id="example">
		<to-do-box></to-do-box>
	</div>

	<script type="text/javascript">
		//按组件树的方式code  组件：代码复用

		var bus=new Vue({});

		Vue.component('to-do-item',{
			props:['sendMsg','myIndex'],
			methods:{
				deleteItem(){
					this.$emit('deleteEvent',this.myIndex);
					//this.parents.msgList.splice(this.myIndex,1); 另一种方法
				}
			},
			template:`
				<li>
					<button @click="deleteItem">delete</button>
					<span>{{sendMsg}}</span>
				</li>
			`
		});

		Vue.component('to-do-list',{
			data:function(){
				return {
					msgList:[]
				}
			},
			created:function(){
				//var that=this;
				bus.$on('addEvent',(msg)=>{
					console.log("接收到数据为："+msg);
					this.msgList.push(msg);

				})
			},
			methods:{
				rcvDeleteMsg(index){
					this.msgList.splice(index,1);
				}
			},
			template:`
				<ul>
					<to-do-item v-for="(tmp,index) in msgList" :sendMsg="tmp" :myIndex="index" :key="index" @deleteEvent="rcvDeleteMsg"></to-do-item>
				</ul>
			`
		});

		Vue.component('to-do-input',{
			data:function(){
				return {
					userInput:''
				}
			},
			methods:{
				handleClick(){
					bus.$emit('addEvent',this.userInput);
				}
			},
			template:`
				<div>
					<h2>待做事项列表</h2>
					<input type="text" placeholder="请输入" v-model='userInput'/>
					<button @click="handleClick">add</button>
				</div>
			`
		});

		Vue.component('to-do-box',{
			template:`
				<div>
					<to-do-input></to-do-input>
					<to-do-list></to-do-list>
				</div>
			`
		})
		new Vue({
			el:'#example',
			data:{
				msg:'VueJS is Awesome'
			}
		});
	</script>
</body>
</html>

spfLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
to-do-list

//按组件树的方式code 组件：代码复用 var bus=new Vue({}); Vue.component('to-do-item',{ props:['sendMsg','myIndex'], methods:{ deleteItem(){ this.$emit('deleteEvent',this.myIndex); //this.p
复制链接

扫一扫