首先,Vue 的官方是不建议直接操作 DOM 的,其优势在于视图和数据的双向绑定,而且所有DOM操作都可以用Vue实现,反而使用jQuery来操作DOM的话,会造成不必要的麻烦,DOM未渲染完成之前事件绑定不上,当然也有解决办法,比如setTimeOut,但是何必呢?直接用Vue不是更方便吗?

这里是用v-for循环渲染的列表,而之后要对列表进行DOM操作,代码如下,初次渲染的时候没有问题,事件可以正常绑定,但数据刷新两次之后,就获取不到DOM了,当然事件也无法执行。当然也可以用setTimeOut来解决,但总感觉怪怪的。

用vue来操作不是更好么?定义好完方法,直接@click就行了。

Vue.js和jQuery混合使用的一点注意事项的更多相关文章

  1. Vue.js使用v-show和v-if的注意事项

    这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍,而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项,有需要的朋友们可以参考借鉴,下面来一起看 ...

  2. Vue.js与Jquery的比较 谁与争锋 js风暴

    普遍认为jQuery是适合web初学者的起步工具.许多人甚至在学习jQuery之前,他们已经学习了一些轻量JavaScript知识.为什么?部分是因为jQuery的流行,但主要是源于经验开发人员的一个 ...

  3. springboot在application.yml中使用了context-path属性导致静态资源法加载,如不能引入vue.js,jquery.js,css等等

    在springBoot配置中加入上下文路径 server.context-path=/csdn js,img等静态文件无法加载,出现404的问题 <script type="text/ ...

  4. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  5. 使用Bootstrap + Vue.js实现 添加删除数据

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...

  6. vue.js引入

    开始学习vue.js,引入vue.vue.js一定要在head里面引入,实际开发中我们可能在body中引入,但是可能存在抖屏现象. 为了避免出现抖屏现象,我们引入vue.js或者jquery.js 最 ...

  7. vue.js学习第一天,了解vue.js

    vue.js是一个前端框架,他与jquery不同,jquery是一个js库,而vue.js是js的前端框架. vue.js对我们前端页面入侵比较大,而jquery则不然.那我们还为什么要使用vue.j ...

  8. 为什么推荐前端使用Vue.js

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  9. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

随机推荐

  1. linux 记录用户操作日志

    将以下加入到/etc/profile 最后 history USER_IP=`who -u am i 2>/dev/null| awk '{print $NF}'|sed -e 's/[()]/ ...

  2. go学习(二)目录管理

    1. go 环境变量 GOROOT golang 安装目录的绝对路径 GOPATH 工作目录(worksapce) GOBIN go install编译存放路径.不允许设置多个路径.可以为空.为空时则 ...

  3. 小米google play service停止工作解决办法,不root,不刷第三方recovery(也适用于其他的手机)

    问题: 原因是手机安卓系统是6.0.系统应用里面没有包含谷歌框架等一系列谷歌的小东西. 参考: http://www.miui.com/thread-3548436-1-1.html http://w ...

  4. 【C#点滴记录】ASP.NET 使用C# 导出Word 和Excel

    原文摘自 慧优米网,链接地址:http://huiyoumi.wang/upload/forum.php?mod=viewthread&tid=797&extra= 好了正文来了 今天 ...

  5. http状态码是什么,有什么用,在哪里查看,分别代表什么意思?

    写在前面: 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求.本文主要是:关于ht ...

  6. 用jquery实现日期控件

    用jquery实现的日期控件,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 安装Accumulo——突破自己,就是成长

    前言 在我刚开始接触分布式集群的时候,是自己在几台虚拟机中手动安装的 Hadoop 和 Spark ,所以当时对 Hadoop 的配置有个简单的印象 ,但是后面发现了 Cloudera 和 Ambar ...

  8. Eclipse项目出现红色叹号的解决办法

    以前的项目今天打开突然出现了红色的叹号,对于强迫症的患者简直忍不了,出现红色叹号的原因都是jar包出现问题导致的,如果是代码错误早就是一个大红叉了- 打开项目就可以发现,找不到哪里出问题了,代码和js ...

  9. linux --> fork()详解

    fork()详解 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个 ...

  10. linux --> gcc编译之路径搜索

    gcc编译之路径搜索 头文件 --> 搜寻先从-I开始; --> 找gcc的环境变量 : C_INCLUDE_PATH,CPLUS_INCLUDE_PATH,OBJC_INCLUDE_PA ...