基於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...