v-for 指令可以绑定数组的数据来渲染一个项目列表。
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。
使用二者写了一个简单的例子
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for='user in users'>
姓名:{{user.name}} 年龄:{{user.age}}
</li>
</ul>
输入姓名：<input type="text" ref="name">
输入年龄：<input type="text" ref="age">
<button v-on:click="insetOne">插入</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
users:[
{name:'xiaoming',age:24},
{name:'xiaohone',age:26},
{name:'xiaowang',age:28}
]
},
methods:{
insetOne:function(){
console.log();
let item = {
name: this.$refs.name.value,
age: this.$refs.age.value
}
this.users.push(item);
}
}
})
</script>
</body>
</html>注意：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
如用在普通标签上
<div ref="demo"></div>作用相当于：
document.querySelector('[ref=demo]');v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>