2.2使用组件化改造TodoList

<!--
      Vue 采用MVVM设计模式，数据绑定写法
  -->
<div id="app">
    <!--
        模板指令
     1.循环指令：v-for:
     2.事件绑定指令 v-on:
     3.inputValue 数据的双向绑定
 -->
    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <todo-item v-bind:content="item"  v-for="item in list"></todo-item>
    </ul>
</div>


<!--
    1.获取元素 '#app'
    2.this.inputValue // 自动寻找data中inputValue 字段并获取值
-->
<script>

    <!--全局组件的使用(不需要注册)-->
    // Vue.component("TodoItem",{
        // props:['content'],
    //     template:"<li>{{content}}</li>>"
    // })

    // 局部组件的创建
    var TodoItem ={
        props:['content'],
        template:"<li>{{content}}</li>"   //子组件的模板
    }

    var  app = new Vue({
        el:'#app',
        // 局部组件的使用需要注册
        components:{
          TodoItem:TodoItem
        },
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            handleBtnClick:function () {
                if(!this.inputValue==''){
                    this.list.push(this.inputValue)
                    this.inputValue =''
                }

            }
        }
    })

</script>