一、基础样式：

二、创建vue项目：

1. 项目目录：

2. 分解html、css样式

三、初始化数据

1. 定义一个数组

2. List 组件接收数组

四、添加数据

五、删除数据

一、基础样式：

html:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="style.css" type="text/css" rel="stylesheet"/></head><body><div class="main"><div class="header"><input type="text" placeholder="输入项目，按回车键添加" /></div><div class="list"><ul><li><input type="checkbox"/> Vue <input type="button" value="删除" class="btn"/></li><li><input type="checkbox" />React<input type="button" value="删除" class="btn"/></li><li><input type="checkbox" />Java<input type="button" value="删除" class="btn"/></li><li><input type="checkbox" />HTML+CSS<input type="button" value="删除" class="btn"/></li></ul></div><div class="footer"><input type="checkbox" />   已完成(0) / 总任务(4)<input type="button" value="清除所有任务" class="btn"/></div></div></body>
</html>

css:

*{margin: 0px;padding: 0px;
}
li{list-style: none;
}
.main{width: 600px;margin: auto;
}
.btn{position: absolute;right: 0px;background: red;color: #fff;width: 90px;height: 33px;border: none;border-radius: 5px;cursor: pointer;display:none;
}
/* 头部文件 */
.header{border: 1px solid #999999;padding: 15px;
}
.header input{width: 100%;height: 40px;line-height: 40px;
}
/* list样式 */
.list{border: 1px solid #999999;padding: 15px;margin-top: 15px;
}
.list li{height: 40px;line-height: 40px;color: #666;border-bottom: 1px solid #999999;position: relative;
}
.list li .btn{top:2px;
}.list li:hover .btn{display: block;
}/* 底部 */
.footer{border: 1px solid #999999;padding: 15px;margin-top: 15px;position: relative;
}
.footer .btn{display: block;padding: 10px 20px;width: auto;height: auto;padding-bottom: 9px;top:6px;right: 5px;
}

二、创建vue项目：

1. 项目目录：

主要是项目的组件部分，这里又细分了头部Header、List 和 Footer三个vue子组件

2. 分解html、css样式

1.1、App.vue

<template>

<div class="main">



<Header></Header>



<List></List>



<Footer></Footer>

</div>

</template>

<script>

import Header from "./components/Header.vue";

import List from "./components/List.vue";

import Footer from "./components/Footer.vue";

export default {

name: 'App',

components:{

Header,

List,

Footer

},

}

</script>

<style>

*{

margin: 0px;

padding: 0px;

}

li{

list-style: none;

}

.main{

width: 600px;

margin: auto;

}

.btn{

position: absolute;

right: 0px;

background: red;

color: #fff;

width: 90px;

height: 33px;

border: none;

border-radius: 5px;

cursor: pointer;

display:none;

}

</style>

1.2、 Header.vue

<template>

<div class="header">

<input type="text" placeholder="输入项目，按回车键添加" />

</div>

</template>

<script>

export default{

name:'Header',

}

</script>

<style >

/* 头部文件 */

.header{

border: 1px solid #999999;

padding: 15px;

}

.header input{

width: 100%;

height: 40px;

line-height: 40px;

}

</style>

1.3、 List.vue

<template>

<div class="list">

<ul>

<li><input type="checkbox"/> Vue <input type="button" value="删除" class="btn"/></li>

<li><input type="checkbox" />React<input type="button" value="删除" class="btn"/></li>

<li><input type="checkbox" />Java<input type="button" value="删除" class="btn"/></li>

<li><input type="checkbox" />HTML+CSS<input type="button" value="删除" class="btn"/></li>

</ul>

</div>

</template>

<script>

export default{

name:'List',

}

</script>

<style>

/* list样式 */

.list{

border: 1px solid #999999;

padding: 15px;

margin-top: 15px;

}

.list li{

height: 40px;line-height: 40px;color: #666;

border-bottom: 1px solid #999999;

position: relative;

}

.list li .btn{

top:2px;

}

.list li:hover .btn{

display: block;

}

</style>

1.4、 Footer.vue

<template>

<div class="footer">

<input type="checkbox" /> 已完成(0) / 总任务(0)

<input type="button" value="清除所有任务" class="btn"/>

</div>

</template>

<script>

export default{

name:'Footer',

}

</script>

<style >

/* 底部 */

.footer{

border: 1px solid #999999;

padding: 15px;

margin-top: 15px;

position: relative;

}

.footer .btn{

display: block;

padding: 10px 20px;

width: auto;

height: auto;

padding-bottom: 9px;

top:6px;

right: 5px;

}

</style>

三、初始化数据

1. 定义一个数组

把样式中静态的数据化为动态的数据，在父组件App.vue里创建一个todo数组，包含列表数据；并把数组传给List.vue子组件里面去

<List :todo="todo"></List>

name: 'App',

data(){

return {

todo:[

{id:1,name:'Vue',done:false},

{id:2,name:'React',done:false},

{id:3,name:'Java',done:true},

{id:4,name:'HTML+CSS',done:true},

]

}

},

这里的id 就是每一列数据的身份证，具有唯一性。便于后面的增添、删除、修改状态其他操作；done是为了修改状态属性，有true 和false 两个值

