Vue.js简介
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简介的更多相关文章
- vue学习(一)、Vue.js简介
Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...
- Vue.js简介及指令
1.Vue.js的特点 Vue.js是一个Javascript MVVM(Model-View-ViewModel)库,与传统Jquery的区别在于,Vue.js舍弃了繁杂的DOM操作, 如取DOM值 ...
- vue.js 简介
Vue.js是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层 ...
- Vue.js的简介
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大 ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 走进Vue.js
走进Vue.js Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解 ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
随机推荐
- PLSQL快捷补充代码设置
菜单Tools-->Preferences...然后依次选择下图红色选项 弹出下图对话框 输入需要快速生成的语句点击保存 点击Save后在slq窗口中输入 设置的语句缩写 列入:第一个sf 然 ...
- Java Garbage Collection Basics--转载
原文地址:http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/gc01/index.html Overview Purpose ...
- 【转载】Linux动态库搜索路径的技巧
转自:http://soft.chinabyte.com/os/232/11488732_2.shtml 众所周知,Linux动 态库的默认搜索路径是/lib和/usr/lib.动态库被创建后,一般都 ...
- Python - 获取帮助信息
1- Python Manuals 自带CHM格式的Python Manuals存放在\Python<x.x>\Doc\目录下.可以在IDLE界面下按F1键或点击help选项下Python ...
- 求1+2+3+...+n
求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 卧槽,剑指Offer竟然有这样的题... public ...
- 读Java Concurrency in Practice. 第六章.
这一章开讲任务执行.绝大多数并发程序的工作都可以分解为抽象的.互不相关的工作单元,称之为任务(Task). 使用java线程来执行任务 以web服务器的实现举例, 此时将用户的一次连接,当做一个独立的 ...
- IOS开发中设置控件内容对齐方式时容易混淆的几个属性
IOS开发中四个容易混淆的属性: 1. textAligment : 文字的水平方向的对齐方式 1> 取值 NSTextAlignmentLeft = 0, // 左对齐 NST ...
- WatiN框架学习
WatiN 是一个源于 Watir的工具,开源且用于web测试自动化的类库.Web Application Testing in .NET. WatiN 通过与浏览器的交互来实现自动化,使用起来具有轻 ...
- [新手学Java]反射学习笔记
示例类 @SuppressWarnings("unused") public class Person { public String Name; private int Age; ...
- WebApi传参总动员(四)
前文介绍了Form Data 形式传参,本文介绍json传参. WebApi及Model: public class ValuesController : ApiController { [HttpP ...