Vue已经是当下最流行的前端框架之一，所以本着好奇的心态来尝试一下。Vue本身的模板功能很强大，能够很好的在html标签中写入vue的变量来实现动态编程。Vue对象是框架的一个很重要的对象，它是有点类似于mvvm模式的一个架构模式。下面来看一下此对象中的一些属性的定义和用法：
el:'#app' el标签用来标定标签的id，data：{} data 用来定义数据，里边可以是任何自定义的数据，定义好后的变量可以在外边对变量进行修改，methods：{}里边定义方法，可以实现按钮的绑定或者方法的调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map">
<ul>
<li v-for="item,index in items" :key="index">
{{index}} {{item.message}}-{{item.count}}
</li>
</ul>
<div @click="click1">
<div @click="click2">click me</div>
</div>
</div>
<div>
<select id="agelist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<label id="monthsort">月设计数量排名</label>
<script type="text/javascript">
var app=new Vue({
el : "#map",
data:{
items : [
{message:'李三',count:22},
{message:'刘四',count:12},
{message:'薛六',count:5}
],
a:1
},
methods:{
click1:function(){
console.log("click1");
},
click2:function(){
console.log("click2");
}
}
});
app.$watch('a',function(newval,oldval){
console.log(oldval,newval);
});
app.$data.a=2;
</script>
</body>
</html>
上面对嵌套div的click绑定，会触发两次click，如果只响应子div的click，不触发父div的click，需要在子div的click后做@click.stop即可。
