vue-cli todolist-加载列表--删除 组件间通信

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Todolist from './Todolist'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { Todolist },
  template: '<Todolist/>'
})

Todolist.vue

<template>
  <div id="app">
      <input type='text' v-model="inputValue">
      <button @click="handleSubmit">提交</button>
      <ul>
          <todoitem @delete="handledetele" v-for="(item,index) of list" :content="item" :index="index"></todoitem>
      </ul>
  </div>
</template> 

<script>
  import Todoitem from "./components/Todoitem"
  export default {
      components : {
        'todoitem' : Todoitem
      },
      
      data () {
        return {
          inputValue : "",
          list : []
         }
      }, 
      methods: {
        handleSubmit () {
          this.list.push(this.inputValue)
          this.inputValue=''
        },
        handledetele(index) {
          this.list.splice(,1)
        }
      }
  }
</script>

<style>
</style>

./components/Todoitem.vue

这个demo联系是从慕课网上学来的，自己联系了几遍只能掌握点vue的原理，包括语法和组件间的通信，以及引用和导出，还有最基础的语法