Vue完成TodoList案例

看了两天的Vue的，还是上手写一个简单的TodoList的更实用（文末有彩蛋）。

一，使用VUE-CLI脚手架快速搭建一个框架

利用VUE-CLI来自动生成我们项目的前端目录及文件，方法：

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

这样我们的一个基于的WebPack的VUE项目目录就可以快速构建好了。
目录如下：

目录

二，完成一个简单的TodoList的

接下来就看一下webpack.base.conf文件，这是核心文件，必须执行的文件，这里可以看到入口和输出，这就是入口和输出路径，在入口处看到了./src/main.js， Main.js .v ue ve，并加载了.v .v App.vue，的确列表.v .v .v .v .v App.vue的

简单的TodoList的我们可以完成这几个功能：

1、显示todo列表
2、判断列表任务完成状态，若完成则添加相应的样式
3、在输入框中动态添加todo项目，点击回车在列表中显示
4、点击相应的项目转换状态

• 首先我们完成显示列表的功能：

<template>
  <div id="app">
    <input/>
    <ul>
      <li v-for="item in items">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            label: 'read books',
            isFinished: false
          },
          {
            label: 'eat dinner',
            isFinished: true
          }
        ]
      }
    }
  }
</script>

效果

export后面的对象，作为作为new vue（）的参数，来创建一个Vue的组件，并导出。

• 判断任务的完成状态，完成则添加文字修饰样式
  官方文档中我们可以看到：

  
  
   

  

  绑定类样式
  
  

  如果V-结合中类后是一个对象的话，键代表添加的类的名称，值值代表一个布尔值，用来控制这个类属性的有无。
  所以我们就可以这样：

<template>
  <div id="app">
    <input/>
    <ul>
      <li v-for="item in items" v-bind:class={finished:item.isFinished}>
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            label: 'read books',
            isFinished: false
          },
          {
            label: 'eat dinner',
            isFinished: true
          }
        ]
      }
    }
  }
</script>

<style>
  .finished {
    text-decoration: line-through;
  }
</style>

 

效果

• 在输入框中填写项，回车点击完成添加列表并显示同时清空输入框内容
  用到的知识：

  
  
   

  

  监听回车
  
  
   

  

  表单控件监听

<template>
  <div id="app">
    <input v-on:keyup.enter="addNewItem" v-model="newItem"/>
    <ul>
      <li v-for="item in items" v-bind:class={finished:item.isFinished}>
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            label: 'read books',
            isFinished: false
          },
          {
            label: 'eat dinner',
            isFinished: true
          }
        ],
        newItem: ''
      }
    },
    methods: {
      addNewItem () {
        this.items.push({label: this.newItem,isFinished: false})
        this.newItem = ''    //清空输入框
      } 
    }
  }
</script>

<style>
  .finished {
    text-decoration: line-through;
  }
</style>

• 进行内容点击状态转换
  在李标签上绑定一个单击事件，点击时修改isFinished

//添加代码
 <li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)">
        {{item.label}}
 </li>

methods: {
 finish (item) {
        item.isFinished = !item.isFinished
   }
}

这样一个简单的TodoList的的基本功能已经完成。

 

动图效果

.