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等內容都需要我們自己閱讀文檔并在實際項目中融會貫通，一起提升自己吧。
