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

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

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


Vue.js和jQuery混合使用的一点注意事项的更多相关文章
- Vue.js使用v-show和v-if的注意事项
这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍,而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项,有需要的朋友们可以参考借鉴,下面来一起看 ...
- Vue.js与Jquery的比较 谁与争锋 js风暴
普遍认为jQuery是适合web初学者的起步工具.许多人甚至在学习jQuery之前,他们已经学习了一些轻量JavaScript知识.为什么?部分是因为jQuery的流行,但主要是源于经验开发人员的一个 ...
- springboot在application.yml中使用了context-path属性导致静态资源法加载,如不能引入vue.js,jquery.js,css等等
在springBoot配置中加入上下文路径 server.context-path=/csdn js,img等静态文件无法加载,出现404的问题 <script type="text/ ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- 使用Bootstrap + Vue.js实现 添加删除数据
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...
- vue.js引入
开始学习vue.js,引入vue.vue.js一定要在head里面引入,实际开发中我们可能在body中引入,但是可能存在抖屏现象. 为了避免出现抖屏现象,我们引入vue.js或者jquery.js 最 ...
- vue.js学习第一天,了解vue.js
vue.js是一个前端框架,他与jquery不同,jquery是一个js库,而vue.js是js的前端框架. vue.js对我们前端页面入侵比较大,而jquery则不然.那我们还为什么要使用vue.j ...
- 为什么推荐前端使用Vue.js
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
随机推荐
- 设计模式——命令模式(C++实现)
[root@ ~/learn_code/design_pattern/19_order]$ cat order.cpp #include <iostream> #include <s ...
- Spring源码学习:第1步--在Spring源码中添加最简单的Demo代码
为了最大程度地贴近Spring源码并进行学习,一种比较直接的做法是:直接在Spring源码中加入Demo代码,并进行调试. 参照以前使用Spring的经验,Spring最简单的使用方法是:一个实体类. ...
- Filecoin挖矿进展
预计Filecoin第一个版本发布最早在 2018.3月份(预计) Protocol Labs这次ICO拿到了2.05亿美元,已经富得流油了,相信开发进度会快很多,Filecoin论文发表最早 ...
- [ZJOI2007] 矩阵游戏
Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两 ...
- Eclipse安卓开发环境搭建
前提,Java SDK和Eclipse搭建完毕 下载android SDK并安装 (官网:http://sdk.android-studio.org/ ) 找到安装目录,运行“SDK Manager. ...
- JAVA实现双向链表的增删功能
JAVA实现双向链表的增删功能,完整代码 package linked; class LinkedTable{ } public class LinkedTableTest { //构造单链表 sta ...
- 兄弟连学Python-Mysql的操作应用
1.创建数据库 格式: create database if not exists 数据库名 default charset utf8; 注意: 1.数据库是唯一的 2.if not exists先判 ...
- linux --> Linux变量之$#, $*, $@含义
Linux变量之$#, $*, $@含义 一.介绍 $# //是传给脚本的参数个数 $ //是脚本本身的名字 $1 //是传递给该shell脚本的第一个参数 $ //是传递给该shell脚本的第二个参 ...
- Tram
Tram 题目大意:给你一个图,这个图上有n点和边.点上有开关,开关开始指向一条道路,拨动开关可以使开关指向由开关出发的任意一条路径,读入,a,b,求,至少要拨动几次才能从a点走到b点. 注释:n&l ...
- Laravel 中缓存驱动的速度比较
缓存是web开发中重要的一部分,我相信很多人和我一样,经常忽略这个问题. 随着工作经验的累积,我已经意识到缓存是多么的重要,这里我通过 Scotch 来解释一下它的重要性. 通过观察发现,Scotch ...