Vue--利用路由完成todolist

目录文件:

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import news from '@/components/news/news'
import done from '@/components/news/pages/done'
import nodone from '@/components/news/pages/nodone'

Vue.use(Router)

export default new Router({
  routes: [
    {
    	//路由路径
      path: '/news',
      name: 'news',
      component:news,
      redirect:"/news/nodone",
      children:[
             {path:"done",component:done},
             {path:"nodone",component:nodone}
      ]
    }
  ]
})

done.vue:

 <template>
 	<div class="done">
 	   <ul class="list-group">
 	   	  <li class="list-group-item" v-for="item in doneList">
 	   	     {{item.content}}
 	   	  </li>
 	   </ul>
 	</div>
 </template>
 <script>
 	export default{	
 		name:"done",
		props:["doneList"]
	}
 </script>
 <style>
 	
 </style>

mheader.vue:

<template>
	<div class="container">
		<div class="row">
		    <div class="col-xs-8">
		         <input type="text" class="form-control" v-model="textValue"/>
		    </div>
		    <div class="col-xs-4">
		         <button class="btn btn-primary" @click="addInfo">发送</button>
		    </div>
		</div>
	</div>
</template>
<script>
	export default{		
		name:"mheader",
		methods:{
			addInfo(){
				this.$emit("addinfo",this.textValue)
				this.textValue=""
			}		
		},
		data(){
			return{
				textValue:""
			}
		}
	}
</script>
<style scoped="scoped">
	
</style>

nodone.vue:

 <template>
 	<div class="nodone">
 	   <ul class="list-group">
 	   	  <li class="list-group-item" v-for="(item,index) in nodoneList" @click="del">
 	   	     {{item.content}}
 	   	  </li>
 	   </ul>
 	</div>
 </template>
 <script>
 	export default{		
 		name:"nodone",
		props:["nodoneList"],
		methods:{
			del(index){
				this.$emit("del",index)
			}
		}
	}
 </script>
 <style>
 	
 </style>

tabber.vue:

<template>
	<div class="tabber">
         <div class="item">
         	<!--路由路径-->
         	<router-link to="/news/nodone">
          		<span>未完成</span>
         	    <span class="badge">{{nodoneListLength}}</span>
         	</router-link>
         </div>
         <div class="item">
         	<router-link to="/news/done">
          		<span>完成</span>
         	    <span class="badge">{{doneListLength}}</span>
         	</router-link>
         </div>
	</div>
</template>
<script>
	export default{		
		props:["nodoneListLength","doneListLength"],
		name:"tabber"
	}
</script>
<style scoped="scoped">
	.tabber{
		display: flex;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid black;
        text-align: center;
        margin-top: 10px;
	}
	.tabber .item{
		flex: 1;
	}
</style>

news.vue:

<template>
	<div class="news">	
	   <mheader @addinfo="addinfo"></mheader>
	   <mtabber :nodoneListLength="nodoneListLength" :doneListLength="doneListLength"></mtabber>
	   
	   <router-view :nodoneList="nodoneList" :doneList="doneList" @del="del"></router-view>
	</div>
</template>
<script>
	import mheader from "./pages/mheader"
	import mtabber  from "./pages/tabber"
	
	export default{		
		name:"news",
		components:{
			mheader,
			mtabber
		},
		data(){
			return{
				nodoneList:[
				     {id:1,content:"内容1"},
				     {id:2,content:"内容2"},
				     {id:3,content:"内容3"},
				     {id:4,content:"内容4"}
				],
				doneList:[]			
			}		
		},
		computed:{
				nodoneListLength(){
					return this.nodoneList.length
				},
				doneListLength(){
					return this.doneList.length
				}
		},
		methods:{
			addinfo(txt){
				var obj={
					id:this.nodoneList.length-1+2,
					content:txt
				}
				this.nodoneList.push(obj)
			},
			del(index){			    
				var obj=this.nodoneList.splice(index,1)
				this.doneList.push(obj[0])
			}
		}
	}
</script>
<style scoped="scoped">

</style>

 

Vue CLI (Vue脚手架) 是用于快速创建 Vue.js 应用程序的工具,它提供了一套命令行界面和配置模板,让你能够方便地搭建项目结构、安装依赖和配置基本设置。要使用 Vue CLI 创建一个简单的 Todo List 示例,请按照以下步骤操作: 1. **安装Vue CLI**: 打开终端或命令提示符,全局安装 Vue CLI: ``` npm install -g @vue/cli ``` 2. **初始化新项目**: 运行 `vue create todo-app`,输入项目名称和选项(默认即可),创建一个新的 Vue 项目。 3. **进入项目目录**: ``` cd todo-app ``` 4. **选择预设**: 如果你想基于现成的 UI 框架如 Vuetify 或 Element Plus 来构建,可以运行 `vue add <framework>`,例如 `vue add vuetify`。如果不添框架,那么就直接跳过这一步。 5. **打开项目**: ``` vue serve ``` 这将启动一个本地开发服务器,你可以通过浏览器访问 `http://localhost:8080` 看到应用。 6. **创建 TodoList 组件**: 在项目文件夹中,打开 `src/components` 目录,新建一个名为 `TodoList.vue` 的文件。在这个组件里,你可以定义一个列表,每个元素都是一个 `v-for` 循环的对象,包含 `text` 和 `toggleStatus` 等属性。 7. **主 App 组件引用**: 在 `src/App.vue` 文件中,导入并使用 `TodoList` 组件,并在模板部分使用 `<TodoList />`。 8. **数据管理**: 可能需要一个Vuex store来管理 todo 列表的状态,如果应用复杂,还可以考虑路由和状态管理库(如Vuex Router)。 9. **样式和自定义功能**: 根据需要,你可以为组件添样式(使用 CSS 或 SCSS)、事件处理以及自定义功能。 完成以上步骤后,你就有了一个基础的 Vue CLI Todo List 应用了。记得在每次修改完成后保存并刷新浏览器查看效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值