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. PLSQL快捷补充代码设置

    菜单Tools-->Preferences...然后依次选择下图红色选项 弹出下图对话框 输入需要快速生成的语句点击保存 点击Save后在slq窗口中输入 设置的语句缩写 列入:第一个sf  然 ...

  2. Java Garbage Collection Basics--转载

    原文地址:http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/gc01/index.html Overview Purpose ...

  3. 【转载】Linux动态库搜索路径的技巧

    转自:http://soft.chinabyte.com/os/232/11488732_2.shtml 众所周知,Linux动 态库的默认搜索路径是/lib和/usr/lib.动态库被创建后,一般都 ...

  4. Python - 获取帮助信息

    1- Python Manuals 自带CHM格式的Python Manuals存放在\Python<x.x>\Doc\目录下.可以在IDLE界面下按F1键或点击help选项下Python ...

  5. 求1+2+3+...+n

    求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 卧槽,剑指Offer竟然有这样的题... public ...

  6. 读Java Concurrency in Practice. 第六章.

    这一章开讲任务执行.绝大多数并发程序的工作都可以分解为抽象的.互不相关的工作单元,称之为任务(Task). 使用java线程来执行任务 以web服务器的实现举例, 此时将用户的一次连接,当做一个独立的 ...

  7. IOS开发中设置控件内容对齐方式时容易混淆的几个属性

    IOS开发中四个容易混淆的属性: 1. textAligment : 文字的水平方向的对齐方式 1> 取值 NSTextAlignmentLeft      = 0,    // 左对齐 NST ...

  8. WatiN框架学习

    WatiN 是一个源于 Watir的工具,开源且用于web测试自动化的类库.Web Application Testing in .NET. WatiN 通过与浏览器的交互来实现自动化,使用起来具有轻 ...

  9. [新手学Java]反射学习笔记

    示例类 @SuppressWarnings("unused") public class Person { public String Name; private int Age; ...

  10. WebApi传参总动员(四)

    前文介绍了Form Data 形式传参,本文介绍json传参. WebApi及Model: public class ValuesController : ApiController { [HttpP ...