Vue.js的学习1.0
有看过angular的话，再看vue的话是不陌生的，也是相对容易上手的。
那么vue和angular有什么区别呢？
vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目
适合: 移动端项目,小巧
angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目
共同点: 不兼容低版本IE
1.hello vue
举个栗子：
1.引入vue.js
<script type="text/javascript" src="vue.js"></script>
<script>
window.onload=function(){
var c=new Vue({
el:'#div1',//这是一个选择器，说明要把数据展示到div1里面
data:{
msg:'welcome vue'
}
});
};
</script>
<body>
<div id="div1">
{{msg}}
</div>
</body>
</html>2.vue循环（ v-for）
angular中用的是ng-repeat
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
//循环数组
arr:['apple','banana','orange','pear'],
//循环json
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value}} {{$index}}
</li>
</ul>
<hr>
<ul>
<li v-for="value in json">
//json 咱主要就是想拿到这个key
{{value}} {{$index}} {{$key}}
</li>
</ul>
<hr>
<ul>
<li v-for="(k,v) in json">
//你要实在记不住这个key，也可以这样写
{{k}} {{v}} {{$index}} {{$key}}
</li>
</ul>
</div>
</body>
</html>3.基础点击事件（v-on:click=“”）
v-on — 就相当于绑定一个事件
点击按钮后数组增加tomato
script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
//放函数、方法...
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>