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. Android showing LoadingView or EmptyView for Activity or Fragment

    这几天利用一些时间,整理了一下,写了一个简单的工具类,用来快速的显示LoadingView或者EmptyView,以前都是定义一个layout,根布局为FrameLayout,再在layout布局文件 ...

  2. linux硬链接和软链接的区别

    1.原理上: 硬链接(hard link):A是B的硬链接(A和B都是文件名),则A的目录项中的inode节点号与B的目录项中的inode节点号相同,即一个inode节点对应两个不同的文件名,两个文件 ...

  3. archlinux 下 nignx + php 出现 no input file specified

    奇葩的问题,配置 nginx + php + mysql 后,加一个站点: server { listen 80; server_name wei.abc.com; root /www/wei.abc ...

  4. HTML CSS——margin和padding的学习

    你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...

  5. Netty5 + WebSocket 练习

    1. 了解WebSocket知识 略2. websocket实现系统简单反馈时间 WebSocketServerHandler.java package com.jieli.nettytest.web ...

  6. Qt5 从头学（1）-- 环境

    对我来说MFC太过麻烦了,同样是桌面开发工具,Qt就完全不一样了.Qt使用C++语言可以轻松实现"一次编写,到处编译"的跨平台性能,并且可以做出很多炫酷的界面效果.目前支持几乎所有 ...

  7. cocos2d-x中使用可加密Sqlite存储玩家数据

    手机游戏当中的数据存储是一个重要的课题.cocos2d-x发展到现在的版本2.1.4,已经直接实现了对sqlite的支持(extensions/LocalStorage),这对我们一般的数据存储已经够 ...

  8. java简单统计.java文件中的有效代码行，空行，注释行

    package regxdemo; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundExc ...

  9. Oracle 给已创建的表增加自增长列

    对于已经创建的表,在特殊需求下,需要增加一个自增长列步骤: --1. 增加 自增长列 ); --2. 程序方式更新设置 IdNum 列 值 --3.查询最大 ) From Limsbusinessen ...

  10. 充实你的素材库！10款免费的 PSD 素材下载

    由于网页设计师没有时间来自己从零开始设计,所以在设计项目中使用网络上已有的设计素材是常见的方式.这就是为什么我们经常会到网上搜索可以免费下载的素材. 今天,我们这里有几套不同的免费的 PSD 素材分享 ...