TodoList demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src = './vue.js'></script>
</head>
<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>
</html>
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>
</html>1. <li v-for="item in list"></li> 告诉 Vue 在 li 标签里面要循环 list 中的数据，循环的每一项都放到 item 里面
2.<button v-on:click="handleBtnClick"> 调用函数 handleBtnClick ，将其定义在 methods 中
3.v-model="inputValue 指的是数据的双向绑定(把 input 中的 Vue 值与 data 中的 inputValue 值进行绑定，一个变化另一个随之变化)，当 Input 框中内容发生变化的时候，data 中的 inputValue 就会随之变化
4.this.list.push(this.inputValue) Vue 的实例会自动的到 list 中寻找 inputValue,这里的 inputValue 与 data 中的 inputValue 是一回事 ;每次提交时能获取到 inputValue 中的内容，将其加入到 list 数据里面，使其中数据发生变化，进而导致页面发生相同的变化
5. this.inputValue = '' 在每次提交后将框中的内容清空
运行结果
