在没有DOM操作的日子里，我是怎么熬过来的（上）

前言

在我动笔写这篇文章的时候，我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做，请听闰土娓娓道来。前几年我还在想，假如有一天，前端世界里不能再直接操作dom了，我该怎么办？没想到竟一语成谶，这一天终究还是来了......

此文记录了一次JQ党转变成Vue信徒的心路历程。

那么接下来，正文从这开始~

熟悉闰土的朋友都知道，我是从JQ时代过来的前端，在刚接触react和vue这类MVVM框架的时候，完全可以用一脸懵逼来形容我，最为贴切。在啃官方API文档的时候，总是按照以前jquery的思想来衡量，当时看的还是相当费劲，不过最后还是艰难的看完了。

我在想，如果能从一开始学的时候，把之前的开发思路忘掉，就当自己从来没学过编程，以一种空杯心态从零开始学的话，应该会比较快。之前没有考虑到思路转换这一步，走了弯路。现在想想，有种欲练此功，必先自宫的感觉。

相信从JQ时代过来的前端码农们都知道，jQuery完全是通过美元符号$来对各种元素进行操作！根据HTML元素的id、class、name等属性来获取到元素并对其进行取值、赋值、修改属性等行为，也就是直接操作DOM。

比如我们公司前些日子正在做的一个教育平台的webOS项目，技术栈用的正是vue+webpack这对黄金组合。刚开始我是直接下载vue.js文件，并用script标签引入，此时vue会被注册为一个全局变量。

当时我还是习惯性的沿用jq的思想，想直接操作dom，通过id或class来获取元素，并为其切换class，达到改变样式的目的。但是，这样的想法一开始就是错误的，因为你已经用了vue作为开发框架，就不能再按照jquery的思想去直接操作dom了。

当时还被笼罩在jq旧时代的我，可以说是被难住了。按照我以前的开发经验，如果不直接操作dom，难道vue还有更先进的办法吗？答案是，有的。

vue大法好，应该有的尽量有。在vue的王国里，操作元素的class列表和内联样式，是数据绑定的一个常见需求。 那vue的办法就是，用v-bind去绑定它们。

先来聊聊绑定HTML Class，举个例子：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示，类名active的存在与否，取决于数据属性isActive的boolean值是true or false。

另外，你也可以在对象中传入更多属性来动态切换多个class，比如以下模板：

<div class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下data：

data: {
　　isActive: true,
　　hasError: false
}

当然，vue既然可以绑定class，那么同样也可以绑定style内联样式，同样贴出代码：

<div v-bind:style="styleObject"></div>

data: {
　　styleObject: {
　　　　color: 'red',
　　　　fontSize: '13px'
　　}
}

自此，vue大法的套路已逐渐清晰。

使用jq需要拿到数据后操作dom元素来实现，vue直接用v-for来实现，不需要我们来操作dom元素，在这种程度上，我们其实可以说vue实现了model和view的分离。

Vue大法的惯用套路是：先绘制HTML界面，然后在需要绑定数据的地方写下v-model、v-on等这些绑定属性和方法，在显示数据内容的地方使用双大括号显示内容。然后在Vue中，el属性绑定根视图的id，data属性定义并初始化v-model、双大括号用到的数据和一些其他数据。methods属性定义在v-on中用到的和一些其他方法。更新界面修改数据实现。而修改数据通过操作界面实现。

在写完了这个demo后，我感觉到了Vue的确有它的魅力所在。它的MVVM让业务逻辑变得更加清晰和简单。

vue.js能在那么多前端框架中脱颖而出确实有它的独到之处，组件相较于react有很大特色，开发效率相当高，打包的时候可以把所有的东西都整合到 js 文件中，执行效率也很高。不过传统的前端开发最麻烦的就是频繁的dom操作，有时候还会有性能问题。

还有，后端人员上手 Vue.js 的效率应该会比传统前端人员上手的快，因为大多数后端的模板都是数据绑定，而传统前端又有先入为主的思想，会受到以前开发思路的影响，反而降低了上手效率。

那么，在弃用JQ的日子里，Vue是否能承担起操作dom的重任呢？

尤雨溪说，我们Vue 官方是不建议直接操作 DOM 的，Vue 的用途在于视图和数据的绑定。如果通过JQuery 直接操作 DOM 的话，势必会造成视图数据和模型数据的不匹配，这样 Vue 就失去它存在的意义了。

既然vue不能直接操作dom，而我又不想完全弃用jQuery，那么请问jQuery和VueJS能否一起使用呢？

答案自然是可以的。JQuery 和 VueJS 合理使用并不会造成冲突，因为他们的侧重点不同，VueJS 侧重数据绑定和视图组件，JQuery 侧重异步请求和动画效果。如果使用JQuery + VueJS 开发，一定要在 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理，而使用 JQuery 时应避免直接操作 DOM ，但是应用动画是允许的。

JQuery 与 VueJS 相互配合可以非常高效的完成异步任务，首先通过 JQuery 发出 Ajax 请求，接收到从服务器端传递过来的 JSON 数据后，再通过 Vue 将数据绑定到组件上，最后由 JQuery 进行动画处理，整个过程就如行云流水般自然。

说句题外话，Vue 的目的不是取代 JQuery，它是为了解决前后端分离而出现的。如果没有数据变化，只是单纯的样式变化，则没有必要去大费周章进行视图模型的绑定，并且还不利于 SEO 优化。

jQuery本质上只是一个简化了的操作函数库而已，代表的是优化过的JavaScript dom操作。vue的话是一个能提供动态绑定等等功能的一个框架，把你从复杂繁琐的dom操作中解放出来了，代表的是虚拟dom的新思路。其实两者并没有什么功能上的交集，如果你非要问可不可以用vue来实现jQuery所能实现的功能的话，我只想说，能，并且更加简洁。

在公司里用了大半年Vue，体验不用说，个人感觉VueJS是MVVM 里最好的。用 Node.js 来做前后端分离，开发效率实在太快了。其实 vue 有个好基友 Vuex 类Flux数据流控制框架，和 Vue 配合起来才是移动端 WebApp 大杀器。开发体验非常接近 React Native + Redux，思维上可以做到非常好的切换。今年在前端圈内极有可能会大爆发～

后记

至此，学习vue已有一段时间了，不断的填坑，es6，vue-router，vuex，webpack，看来我还有好长一段路要走。关于后来我是如何从DOM操作的时代毫无压力地过渡到了MVVM的时代，我们下一篇再聊。

以上，是我今天分享的所有内容，中篇即将更新。

声明
欢迎转载，请注明出处和作者，同时保留声明。
作者：闰土少年
出处：http://www.cnblogs.com/runnin...
本博客的文章如无特殊说明，均为原创，转载请注明出处。如未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

想了解我的更多动态？欢迎关注我的微信公众号：闰土哥的前端路