Vue中 TodoList 示例: 浏览器本地存储、自定义事件
1:界面展示情况
2:源代码
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false /*关闭语法检查*/
})
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;
// 创建Vm
const vm = new Vue( {
el:'#app',
render: (h) => h(App)
});
App.vue
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<ToListTop @addTodoInfos="addTodoInfos" /><!-- @addTodoInfos="addTodoInfos" 给toListTop 组件添加一个自定义事件,事件名为addTodoInfos,事件的回调为:addTodoInfos -->
<ToList :todos="todos"
:onChangeTodosOfDoneInfo="onChangeTodosOfDoneInfo"
:deleteTodosById="deleteTodosById"
/> <!-- :todos="todos" 跨组件进行传值;:onChangeTodosOfDoneInfo="onChangeTodosOfDoneInfo":组件间数据方法的逐层传递 -->
<ToListFooter :todos="todos" @checkAllTodos="checkAllTodos" @ckearAllTodo="ckearAllTodo" />
</div>
</div>
</div>
</template>
<script>
import ToListTop from './components/ToListTop.vue';
import ToList from './components/ToList.vue';
import ToListFooter from './components/ToListFooter.vue';
export default {
name: 'App',
components: {
ToListTop: ToListTop,
ToList: ToList,
ToListFooter: ToListFooter
},
data() {
return {
todos: JSON.parse(localStorage.getItem('todos')) ||[]
}
},
computed: {},
watch: {
todos:{
deep:true,//深度监控
handler(value){
localStorage.setItem('todos',JSON.stringify(value));
}
}
},
created() { },
mounted() { },
methods: {
// 添加1个todaoObj
addTodoInfos(todoObj){
console.log("App组件,接收到数据",todoObj);
this.todos.unshift(todoObj);
},
// 勾选或者取消勾选1个todoObj
onChangeTodosOfDoneInfo(id){
this.todos.forEach((todo)=>{
if(todo.id==id){
todo.done =!todo.done; //赋值取反操作
}
});
},
//删除一个todo
deleteTodosById(id){
this.todos=this.todos.filter((todo) =>{
return todo.id !==id;
});
},
// 全选 或者 取消全选
checkAllTodos(done){
this.todos.forEach((todo)=>{
todo.done=done;
});
},
// 清除所有已经完成的todo事项
ckearAllTodo(){
this.todos=this.todos.filter((todo)=>{
return !todo.done;
});
}
}
}
</script>
<!--
1:指定Css 样式的编写方式
less 最大特点:内容可以嵌套着写
-->
<style lang="less">
.divCss {
background-color: chocolate;
margin: auto;
padding: 20px;
.h1Css {
font-size: 36px;
color: white;
}
}
/*base*/
body {
background: #fff;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #da4f49;
border: 1px solid #bd362f;
}
.btn-danger:hover {
color: #fff;
background-color: #bd362f;
}
.btn:focus {
outline: none;
}
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
为人:谦逊、激情、博学、审问、慎思、明辨、 笃行
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 换了个头像,静静的想,默默的思恋,一丝淡淡的忧伤 ----------
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------
=====================================================================
转载请标注出处!