版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012326462/article/details/82820251
首先看下面代码：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定 mvvm-->
<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: 在表单或者组件上创建双向绑定，这里绑定vue实例中的inputValue值。双向绑定的意思是指：vue实例中的inputValue值变化，页面上的值也会变化，页面上的值变化，vue实例中变量的值也会变化，也就是mvvm。
v-on: 绑定事件，这里绑定click事件，触发handleBtnClick这个方法
v-for:是循环，把list里面的值放到item中，然后再<li>标签中显示
页面显示效果如下，点击提交，元素会放到下面<ul>列表中
