hualinux 进阶 vue 2.2：使用vue cli实现todolist

目录

一、关于用vue cli实现todolist

1.1 使用vue cli实现todolist说明

1.2 目录说明

二、实现代码

2.1 TodoItem.vue代码

2.2 App.vue代码

2.3 运行效果

---

我在《hualinux 进阶 vue 1.14：todolist（四）删除数据》的例子中，用<script>标签导入vue.js文件，并以数组的方式实现了添加和删除功能。

现在我将使用上章vue cli方式创建的工程的基础上，编写一个todolist的添加和删除，具体分析过程我不多说了，因为已经说了。

一、关于用vue cli实现todolist

1.1 使用vue cli实现todolist说明

用vue cli创建工程实现todolist思路和代码是差不多的，只是写把法修改一下。

1. data不使用对象，使用的是函数方式。
2. 组件与父组件分离，并不在同一个文件中，有专用的组件目录

1.2 目录说明

我是在上章《vue cli默认项目结构及其vue编写规则》的基础上直接使用其项目进行修改的。我把HelloWorld.vue文件修改为TodoItem.vue，如下图所示：

我只需要修改TodoItem.vue和App. vue根vue即可，其它的一律不需要修改。

二、实现代码

2.1 TodoItem.vue代码

src/components/TodoItem.vue代码如下：

<template>
<li @click="t1">{{content}}</li>
</template>

<script>
export default {
  name: 'todoItem',
  props: ['content','fatherIndex'],
  methods:{
    t1: function (){
      this.$emit("delete",this.fatherIndex);
    }
  },

}

</script>

2.2 App.vue代码

src/App.vue代码如下：

<template>
  <div id="app">

    <div>
      <input v-model="note"/>
      <button v-on:click="myClick">提交</button>
    </div>
    <ul>
      <!-- 定义一个名为 delete 的事件，并调用del函数 -->
      <todo-item
          v-for="(item,index) of list"
          :key="index" :content="item"
          :father-index="index"
          @delete="del">
      </todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue'

export default {
  name: 'App',
  components: {
    'todo-item':TodoItem
  },
  data(){
    return{
      note: '',
      list: []
    }
  },
  methods: {
    myClick: function (){
      this.list.push(this.note)
      this.note=''
    },
    del: function (index){
      this.list.splice(index,1);
    }
  }
}
</script>

<style>
/* 没有样式*/
</style>

2.3 运行效果

运行一下

当正下方显示正常给人访问地址的时候，就可以访问了

访问效果如下：