todolist前端项目

最新推荐文章于 2024-09-18 23:52:53 发布

一只哆啦呀

最新推荐文章于 2024-09-18 23:52:53 发布

阅读量561

点赞数

分类专栏：前端项目文章标签：前端 vue.js

本文链接：https://blog.csdn.net/a777756/article/details/125823125

版权

本文介绍了一个使用Vue.js技术栈构建的TodoList前端项目，涵盖了Vue-CLI的使用，组件间的通信方法，如全局事件总线、自定义事件、消息发布与订阅，以及利用本地存储持久化数据等关键知识点。

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

实例:

技术栈：三大组件、Vue

涉及知识点：Vue-CLI、组件通信、全局事件总线、自定义事件、消息发布与订阅、本地存储

// main.js

// 项目入口
// 引入Vue
import Vue from 'vue'
// 尹瑞App组件
import App from './App.vue'
Vue.config.productionTip = false

// 创建Vue实例对象--vm
// new Vue({
//   render: h => h(App),
// }).$mount('#app')
new Vue({
  el: '#app',
  render: h=>h(App),
  beforeCreate(){
    // 安装全局事件总线
    Vue.prototype.$bus = this;
  }
})

// App.vue

<template>
  <div id="root">
      <div class="todo-container">
        <div class="todo-wrap">
          <MyHeader @addTodo='addTodo'/>
          <!-- 传给子组件 -->
          <!-- <MyList :todos='todos' :checkTodo='checkTodo' :deleteTodo='deleteTodo'/> -->
          <MyList :todos='todos'/>
          <MyFooter :todos='todos' @checkAllTodo='checkAllTodo' @clearAllTodo='clearAllTodo'/>
        </div>
      </div>
  </div>
</template>

<script>
import pubsub from 'pubsub-js';
import MyHeader from './components/MyHeader.vue';
import MyList from './components/MyList.vue';
import MyFooter from './components/MyFooter.vue';


export default {
  name: 'App',
  // 注册
  components: {
    MyHeader,
    MyList,
    MyFooter,
  },
  data(){
      return {
          // todos:[
              // {id:'001',title:'吃饭',done:true},
              // {id:'002',title:'睡觉',done:false},
              // {id:'003',title:'学习',done:true},
          // ]
          todo