Vue的简单上手

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等内容都需要我们自己阅读文档并在实际项目中融会贯通，一起提升自己吧。

Vue的简单上手

Vue、Angular以及React

Vue基本雏形

Vue常用指令

推荐阅读更多精彩内容