使用vue-cli完成todolist业务

vue-cli:为单页面应用快速搭建繁杂的脚手架
main.js是整个项目的入口文件，在此处引入组件并在页面显示。
index.html是页面。
src中存放源码。
package.json中定义了script命令标签。
全局样式与局部样式：
当在页面中写

<style scoped>
/* scoped 给样式添加了作用域，只作用在本页面 */
</style>

则为局部样式，否则全局内同名样式会相互影响

TodoList.vue

<template>
<!-- template模板下只能有一个最外层的包裹元素 -->
  <div>
    <input v-model="inputValue">&nbsp;
    <button @click="handleSubmit">提交</button>
    <div>
    <ul>
      <todo-item 
        v-for="(item, index) in list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todo-item>
    </ul>
    </div>
  </div>
</template>

<script>
// ./表示当前目录下
// 将局部组件注册到本组件中，并使用（引入、声明、使用）
import todoItem from './components/todoItem.vue'
export default {
    components: {
      'todo-item' : todoItem
    },
    //data之前是个对象，但在脚手架工具中，data是个函数
    data() {
      return{
          inputValue: '',
          list: []
      }
    },
    methods:{
      handleSubmit() {
        //this指向实例
        this.list.push(this.inputValue),
        this.inputValue = ''
      },
      handleDelete(index) {
        this.list.splice(index, 1)
      }
    }
}
</script>

<style>

</style>

todoItem.vue

<template>
<!-- 使用content -->
<!-- 组件中的template就是页面中显示的内容 -->
  <li @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  //接收父组件传来的数据，声明对content的接收
  props: ['content', 'index'],
  methods: {
    handleDelete() {
      this.$emit('delete', this.index)
    }
  }
}
</script>

main.js

import Vue from 'vue'
import TodoList from './TodoList.vue'

Vue.config.productionTip = false

new Vue({
  //=> 箭头语法，定义一个方法h，return为h(TodoList)，括号里的为引入的vue实例
  //该方法声明了这个组件渲染的是TodoList的内容，接下来用$mount进行挂载
  //声明+挂载
  render: h => h(TodoList),
  //mount挂载到html的结点上，这里在index.html中声明了一个app结点
}).$mount('#app')