首先,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. HandsonTable日期控件的汉化

    由于项目的需要,想把HandsonTable自带的日期中英文替换成中文.其实这个不难,只要在库文件中替换下就可以了,替换的效果对比如下:         如果有需要的同学,可以在此处下载 By QJL

  2. javascript排序、功能代码总结[长期更新]

    //基本数组去重 ///输入:向数组中添加功能函数unique ///输出:返回一个没有重复元素的数组 Array.prototype.unique = function(){ result =[]; ...

  3. Angular4---部署---将Angular项目部署到IIS上

    ---恢复内容开始--- Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网址:https://www.microsoft.com/en-us/download/de ...

  4. NYOJ街区最短路径问题

    描述 一个街区有很多住户,街区的街道只能为东西.南北两种方向. 住户只可以沿着街道行走. 各个街道之间的间隔相等. 用(x,y)来表示住户坐在的街区. 例如(4,20),表示用户在东西方向第4个街道, ...

  5. Python 从入门到入门基础练习十五题

    **a) 6.成绩转换:编写一个学生成绩转换程序,用户输入百分制的学生成绩,成绩大于或等于60的输出"pass",否则输出"fail",成绩不四舍五入. a = ...

  6. python web开发-flask访问请求数据request

    Request对象在web应用的开发中是一个非常重要的对象,主要用来获取用户发来的请求数据. 常用属性参考:http://docs.jinkan.org/docs/flask/api.html#fla ...

  7. Mysql语句的执行过程

    当你希望MySQL能够以更高的性能运行查询时,最好的办法是弄清楚MySQL是如何优化和执行查询.<高性能MySQL> MySQL客户端与服务器端的通信特点 客户端与服务器之间是半双工通信, ...

  8. 分布式事务的典型处理方式:2PC、TCC、异步确保和最大努力型

    1. 柔性事务和刚性事务 柔性事务满足BASE理论(基本可用,最终一致)刚性事务满足ACID理论 本文主要围绕分布式事务当中的柔性事务的处理方式进行讨论. 柔性事务分为 两阶段型 补偿型 异步确保型 ...

  9. 【源码分析】你必须知道的string.IsNullOrEmpty && string.IsNullOrWhiteSpace

    写在前面 之前自信撸码时踩了一次小坑,代码如下: private static void AppServer_NewMessageReceived(WebSocketSession session, ...

  10. Java高级特性之枚举

    在Java SE5之前,我们要使用枚举类型时,通常会使用static final 定义一组int常量来标识,代码如下 public static final int MAN = 0; public s ...