vue起步：制作todolist

第一步：简易的todolist

  

    
    提交
    

      
{{item}}
    
  

vue中使用双大括号{{}}进行插值

  var app = new Vue({
      el: '#app',
      data: {
        list: [],
        inputValue: ''
      },
      methods: {
        upData: function(){
          this.list.push(this.inputValue)
          this.inputValue = ''
        }
      }
    })

初始化vue并实现添加后清空input框

第二部：使用全局组件改写

  

    
    提交
    

      
      
    
  

使用Vue.component实现全局组件，其中第一个参数是组件名（不要使用驼峰命名，在html中会被转化为短横线，所以直接使用短横线更好）

    Vue.component('todo-item', {
      props: ['content'], // 这里子组件接收父组件传的值，通过v-bind绑定的父组件中item
      template: '
{{content}}
'
    })

父组件向子组件传值，子组件使用props接收。在父组件中使用bind绑定需要传给子组件的值。

第三部：使用局部组件
html部分不变

    var todoItem = {
      props: ['content'],
      template: "
{{content}}
"
    }

并在实例中使用component注册使用

      // 局部注册组件
      components: {
        // “键”和“值”一样时可缩写
        todoItem
      },

第四部：现在list点击删除相应项
个人理解（不一定正确）：（在自定义组件中‘=’前边的都是子组件中使用到的，‘=’后边的都是父组件中使用到的）

    var todoItem = {
      props: ['content', 'index'],
      template: "
{{content}}
",
      methods: {
        // 这里的方法就是组件内的方法
        clickLi: function(){
          // 这里是为了触发子组件模板内事件（不能使用驼峰命名），然后触发父组件相应事件
          this.$emit("removeli", this.index)
          // 第一个参数是子组件内事件名，第二个是子组件向父组件传递的参数
          // 这里定义了父组件的事件名和传入父组件的参数
        }
      }
    }

    var app = new Vue({
      el: '#app',
      // 局部注册组件
      components: {
        todoItem
      },
      data: {
        list: [],
        inputValue: ''
      },
      methods: {
        upData: function(){
          this.list.push(this.inputValue)
          this.inputValue = ''
        },
        deleteLi: function(index){
          this.list.splice(index, 1)
        }
      }
    })