初识简单却不失优雅的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 相关文章推荐
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
vuex actions异步修改状态的实例详解
Nov 06 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
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
28个JS验证函数收集
2010/03/02 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python使用knn实现特征向量分类
2018/12/26 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
项目管理计划书
2014/01/09 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
1000字打架检讨书
2014/11/03 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs