Vue起步_使用组件化思想修改TodoList

    
    
    
    



   

       
       提交
       

           
{{item}}
       
   

   

把

标签的内容整体变为组件：

   

       
       提交
       

           
           
       
   

   

v-bind指令：

向子组件传入一个绑定值

使用全局组件

通过content字段传值，子组件中通过props:  ['content']接收值。

    

        
        提交
        

            
        
    

    

局部组件

var TodoItem = {

props: [ 'content'],

template: "

{{content}}

"

}

将局部组件注册到根Vue实例里（通过对象的方式）：

var app = new Vue({

el: '#app',

components: {

TodoItem: TodoItem

},

data: {

list: [],

inputValue: ''

},

methods: {

handleBtnClick : function () {

this. list. push( this. inputValue)

this. inputValue = ''

}

}

})