12.脚手架todolist

最新推荐文章于 2024-11-11 20:35:54 发布

李木子z

最新推荐文章于 2024-11-11 20:35:54 发布

阅读量142

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/m0_70206803/article/details/125505736

版权

本文通过一个简单的TodoList应用实例，展示了如何利用Vue.js进行父组件和子组件的交互，深入理解Vue的组件化开发思想。作者在过程中遇到了挑战，但通过实践逐渐理清了思路，揭示了前端开发中组件化的精髓。

摘要由CSDN通过智能技术生成

用脚手架写todolist 分为父组件和子组件

js和css部分

<!-- 父组件 -->
		<div id="app">
			<header>
				<form @submit.prevent="submit($event)">
					<label for="inpTitle">ToDoList</label>
					<input type="text" id="inpTitle" placeholder="添加ToDo" required="required" />
				</form>
			</header>
			<section>
				<ullist title="正在进行" :num="todonum" :local="local" :flag="todoflag" @delitem="removeitem" @changeitem="change" @edititem="editlist(arguments)"></ullist>
				<ullist title="已完成" :num="donenum" :local="local" :flag="doneflag" @delitem="removeitem" @changeitem="change" @edititem="editlist(arguments)"></ullist>
			</section>
			<footer>
				<p>Copyright &copy; 2014 todolist.cn <a @click="clearLocal()">clear</a></p>
			</footer>
		</div>

<!-- 子组件 -->
		<template id="ullist">
			<div>
				<slot>
					<h2>{{title}}<span>{{num}}</span></h2>
					<ul>
						<li v-for="(item,index) in local" :key="index" v-if="item.todo===flag">
							<input type="checkbox" @change="changeflag(index)" :checked="flag"/>
							<input type="text" v-model="item.title" @blur="editdata($event,index)"/>
							<a @click="removeItem(index)">-</a>
						</li>
					</ul>
				</slot>
			</div>
		</template>

<script src="js/vue.js"></script>
		<script>
			const ullist = {
				template: '#ullist',
				data() {
					return {
						
					}
				},
				methods: {
                   removeItem(index){
					/*  this.local.splice(index,1)
					  window.localStorage.setItem('todolist',JSON.stringify(this.local)) */
					  this.$emit('delitem',index)
				   },
				   changeflag(index){
					   this.$emit('changeitem',index)
				   },
				   editdata(e,index){
					   this.$emit('edititem',e,index)
				   }
				},
				props:{
					title:{
						type:String
					},
					num:{
						type:Number
					},
					local:{
						type:Array
					},
					flag:{
						type:Boolean,
						default:false
					}
				}
			}
		</script>
		<script src="js/lmxtodo.js"></script>
	</body>

一开始觉得脚手架是很难的事情但是通过todolist这个小例子好像就打通了一点思路