使用vue-cli编写一个to-do-list

准备工作

• 安装node
• 安装npm
• 安装vue-cli

使用vue-cli创建一个vue项目

我们打算在桌面进行创建一个vue项目。在命令行中的桌面文件下进行执行以下的命令：

vue init webpack todolist

进行上面的简单设置之后，即可进行项目的初始化，期间主要会进行安装一些项目所依赖的包。

启动项目

在命令行工具中运行如下：

npm run dev或者 npm run start

然后进行访问localhost8080即可进行访问我们所创建的vue项目。

项目编写

添加功能

下面主要就是在src文件夹下进行代码的编写：

其中main.js主要就是入口的文件, 将App.vue这个组件更换为Todolist.vue如下：

<template>
  <div id="root">
    <input v-model="content"/>  
    <button @click="bt1">提交</button>
    <ul>
      <li v-for="(item, index) of lis"
          :key="index"
          >
          {{item}}
      </li>
    </ul>   
  </div>
</template>

<script>
export default {
  data(){//注意此处和一般的new Vue实例中的数据不太一样，此处是使用函数的形式，且由于是使用了es6的语法，因此去掉了function关键字
    return{
      content:"hello",
      lis:[]
    }
  },
  methods:{
    bt1:function(){
      this.lis.push(this.content)
      this.content = ''
    },
  }
}
</script>

<style>

</style>

main.js文件的内容如下：

import Vue from 'vue'
import Todolist from './Todolist' //相当于导入一个组件

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', 
  components: { Todolist }, //声明导入的组件
  template: '<Todolist/>' //模板中展示这个组件的内容
})

直接在命令行中进行启动：

npm run dev

运行结果如下所示: 每次点击提交都会将input中的内容提交到下面的列表中

添加功能的组件化实现

上面的代码的结构主要就是：main中引入了一个组件Todolist。为更好地完善项目，可以将组件（一个vue实例就可以认为是一个组件，当然它也可以包含很多其他的子组件）进行细化，即将Todolist组件中的li直接封装成一个组件：TodoItem。

在components下面创建一个TodoItem.vue文件

<template>
  <div>
    item        
  </div>
</template>

<script>
export default {
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

将Todolist.vue中<ul>中的li标签内容先进行删除。然后导入新创建的Todolist组件。即Todolist文件如下：

父组件往子组件中进行传值：以属性的方式进行传值

由于将<li>的代码组件化了，那么就要考虑父组件如何向子组件中进行传递数值，即父组件如何将Input标签中的内容传递给子组件li, 对于父组件向子组件中传值，采用的是属性的方式。

即在父组件文件Todolist.vue中的todo-item 标签中进行书写如下：

<todo-item 
        v-for="(item, index) of lis"
        :content="item"
        :key="index"
>
</todo-item>

即父组件通过在子组件标签的content属性为其传入父组件的值。那么接下来还需要在子组件文件TodoItem中进行接收，即在export default中添加对象：prop;[‘content’], 然后子组件就可以使用插值表达式{{content}}了。子组件中的内容如下：

<template>
  <li>
    {{content}}
  </li>
</template>

<script>
export default {
  props:["content"]
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

删除功能

上面完成了添加功能的组件化实现，下面进行完成删除功能的组件化实现。主要牵扯到子组件如何向父组件中进行添加元素的实现：
子组件向父组件中传入数据主要采用发布订阅的方式。

在父组件文件中：