前言

在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行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的时代,我们下一篇再聊。

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

在没有DOM操作的日子里,我是怎么熬过来的(上)的更多相关文章

  1. 在没有DOM操作的日子里,我是怎么熬过来的(终结篇)

    前言 在我写终结篇的日子里,Vue版本稳定在2.9.1.当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿. 接下来,正文从这开始~ 好多童鞋学习Vue都有灯 ...

  2. 在没有DOM操作的日子里,我是怎么熬过来的(中)

    前言 继上篇推送之后,在掘金.segmentfault.简书.博客园等平台上迅速收到了不俗的反馈,大部分网友都留言说感同身受,还有不少网友追问中篇何时更新.于是,闰土顺应呼声,在这个凛冽的寒冬早晨,将 ...

  3. 给DOM操作生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  4. 摆脱DOM操作,从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  5. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

  6. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  7. jquery学习笔记---Dom操作

    一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...

  8. DOM操作 append prependTo after before

    通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...

  9. js,jQuery和DOM操作的总结(一)

    废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...

随机推荐

  1. ASP.NET没有魔法——ASP.NET MVC IoC

    之前的文章介绍了MVC如何通过ControllerFactory及ControllerActivator创建Controller,而Controller又是如何通过ControllerBase这个模板 ...

  2. win10 uwp 无法附加到CoreCLR

    本文说的是在vs调试无法附加到CoreCLR.拒绝访问.已经如何去解决,可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期.如果觉得我有讲的不对的,就多多包含,或者直接关掉这篇文章, ...

  3. IDEA搭建SpringMVC+Mybatis+Mysql+Maven框架

    相关环境 Intellij IDEA Ultimate Tomcat JDK MySql 5.6(win32/win64) Maven (可使用Intellij IDEA自带的) 搭建步骤 创建项目工 ...

  4. Python 初学者 入门 应该学习 python 2 还是 python 3?

    许多刚入门 Python 的朋友都在纠结的的问题是:我应该选择学习 python2 还是 python3? 对此,咪博士的回答是:果断 Python3 ! 可是,还有许多小白朋友仍然犹豫:那为什么还是 ...

  5. Linux下文件打包与解压缩

    Linux上存在的文件后缀 文件后缀名 说明 *.zip zip程序打包压缩的文件 *.rar rar程序压缩的文件 *.7z 7zip程序压缩的文件 *.tar tar程序打包,未压缩的文件 *.g ...

  6. sql里的null和空的区别

    null表示为未知,未定义: 空表示为空白,或者0: sql查询,排序时null在''的前面: 定义字段为not null,写为空可以写入: null不可以用来比较,只能用is null判断:

  7. jQuery实现用户输入自动完成功能

    jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...

  8. 实验测试之------创建DBlink,查询远端的yang用户下的abcdedfa表,创建同义词

    --测试环境,20远端,30本地: --准备1,20远端建立表的同义词,用户信息: 1.11 ---------------------------------------------------准备 ...

  9. LeetCode 617. Merge Two Binary Tree (合并两个二叉树)

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  10. THINKPHP中几个缓存的问题

    1.字段缓存. THINKPHP是默认开启字段缓存的.如果关闭了APPDEBUG(即在index.php中设置了这样一句话:define("APP_DEBUG","FAL ...