使用vue-cli编写todolist组件

npm run dev

            <!--
            模板
            -->
            <
            template
            >
            <
            div
            >
            <
            div
            >
            <
            input 
            class
            ="item"
             v-model
            ="inputValue"
            />
            <
            button 
            @click
            ="submit"
            >提交</button><ul><todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="mydelete"></todo-item></ul></div></div></template><script>
import TodoItem from ‘./components/TodoItem‘// 此处用来写逻辑,必须空出一行去写export default {
  // 这块必须用函数去操作，注意缩进，缩进不对的话各路报错  components: {
    ‘todo-item‘: TodoItem
  },
  data () {
    return {
      inputValue: ‘‘,
      list: []
    }
  },
  methods: {
    submit () {
      this.list.push(this.inputValue)
      this.inputValue =‘‘
    },
    mydelete (index) {
      this.list.splice(index, 1)
    }
  }
}
</script><!--这个标签用于写样式--><style scoped></style>

            <
            template
            >
            <
            li 
            class
            ="item"
             @click
            ="deleteItem"
            >{{content}}</li></template><script>
export default {
  props: [‘content‘, ‘index‘],
  methods: {
    deleteItem () {
      this.$emit(‘delete‘, this.index)
    }
  }
}
</script><!-- Add "scoped" attribute to limit CSS to this component only --><!--scoped作用域，设置样式仅用于当前类，不加就是全局生效--><style scoped>
  .item {color: aqua}</style>