【11】前端实习：VUE 使用vue-cli做一个todolist （完整详细代码）

这是用命令行创建一个新vue项目 

vue init webpack projectName

cd projectName 

npm install

npm run dev

 

首页是引用的 todolist.js的组件模板

 然后新建一个组件： todolist.js

<template>
    <div>
        <div>
          <input v-model="inputValue"/>
          <button @click="handleSubmit">提交</button>
        </div>
        <ul>
        <todoItem 
            v-for="(item,index) of list"
            ::key="index"  
            :content="item" 
            :index ="index"
            @delete = "handleDelete"
        ></todoItem>
        </ul>
    </div>
</template>


<script>
    import todoItem from './components/todoItem.vue'
export default {
    components: {todoItem},
    //以前data是一个对象，现在在vue-cli里应该是一个函数，简写为： data() {}
    data : function() {
        return {
            inputValue: '',
            list: []
        }
    },
    methods: {
      handleSubmit () {
         this.list.push(this.inputValue)
         this.inputValue = ''//让输入框为空
      },
      handleDelete (index) {
         this.list.splice(index,1)//从索引位置开始删除，将该索引处的值删除掉就好
      }
    }
}
</script>
    
  

<style>

</style>

 然后在components里面新建一个组件： todoItem.js

 

路由：

简易的todolist就完成啦：

 

问题解决：

1.关于vscode里.vue 补全html代码，需要去下载 HTML snippets。 然后再setting 里面将 files.associations补全。

 

2.期间会报一些找不到引用的组件之类的错，去检查一下代码拼写错误没有，比如：

methods  写成了method。