浅谈Vue.js

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

注：本文介绍的是Vue1.×，目前Vue已经升级至2.×，功能和语法上有一定升级和修改，想了解2.×的请移步：http://www.cnblogs.com/luozhihao/p/6014098.html

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带给我们的是前端一种解决问题的新的思维。

浅谈Vue.js的更多相关文章

浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
包学会之浅入浅出Vue.js：结业篇（转）
蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...
【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
包学会之浅入浅出Vue.js：升学篇
包学会之浅入浅出Vue.js:升学篇蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...
包学会之浅入浅出Vue.js：开学篇（转）
包学会之浅入浅出Vue.js:开学篇蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...
包学会之浅入浅出Vue.js：结业篇
在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通 ...
浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的初步使用方法与应用我们先来简单 ...
Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

随机推荐

转：C++语言的15个晦涩特性
转自 http://blog.jobbole.com/54140/ 操作符重载和检查顺序重载,(逗号),||或者&&操作符会引起混乱,因为它打破了正常的检查规则.通常情况下,逗号操作 ...
马士兵Servlet&Jsp学习
Servlet&JSP 1>http常见错误信息: 404--url地址找不找, 403--禁止访问 500--服务器内部错误 2>Servlet的生命周期: *生命全过 ...
php反射类 ReflectionClass
什么是php反射类,顾名思义,能够理解为一个类的映射.举个样例: class fuc { //定义一个类static function ec() {echo '我是一个类';}}$cla ...
【开发技术】常用正则表达式大全！（例如：匹配中文、匹配html）
匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度 ...
Git(查看修改记录)
我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...
Nginx之编译安装的nginx加入systemctl
编译安装的nginx需要添加rc.local 编译安装后设置 /usr/lib/systemd/system/nginx.service [Unit] Description=nginx After= ...
CentOS 与 Ubuntu 使用命令搭建 LAMP 环境
LAMP指的Linux操作系统 + Apache服务器 + MariaDB/MySQL数据库软件 + PHP开发语言的第一个字母. ==================CentOS LAMP===== ...
git 报错 error: insufficient permission for adding an object to repository database ./objects
参照:http://stackoverflow.com/questions/1918524/error-pushing-to-github-insufficient-permission-for-ad ...
pandas 初识（三）
Python Pandas 空值 pandas 判断指定列是否(全部)为NaN(空值) import pandas as pd import numpy as np df = pd.DataFrame ...
《Java并发编程实战》第四章对象的组合读书笔记
一.设计线程安全的类在设计线程安全类的过程中,须要包括下面三个基本要素: . 找出构成对象状态的全部变量. . 找出约束状态变量的不变性条件. . 建立对象状态的并发訪问管理策略. 分析对象的 ...