前端开发工具vue.js开发实践总结

vue.js   2015-07-13 15:13:48 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)

最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了。通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定。在接触vue.js之前,我之前端要用到的dom结构,都是通过拼接字符串的方式进行输出的。这种方式最大的痛点是拼接很麻烦,也不是很直观,几乎无法复用,和数据紧密的偶合在一起,维护不方便,太多太多的问题。在同事的推荐下,开始接触vue.js这个开源项目。如果你不知道什么是vue,那么请看这里的介绍 http://vuejs.org/

vue的更新很快,从我最开始接触时的0.11.5,到现在的0.12.7,中文版的介绍一直停留在0.11.5的版本。如果是入门,且英文不是很好的情况下,我建议还是用0.11.5的版本。

如果你之前有用过angular.js或别的双向绑定的js库,那么你会有一种自来熟的感觉。当然,vue作为一个轻量的前端视图层工具,与angular相比,还是有很明显的区别的:

1. vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。

2. vue的双向邦定是基于ES5 中的 getter/setters来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,vue则不需要。因此,vue在性能上更高效,但是代价是对于ie9以下的浏览器无法支持。

3. vue需要提供一个el对象进行实始化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面。一个页面,可以有多个vue实例,而angular好像不是这么玩的。

4. vue真的很容易上手,学习成本相对低,不过可以参考的资料不是很丰富,官方文档比较简单,缺少全面的使用案例。高级的用法,需要自己去研究源码,至少目前是这样。

下面开始写一些的使用经验:

首先是你要去官网下载vue.js,具体的起步请参考: http://cn.vuejs.org/guide/index.html ,细节部分不在版书。

vue在构建的时候,需要使用new进行实例化,比如: 

var view = new Vue({
   el : '#container'
});

el 根据官方api的介绍,可以是String | HTMLElement | Function, 一般来说,传一个id比较常用,这一步就是告诉vue,从这个节点开始,后面的内容就于vue开始接管了。

接管之后有些什么好处呢? 

1. ajax取出的内容,再也不用拼接好再innerHTML到页面上了,直接在相要出现的地方写上{{数据}}或v-text="数据"或v-html="数据" ,就会自动显示出来。

2. 对于表单来说,特别input之类的元素,不再需要自己监听事件了。比如:

<input type="text" v-mode="name">
 <div>这里会自动显示input的value:{{name}}</div>

这时,只要input中内容有变化,name的值就会自动在div中显示出来。这个在手机上的特别方便,不需要判断keycode,也不需要判断event是keyup还是keydown,

利用这个特性,进行表单元素的验证,也是很方便的。结合v-if,v-show,v-style,v-class这些控制器,可以实现以往,我们要写很复杂的ajax或者js才能实现的功能。

关于它们的用法,看看官网的示例,自己照着写一遍就知道了。只是关于v-class,官方的例子不是很清楚,我这里补充一下:

<div v-class="
     hide : isHide,
     red   : isRed     
"></div>

javascript:

new Vue({

       data:{
           isHide:true,
           isRed:true
       }
})

这里的意思是说,当vue中的isHide是true的时候,就给div用hide的样式名,同理,如果isRed为true的时候,red的样式名也用上。假设isHide和isRed都为true,那么div的class属性就是这样的:

<div class="hide red"></div>

关于v-if和v-show虽然都可以控制元素的显示和隐藏,但是它们是有区别的。如果用v-if的话,整个dom结构压根就不会出现在页面上,如果是用v-show的话,要视后面的条件来定,如果是true,则显示,如果为false,则加上style="display:none". 所以呢,如果是组件之类的大块头,个人觉得用v-if更好一些,如果是一些暂时性隐藏,一会要显示的,还是v-show更方便。对于v-style和v-show来比较,v-show相当于是v-style="display:none"和v-style="display:block"的快捷方式。

用vue,少不了要介绍它的组件,v-component="my-component", 为什么要用组件呢,它是提高代码复用的大杀技。比如要输出一个列表,如果dom结构一致,只是数据不同,那么html中,只要写上组件名就可以了。

html:

<div id="wrap">
<div v-component="list" v-with="list1"></div>
<div v-component="list" v-with="list2"></div>
<!-- v-with="是指要邦定给当前组件的数据"-->
</div>

javascript:

var view = new Vue({
	el : '#wrap',
	data:{
		list1 : [{name:'frog'},{name:'bjtqti'}],
		list2: []
	},
	 components : {
		  list : {
				 template:'<li>{{name}}</div>'
		  }
	 }
});

说完组件,就是dom节点的引用,在没有用vue之前,我们对页面结点找查,需要依赖jquery之类的工具,而在vue中,对于需要引用的dom节点,只要在页面上写上v-el="取个名“就可以拿到。

比如取下面的元素:

<div v-el="wrap">
//....
</div>

在jquery中,需要$('div')[0],而在vue中直接用view.$$.wrap就可以了。(view是new Vue()产生的实例引用)

var view = new Vue({...});

  alert(view.$$.wrap)

可以说是指哪取哪,这也是angular曾经宣称要干掉jquery这样的工具的理由。这其实一点也不稀奇,因为vue在实例化的时候,实际上就是遍列了页面的所有dom节点,加一个标记,就是告诉vue,这个地方呆会我要用,给我记住了。用的时候,报名字,自动送上来。当然,关于vue能做的还有很多,由于时间关系,就不细写了。

最后要说的一点是,vue实例化需要遍历页面上所有结点,所以,如果不需要vue进行管理的dom,且下面子节点又很多的情况下,最好给它加上v-pre指令,vue会自动忽略它,对于由大量动态数据生成的内容,最好用组件来存放,一来提高代码复用,二来减少初始化vue时在扫描dom上所消耜的时间。一般来说,一个页面,只实例化一个vue实例就好。

说到提高性能,vue对于大部分数据都是进行双向邦定的,在dom节点创建之后,数据所占用的内存依然是保存的。所以对于内存点用比传统的字符串方式要高,对于下拉加载这样的操作,还是蛮令人担心的。官方说,对v-repeat这样的指令,通过使用track-by过滤具有相同特征的字段,比如id,可以有效减少相同元素的重复渲染。虽然使用vue还没有到需要我们这样操心内存的地步,这也是我们为了操作方便所要付出的代价,我个人认为,不需要双向邦定的数据,特别是大量的数据,还是不要用为好。当然,如果你对React这样的单向邦定的视图工具比较熟的话,结合用,就更好了。再或者,自己扩展一个vue的指令,用来处理这种特殊的情况,这些都是考验个人学习能力的活,新技术都不完美,所以才要不断学习,追求新技术的过程,也就是追求完美的过程。

扩展阅读

Vue.js + webpack 项目实践
vue+webpack在“双十一”导购产品的技术实践
手机淘宝前端的图片相关工作流程梳理
滴滴:WebApp实践经验总结
CSS Modules 详解及 React 中实践

为您推荐

Vue.js基本语法的介绍
使用python 提取html文件中的特定数据
前端开发工具vue.js开发实践总结
Bootstrap3 CSS样式基本用法总结
jsoup 解析HTML信息

更多

vue.js
JavaScript开发
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多