Vue作为基于组件化的轻量级框架，专注于构建用户界面的视图层；既可以用于简单的项目，也适用于使用前沿技术的大规模复杂项目。Vue得到众多开发者的喜爱并投以研究。这里将介绍一下Vue的简单上手：
Vue、Angular以及React
Vue：
在指令上——v-xxx格式；
在使用上——以一片HTML代码配合JSON再new出来的实例；
Angular：
在指令上——ng-xxx格式；
在使用上——所有属性和方法都挂在$scope上；
React
在语法上——采用JSX语法糖
在使用上——采用声明范式，通过虚拟DOM渲染页面
Vue基本雏形
相较于Angular模块注入的形式：
<html lang="en" ng-app="app">
<body>
<ul ng-controller="ctrl">
<li ng-repeat="value in arr track by $index">{{$index}}_{{value}}</li>
</ul>
</body>
<script>
let myApp=angular.module('app',[]);
myApp.controller('ctrl',$scope=>{
$scope.arr=[1,2,3,4,5];
});
</script>
Vue以new一个实例的形式，通过选择器与JSON完成页面渲染：
<body>
<ul id="box">
<li v-for="value in arr">{{$index}}_{{value}}</li>
</ul>
</body>
<script>
let c=new Vue({
el:'#box', //选择器
data:{ //JSON形式的数据流
arr:[1,2,3,4,5]
}
});
</script>
Vue常用指令
-
v-model常用于表单元素比如input，用于数据绑定； -
v-for循环，无论是Array还是JSON都可以轻易搞定； -
v-show/hide显示隐藏，通过Boolean值进行调节； -
v-on事件绑定，函数通过methods定义；
<body>
<div id="box">
<input type="button" v-on:click="add()" />
</div>
</body>
<script>
let c=new Vue({
el:'#box',
data:{
arr:[1,2,3,4,5]
},
methods:{
add:function(){
this.arr.push(6);
}
}
});
</script>
还有很多指令以及用法在简单上手的部分就不再多说，更多的自定义功能和Vue-router等内容都需要我们自己阅读文档并在实际项目中融会贯通，一起提升自己吧。
