Vueを使って簡単なtodoアプリケーションを作る3つの方法

1.vue.jsを参照

  
  


  

    
      
    

      

        {{item}}
      
    
  
  
  
    new Vue({
      el: '#root',
      data: {
        inputValue: '',
        lists: []
      },
      methods: {
        handlerAdd: function() {
          this.lists.push(this.inputValue);
          this.inputValue = '';
        },
        handlerDel: function(index) {
          this.lists.splice(index, 1);
        }
      }
    });
  

2.グローバルコンポーネント登録

  
  


  

    
      
    

      
      
    
  
  
  
    Vue.component('todoItem', {
      props: {
        content: String,
        index: Number
      },
      template: '<li @click="handlerClick">{{content}}</li>',
      methods: {
        handlerClick: function(){
          this.$emit('delete', this.index);
        }
      }

    });

    new Vue({
      el: '#root',
      data: {
        inputValue: '' ,
        lists: []
      },
      methods: {
        handlerAdd: function() {
          this.lists.push(this.inputValue);
          this.inputValue = '';
        },
        handlerDel: function(index) {
          this.lists.splice(index,1);
        }
      }
    });
  

3.vue-cli足場

// Todo.Vue




import TodoItem from './components/todoItem'

export default {
  data () {
    return {
      inputValue: '',
      lists: []
    }
  },
  methods: {
    handlerAdd () {
      this.lists.push(this.inputValue)
      this.inputValue = ''
    },
    handlerDel (index) {
      this.lists.splice(index, 1)
    }
  },
  components: {
    'todo-item': TodoItem
  }
}

// TodoItem.vue




export default {
  props: ['content', 'index'],
  methods: {
    handlerClick () {
      this.$emit('delete', this.index)
    }
  }
}