Vue.js简介

Vue.js的作者为Evan You（尤雨溪），任职于Google Creative Lab，虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的AngularJs，下面我会将Vue与Angular（Angular 1.0+版本）做一些简单的比较。

Vue的主要特点就和它官网（http://cn.vuejs.org/）所介绍的那样：

（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化

简单

下面看一段Angular的实现双向绑定的代码

// html

<body ng-app="myApp">

    <div ng-controller="myCtrl">

        <p>{{ note }}</p>

        <input type="text" ng-model="note">

    </div>

</body>

// js

var myModule = angular.module('myApp', []);

myModule.controller('myCtrl', ['$scopp', function($scope) {

    $scope.note = '';

]);

然后再看一下Vue的代码

// html

<body>

    <div id="app">

        <p>{{ note }}</p>

        <input type="text" v-model="note">

    </div>

</body>

// js

var vm = new Vue({

    el: '#app',

    data: {

        note: ''

    }

})

相比较而言我个人认为Vue的代码编写风格更加简洁，并且通俗易懂。

不失优雅

Vue虽然是一个比较轻量级的框架，简单轻量的同时还非常的人性化，其提供的API也是非常的容易理解，同时也提供了一些很便捷的指令和属性。

例如：

（1）绑定click事件

<a v-on:click="doSomething"></a>

可以简写为：

<a @click="doSomething"></a>

(2) 绑定动态属性

<a v-bind:href="url"></a>

可以简写为：

<a :href="url"></a>

(3) 便捷的修饰符

<!-- 阻止单击事件冒泡 -->

<a @click.stop="doSomething"></a>

<!-- 只在按下回车键的时候触发事件 -->

<input @keyup.enter="submit">

(4) 实用的参数特性

<!-- debounce 设置一个最小的延时 -->

<input v-model="note" debounce="500">

<!-- 在 "change" 而不是 "input" 事件中更新数据 -->

<input v-model="msg" lazy>

怎么样，是不是感觉优雅极了。

小巧

说起小巧，那应该首先要关注下Vue的源码大小，Vue的成产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb，相比Angular的144kb缩小了一半。

小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合其他库方面它给了用户更大的空间。

如Vue的核心默认是不包含路由和 Ajax 功能，但是如果项目中需要路由和AJAX，可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource，同时你也可以使用其他你想要使用的库或插件，如jQuery的AJAX等。

是不是感觉非常的灵活。

不乏大匠

Vue虽然小巧，但是“麻雀虽小五脏俱全”，在构建大型应用的时候也是得心应手。

(1) 模块化

结合一些第三方模块构建工具，如CommonJS、RequireJS或者SeaJs，可以轻松实现代码的模块化。

但是在这里小编不推荐使用上述构建工具，直接使用ES6的模块化功能，再结合Webpack进行相应打包是目前最热门的方案。

不了解ES6模块功能的可以详见：http://es6.ruanyifeng.com/#docs/module
在今后的文章中，我也会对其进行介绍，包括Webpack的配置。

(2) 组件化

Vue的组件化功能可谓是它的一大亮点，通过将页面上某一组件的html、CSS、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。

例如：

// App.vue

<template>

    <div class="box" v-text="note"></div>

</template>

<script>

export default {

    data () {

        return {

            note: '这是一个组件的html模板！'

        }

    }

}

</script>

<style scoped>

.box {

    color: #000;

}

</style>

我们还可以在组件里写一些预处理语言：

// App.vue

<template lang='jade'>

    div(class="box" v-text="text")

</template>

<script>

export default {

    data () {

        return {

            note: '这是一个组件的html模板！'

        }

    }

}

</script>

<style lang="stylus">

.box

    color: #000

</style>

当然这样写我们是需要通过webpack来进行打包的，推荐使用Webpack + vue-loader的方式，同时使用ES6语法，需要安装babel来进行转换。因为文章为浅谈Vue.js，所以这里不做深入介绍。

(3) 路由

和Angular一样，Vue也具有它的路由功能。通过路由功能，我们可以实现各个组件的按需加载，轻松构建单页应用。下面是一个简单的路由配置文件：

// router.js

'use strict'

export default function(router) {

    router.map({

        '/': {

            component: function (resolve) {

              require(['./components/Foo.vue'], resolve)

            }

        },

        '/foo': {

            component: function (resolve) {

              require(['./components/Foo.vue'], resolve)

            }

        },

        '/bar': {

            component: function (resolve) {

              require(['./components/Bar.vue'], resolve)

            }

        }

    })

}

如需查看具体的路由配置及使用，移步官方提供的文档：http://vuejs.github.io/vue-router/zh-cn/index.html

Vue.js简介的更多相关文章

  1. vue学习（一）、Vue.js简介

    Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...

  2. Vue.js简介及指令

    1.Vue.js的特点 Vue.js是一个Javascript MVVM(Model-View-ViewModel)库,与传统Jquery的区别在于,Vue.js舍弃了繁杂的DOM操作, 如取DOM值 ...

  3. vue.js 简介

    Vue.js是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层 ...

  4. Vue.js的简介

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view   Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大 ...

  5. 前端开发之走进Vue.js

    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...

  6. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  7. 走进Vue.js

    走进Vue.js Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解 ...

  8. Vue.js 实战总结

    最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...

  9. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

随机推荐

  1. ZooKeeper与Curator注册和监控

    Curator提供了对zookeeper客户端的封装,并监控连接状态和会话session,特别是会话session过期后,curator能够重新连接zookeeper,并且创建一个新的session. ...

  2. SQL1159 Initialization error with DB2 .NET Data Provider, reason code 7(问题补充)

    SQL1159 Initialization error with DB2 .NET Data Provider, reason code 7 需要注册GAC,修改注册表 IBM官方方案: http: ...

  3. 近期Windows 10 RedStone 2 Insider版本安装进度停留在百分之23、24解决方案

    近期安装Windows 10 RedStone 2的14965.14971会出现停留在23%或者24%的现象,解决办法是拔掉扩展的SD卡再重新安装.

  4. Web services 安全 - HTTP Basic Authentication

    根据 RFC2617 的规定,HTTP 有两种标准的认证方式,即,BASIC 和 DIGEST.HTTP Basic Authentication 是指客户端必须使用用户名和密码在一个指定的域 (Re ...

  5. PIN码计算锦集

    1. 腾达,C8:3A:35开头的MAC有效~network路由,MAC有效~以及00B00C开头的MAC有效之外的请您自己发现算法..这里只公布三个MAC地址算法,其余也可以算~这里就不公布出来了. ...

  6. C#基础总结之三循环控制-for-数组-乘法表-arraylist

    #region 第三天 作业 乘法表 ////正三角 //for (int i = 1; i < 10; i++) //{ // for (int j = 1; j <= i; j++) ...

  7. CentOS下Redis服务器安装配置

    说明: 操作系统:CentOS 1.安装编译工具 yum install wget  make gcc gcc-c++ zlib-devel openssl openssl-devel pcre-de ...

  8. 《微信小程序七日谈》- 第二天：你可能要抛弃原来的响应式开发思维

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...

  9. SQL Server里等待统计（Wait Statistics）介绍

    在今天的文章里我想详细谈下SQL Server里的统计等待(Wait Statistics),还有她们如何帮助你立即为什么你的SQL Server当前很慢.一提到性能调优,对我来说统计等待是SQL S ...

  10. 初涉SQL Server性能问题（2/4）：列出等待资源的会话

    在初涉SQL Server性能问题(1/4)里,我们知道了如何快速检查服务器实例上正运行的任务数和IO等待的任务数.这个是轻量级的脚本,不会给服务器造成任何压力,即使服务器在高负荷下,也可以正常获得结 ...