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

最近有很长时间没有更新博客了，换了公司，所有的心思都放在项目上了。经过此次项目的上线，让我感觉最深的是先后端分离后，前端页面的模块化管理，以及前端页面的数据邦定。在接触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的指令，用来处理这种特殊的状况，这些都是考验我的学习能力的活，新技术都不完美，因此才要不断学习,追求新技术的过程，也就是追求完美的过程。