浅谈Vue.js


Posted in Javascript onMarch 02, 2017

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" rel="external nofollow" rel="external nofollow" ></a>

可以简写为:

<a :href="url" rel="external nofollow" rel="external nofollow" ></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进行相应打包是目前最热门的方案。

在今后的文章中,我也会对其进行介绍,包括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 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 #Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 #Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 #Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 #Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 #Javascript
jquery仿京东侧边栏导航效果
Mar 02 #Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 #Javascript
You might like
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
windows下python连接oracle数据库
2017/06/07 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python如何从键盘获取输入实例
2020/06/18 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
2013年研究生毕业感言
2014/02/06 职场文书
委托书范文
2014/04/02 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android