初识简单却不失优雅的Vue.js


Posted in Javascript onSeptember 12, 2016

作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对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带给我们的是前端一种解决问题的新的思维。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JavaScript的prototype属性
Feb 11 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
jQuery实现日历效果
Sep 11 jQuery
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
jQuery实现简单的tab标签页效果
Sep 12 #Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
前端框架Vue.js中Directive知识详解
Sep 12 #Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 #Javascript
jQuery过滤选择器用法示例
Sep 12 #Javascript
强大Vue.js组件浅析
Sep 12 #Javascript
超详细的JS弹出窗口代码大全
Apr 18 #Javascript
You might like
基于header的一些常用指令详解
2013/06/06 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python初学者常见错误详解
2019/07/02 Python
python中update的基本使用方法详解
2019/07/17 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
微观物理专业自荐信
2014/01/26 职场文书
黄金搭档广告词
2014/03/21 职场文书
请假条范文大全
2014/04/10 职场文书
社区志愿者活动总结
2014/06/26 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
Consul在linux环境的集群部署
2022/04/08 Servers
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android