2. List 组件接收数组

1. 用props接收数组

name:'List',

props:['todo'],

//测试是否拿到了todo数组的值

mounted(){

console.log(this.todo);

}

2. 遍历数组

创建Item.vue组件做List.vue的子组件，保存遍历后的值

List.vue

<template><div class="list"><ul><Item></Item></ul></div>
</template><script>
import Item from '../components/Item'export default{name:'List',props:['todo'],//测试是否拿到了todo数组的值mounted(){console.log(this.todo);},components:{Item,},
}
</script><style>
/* list样式 */
.list{border: 1px solid #999999;padding: 15px;margin-top: 15px;
}
.list li{height: 40px;line-height: 40px;color: #666;border-bottom: 1px solid #999999;position: relative;
}
.list li .btn{top:2px;
}.list li:hover .btn{display: block;
}</style>

先测试一下数据是否能显示

Item.vue

<template><div><li><input type="checkbox"/>vue<input type="button" value="删除" class="btn"/></li></div>
</template><script>
export default {name:'Item',
}
</script><style scoped></style>

在list组件里 v-for循环，注意要加key值

<Item v-for="item in todo" :key="item.id" :item="item"></Item>

此时列表里只有初始测试的值，数组的值还没有添加到Item的列表里

把值添加到列表里

<template>

<div>

<li><input type="checkbox"/>{{item.name}}<input type="button" value="删除" class="btn"/></li>

</div>

</template>

<script>

export default {

name:'Item',

props:['item'],

}

</script>

四、添加数据

1. 在头部组件里绑定一个enter键的键盘事件

<input type="text" placeholder="输入项目，按回车键添加" @keyup.enter="pressAdd"/>

methods:{

pressAdd(){

console.log('111');

}

}，

2. 按下enter键后，能把输入框中的值添加到列表里去

App.vue中

<Header :addTodo="addTodo"></Header>

methods:{

addTodo(name){

const item={id:new Date().getTime(),name,done:false};

this.todo.unshift(item);//数组的添加方法

//console.log('app',item);

},

},

Header.vue

props:['addTodo'],

methods:{

pressAdd(e){

this.addTodo(e.target.value);

//console.log('111');

}

},

五、删除数据

App.vue

绑定新数组把值传递到list

<List :todo="todo" :delTodo="delTodo" ></List>

methods:{

addTodo(name){

const item={id:new Date().getTime(),name,done:false};

this.todo.unshift(item);

//console.log('app',item);

},

delTodo(id){

this.todo=this.todo.filter((item)=>{

return item.id!=id;

})

}

},

List.vue

再在list把值传递给item

<Item v-for="item in todo" :key="item.id" :item="item" :delTodo="delTodo"></Item>

props:['todo','delTodo',],

Item.vue

添加点击删除事件，回调父组件里的函数，获取id值删除列表

<li><input type="checkbox"/>{{item.name}}<input type="button" value="删除" class="btn" @click="pressDel(item.id)"/></li>

props:['item','delTodo',],

methods:{

pressDel(id){

this.delTodo(id);//调用父组件回调函数并传递id

}

}

todolist案例——vue脚手架（1）相关推荐

Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框.密码框.多行文本框单选多选勾 ...
Vue版todolist案例
Vue版todolist案例 todolist – 记录你的待办事项 <!DOCTYPE html> <html><head><meta charset=&q ...
基于vue的todolist案例
前言:todolist案例真的算是经典了,不管你是学习原生js,还是学习jq,还是学习vue,亦或者是react,todolist是练习必不可少的练习demo了,下面我们来看看这个案例.需要完整代码的 ...
Vue学习记录8，vue脚手架配置代理的两种方式，Github搜索案例，vue-resource，三种插槽，Vuex及搭建Vuex环境，getter和四个map方法的使用，模块化+命名空间
目录 vue脚手架配置代理方法一方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽默认插槽具名插槽作用域插槽 Vue ...
vue脚手架基础API全面讲解【内附多个案例】
vscode-插件补充 vue文件代码高亮插件-vscode中安装代码提示插件-vscode中安装知识点自测想学会今天的内容, 先测测这几个会不会表达式, 变量是什么 new的作用和含义实例 ...
Vue第三部分(1)：Vue脚手架构建过程详细介绍和案例
Vue-CLI 基本使用命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算 ...
Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布动画
npm全局安装切换淘宝npm镜像 npm config set registry https://registry.npm.taobao.org全局安装 npm install -g @vue/cl ...

todolist案例——vue脚手架（1）

一、基础样式：

二、创建vue项目：

1. 项目目录：

2. 分解html、css样式

三、初始化数据

1. 定义一个数组

2. List 组件接收数组

四、添加数据

五、删除数据

todolist案例——vue脚手架（1）相关推荐

最新文章

热门文章

todolist案例——vue脚手架（1）

一、基础样式：

二、创建vue项目：

1. 项目目录：

2. 分解html、css样式

三、 初始化数据

1. 定义一个数组

2. List 组件接收数组

四、添加数据

五、 删除数据

todolist案例——vue脚手架（1）相关推荐

最新文章

热门文章

三、初始化数据

五、删除数据