开发TodoList(v-model,v-for,v-on)

1.v-for

for循环：v-for="item in list"中的item 为list中的每一项，类似for in 循环

<body>
   <div id="app">
       <input type="text"/>
       <button>提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: ['第一课的内容', '第二课的内容','第三课的内容']
           }
       })
   </script>
</body>

2.v-on

为元素绑定事件

<body>
   <div id="app">
       <input type="text"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: []
           },
           methods: {
            handleBtnClick: function(){
                alert('click')
            }
           }
       })
   </script>
</body>

3.v-model

Vue实例中data中的数据与元素的数据实现双向绑定。

验证如下：

1）input框输入123333，可以得到在data中的inputValue与Input框中相同的值

2）控制台改变data中inputValue值，可以得到input框中相同的值：

总结：Vue实例中data中的数据与元素的数据实现双向绑定。

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
                alert(this.inputValue)
            }
           }
       })
   </script>
</body>

初始list为空，input框输入内容，点击button按钮，生成li标签,往list里添数据

通过往data里面加入input写入的值，再由于双向绑定，输出data里的list值，当data发生变化，页面就会变化。

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
            }
           }
       })
   </script>
</body>

提交之后把input框清空

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
               this.inputValue = ''
            }
           }
       })
   </script>
</body>

MVVM模式，不操作dom，只通过修改数据来改变页面。