Vue实例待办事项
vue实现待办事项(技术: vue-cli,bulma,vuex)
·
效果
实现
- 通过vue.cli脚手架创建项目
- 引入bulma库创建样式
- 引入vuex进行状态管理,最主要是向各个组件传输信息
- 使用时先下载.json中相关包npm i
- 输入npm start启动
代码
- todoApp.vue
<template>
<div class="todoApp" style="width:500px">
<article class="panel is-primary">
<todo-head />
<todo-input />
<todo-list />
<todo-foot />
</article>
</div>
</template>
<script>
import TodoFoot from './componentsTodo/todo-foot.vue'
import TodoHead from './componentsTodo/todo-head.vue'
import todoInput from './componentsTodo/todo-input.vue'
import TodoList from './componentsTodo/todo-list.vue'
export default {
components: { todoInput, TodoList, TodoFoot, TodoHead }, // 注册子组件
name: 'todoApp'
}
</script>
<style lang="less" scoped>
.todoApp{
margin: 20px auto;
}
</style>
- componentsTodo文件下todo-head.vue
<template>
<div class="todo-head">
<div class="panel-heading">
<p class="title is-1 has-text-danger">添加待办事项</p>
<p class="subtitle is-3 has-text-danger">今日事,今日毕</p>
</div>
</div>
</template>
<script>
export default {
name: 'todo-head'
}
</script>
<style lang="less" scoped>
</style>
- componentsTodo文件下todo-list.vue
<template>
<div class="todo-list">
<ul v-if="todos.length > 0">
<todo-list-item v-for="todo in todos" :key="todo.id" :item="todo"/>
</ul>
<div v-else>请添加待办事项</div>
</div>
</template>
<script>
import todoListItem from './todo-list-item.vue'
export default {
components: { todoListItem },
name: 'todo-list',
computed: {
todos () {
return this.$store.state.todos // 拿到state中共享数据
}
}
}
</script>
<style lang="less" scoped>
</style>
- componentsTodo文件下todo-list-item.vue
<template>
<div class="todo-list-item">
<li>
<label>
<input
type="checkbox"
:checked="item.completed"
@change="changeHandle"
>
<span>{{item.completed ? " 已" : " 未"}}完成 </span>
<span>{{item.title}} </span>
</label>
<button @click="delSingleHandle">删除</button>
</li>
</div>
</template>
<script>
export default {
name: 'todo-list-item',
props: {
item: {
type: Object
}
},
methods: {
changeHandle () {
this.$store.commit('changSingle', { id: this.item.id }) // 向store发送信息,触发mutations中changSingle事件,改变单选状态
},
delSingleHandle () {
this.$store.commit('delSingle', { id: this.item.id }) // 向store发送信息,触发mutations中delSingle事件,删除单个代办事件
}
}
}
</script>
<style lang="less" scoped>
li {
margin-left: 10px;
}
li span{
font-size: 30px;
}
</style>
- componentsTodo文件下todo-foot.vue
<template>
<div class="todo-foot">
<label class="panel-inline">
<input
type="checkbox"
:checked="checkboxAllStatus"
@change="checkboxAllChang({statu: !checkboxAllStatus})"
>
全选
</label>
<span class="panel-inline">已完成{{CompletedTodo}}项 一共{{total}}项</span>
<div class="panel-block">
<button class="button is-primary is-outlined is-fullwidth" @click="clearAll">
清空所有事项
</button>
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex' // 拿到vuex中的事件和计算属性(也就是store中的)
export default {
name: 'todo-foot',
computed: {
...mapGetters(['total', 'CompletedTodo', 'checkboxAllStatus'])
// 注释内容等同于上面。上面简写形式
// total () {
// return this.$store.getters.total
// },
// CompletedTodo () {
// return this.$store.getters.CompletedTodo
// },
// checkboxAllStatus () {
// return this.$store.getters.checkboxAllStatus
// }
},
methods: {
...mapMutations(['checkboxAllChang', 'clearAll'])
// 注释内容等同于上面。上面简写形式
// checkboxAllChang (event) {
// this.$store.commit('checkboxAllChang', { statu: event.target.checked })
// },
// clearAll () {
// this.$store.commit('clearAll')
// }
}
}
</script>
<style lang="less" scoped>
div{
margin-top: 10px;
}
</style>
- main.js入口配置
import Vue from 'vue'
import App from './todoApp.vue'
// 引入store
import store from './store'
// 引入bulma库
import 'bulma/css/bulma.min.css'
Vue.config.productionTip = false
// Vue.prototype.$bus = new Vue()
new Vue({
store, // 注册store,这样就全局可用了
render: h => h(App)
}).$mount('#app')
- store下的index.js配置文件
import Vue from 'vue'
import Vuex from 'vuex'
// 使用核心插件
Vue.use(Vuex)
const store = new Vuex.Store({
state: { // 组件之间共享数据
todos: []
},
getters: {
/**
* 计算一共多少事件
*/
total (state) {
return state.todos.length
},
/**
* 计算已完成事件
*/
CompletedTodo (state) {
return state.todos.filter(item => item.completed).length
},
/**
* 根据单选框计算全选框状态
*/
checkboxAllStatus (state) {
return state.todos.every(item => item.completed)
}
},
mutations: {
// 添加事件
addTodoItem (state, payload) {
state.todos.push({
id: state.todos.length === 0 ? 0 : state.todos[state.todos.length - 1].id + 1,
title: payload.title,
completed: false
})
},
/**
* 单个选项框改变
*/
changSingle (state, payload) {
state.todos.forEach(item => {
if (item.id === payload.id) {
item.completed = !item.completed
}
})
},
/**
* 删除单个事件
*/
delSingle (state, payload) {
state.todos = state.todos.filter(item => item.id !== payload.id)
},
// 总选框改变事件
checkboxAllChang (state, payload) {
state.todos.forEach(item => {
item.completed = payload.statu
})
},
// 清除所有代办事件
clearAll (state) {
state.todos = []
}
}
})
export default store
- package.json配置包
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bulma": "^0.9.4",
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.0.0",
"less-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)