【转】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的配置。
模块化详解(https://www.jb51.net/article/124618.htm、https://www.cnblogs.com/huyinxuan/p/6647545.html)
(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带给我们的是前端一种解决问题的新的思维。
转载请注明来自——微信公众号：前端呼啦圈（Love-FED）
【转】Vue.js特点的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- vue.js初探
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
随机推荐
- Linux基础命令---cat
cat 连接文本文件或者标准输入,将结果输出到标准输出设备. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 c ...
- redis 主从同步搭建
redis 一主二从 1.redis 安装 安装教程:https://www.cnblogs.com/zwcry/p/9505949.html 2.redis主从 1)创建主从目录 mkdir /us ...
- python之路----初识面向对象（二）
类命名空间与对象.实例的命名空间 创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变量 动态属性就 ...
- 计算概论（A）/基础编程练习1(8题)/8:与7无关的数
#include<stdio.h> int main() { ; // n < 100 scanf("%d", &n); // 循环遍历判断 再进行平方和 ...
- VM三种网络连接方式
bridge:这种方式最简单,直接将虚拟网卡桥接到一个物理网卡上面,和Linux下一个网卡 绑定两个不同地址类似,实际上是将网卡设置为混杂模式,从而达到侦听多个IP的能力. 在此种模式下,虚拟机内部的 ...
- Android JSON 解析关键代码
Android Json 解析其实还是蛮重要的知识点,为什么这么说呢,因为安卓通信大部分的协议都是使用 json 的方式传输,我知道以前大部分是使用的 xml ,但是时代在发展社会在进步,json 成 ...
- ~/.bashrc文件写错, 导致Linux全部命令丢失
问题 今天写bashrc文件的时候, 不小心把PATH结尾带错了,当时不知道,直接就source了, 后来出来的时候发现命令全部提示找不到了... 解决 重新赋予环境变量PATH就行 export P ...
- 20145101《Java程序设计》第二周学习总结
20145101 <Java程序设计>第2周学习总结 教材学习内容总结 在第三章的学习中,我学到了很多新知识点,了解到Java语言中的类型及其变量主要类型为:整数,还有char型,bool ...
- MySQL命令行导出、导入数据库，备份数据库表
MySQL导出数据库/数据表 1.首先,将你MySQL安装目录,例如C:\Program Files\MySQL\MySQL Server 5.7\bin添加到你的系统环境变量PATH中: 2.导出数 ...
- 论文笔记——Rethinking the Inception Architecture for Computer Vision
1. 论文思想 factorized convolutions and aggressive regularization. 本文给出了一些网络设计的技巧. 2. 结果 用5G的计算量和25M的参数. ...