基于vue+webpack的todo应用

项目目录如图所示

1.搭建项目框架
创建一个项目目录 learnvue
初始化 npm init
下载相关依赖 npm i webpack vue vue-loader vue-template-compiler css-loader html-webpack-plugin

---

构建项目框架的思路

创建index.js文件，将index.js文件打包生成新的js，再通过html-webpack-plugin编译成html页面。
而index.js文件引入负责各个业务逻辑的组件和公关组件。
主要代码如下，打包文件 webpack.config.js

const config = {
    target:'web',
    //输入文件
    entry:path.(__dirname,'src/index.js'),
    //输出
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    plugins:[
        //编译成html
        new htmlPlugin()
    ]
}
module.exports = config

主入口文件 index.js 负责生成vue实例，引入各个vue组件，渲染，控制路由等。
主要代码

import Vue from 'vue'
import App from './app.vue'
import router from './router.js'
import VueRouter from 'vue-router'
import './assets/styles/common.css'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
    router:router,
    render:(h)=> h(App)
}).$mount(root)

处理业务逻辑的思路
todo的主要功能有添加、勾选、删除事项，根据待办/已完成的状态查看待办事项

2.创建index.vue
开发完成后如图所示

将页面分为图上三个部分，所以分成三个子组件开发

将这几个操作分为input、items、tab三个部分

todo/items.vue

<template>
  <div class="item">
    <input
      type="checkbox"
      class="toggle"
      v-model="todo.completed"
    >
    <label
     :class="['',todo.completed===true?'completed':'']">{{todo.content}}</label>
    <button class="delete" @click="deleteItem"></button>
  </div>
</template>
<script>
export default {
  // props定义 在父组件获得 回传给子组件的属性
  props:{
    todo:{
      type:Object,
      require:true
    }
  },
  methods: {
    deleteItem(){
      // $emit('在父组件触发的事件名',子组件传递给父组件的参数)
      this.$emit('del',this.todo.id)
      }
  }
}
</script>

todo/tab.vue

<template>
  <div id="tab">
    <span class="left">{{unFinishedTodoLength}} items left</span>
    <span class="center">
      <span
       v-for="state in states"
       :key="state"
       :class="[state,filter===state?'isActive':'']"
       @click="toggleFilter(state)">
        {{state}}
      </span>
    </span>
    <span class="right" @click="clearItems">
    clear
    </span>
  </div>
</template>
<script>
export default {
  props: {
    filter:{
      type:String,
      require:true
    },
    todos:{
      type:Array,
      require:true
    }
  },
  data(){
    return {
      states:['all','active','complete']
    }
  },
  computed:{
    //动态修改当前事项数量
    unFinishedTodoLength(){
      return this.todos.filter(todo=> !todo.computed).length
    }
  },
  methods: {
    //切换筛选条件 active、complete、all
    toggleFilter(state){
      this.$emit('toggle',state)
    },
    //清除全部
    clearItems(){
      this.$emit('clearAll');
    }
  }
}
</script>

将items.vue,tab.vue引入到todo.vue组件中

<template>
  <div class="todo">
    <input
      autofocus="autofocus"
      type="text"
      name=""
      value=""
      placeholder="接下来要做什么"
      @keyup.enter = "addTodo"
    />
    <!-- @在子组件定义事件名="在父组件定义的方法名" -->
    <item
      v-for="todo in filteredTodos"
      :todo="todo"
      :key="todo.id"
      @del="deleteTodo"
    />
    <tabs :filter="filter"
          :todos="todos"
          @toggle="toggleFilter"
          @clearAll="clearAllComplete"
    />
  </div>
</template>
<script>
import item from './items.vue'
import tabs from './tabs.vue'
let id = 0;
export default {
  name: "",
  data: function data() {
    return {
      todos:[],
      filter:'all'
    }
  },
  components: {
    item,
    tabs
  },
  computed:{
    filteredTodos(){
      if(this.filter==='all'){
        return this.todos
      }
    const completed = this.filter === 'complete';
    return this.todos.filter(todo => completed === todo.completed)
    }
  },
  methods: {
    addTodo(e){
      this.todos.unshift({
        id:id++,
        content:e.target.value.trim(),
        completed:false
      });
      e.target.value = '';
    },
    deleteTodo(id){
      this.todos.splice(this.todos.findIndex(todo=> todo.id ===id),1)
    },
    toggleFilter(state){
      this.filter = state
    },
    clearAllComplete(){
      this.todos = this.todos.filter(todo=> !todo.completed);
    }
  }
}
</script>

详细代码 https://github.com/lazyChan29...