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 ...
随机推荐
- QT 5.9版本 使用MSVC2015编译时出现中文字符乱码问题的解决方法
解决方法主要分为两种: 1.在项目->Project Settings ->编辑器 ->文件编码中使用System 2.对于中文字符,使用QString::fromLocal8Bit ...
- python集合深浅copy
一,集合. 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...
- CentOS6和CentOS7安装jumpserver
1.1 jumpserver安装 同步时间:ntpdate ntp1.aliyun.com 关闭selinux 关闭防火墙 系统字体修改成英文 1.1.1 安装依赖(前提需要epel源) yum in ...
- JavaScript编码规范(1)
参考的是百度公司的JS规范,分为两部分.这是第一部分 [建议] JavaScript 文件使用无 BOM 的 UTF-8 编码. 空格 [强制] 二元运算符两侧必须有一个空格,一元运算符与操作对象之间 ...
- spring之事务
1.编程式事务 2.声明式事务:aop
- 简述TCP的三次握手过程
一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图: 图1 TCP报文格式 上图中有几个字段需要重点介绍下: ...
- python读取三维点云球坐标数据并动态生成三维图像与着色
关键步骤: 1.首先通过读取.txt文本数据并进行一系列字符串处理,提取显示所需要的相关数据矩阵 2.然后利用python的matplotlib库来进行动态三维显示 备注:matplotlib在显示2 ...
- java 函数初始化作用
本人小白一枚,看java类的初始化的时候好晕的说,我觉着书上尽管说的对.但总认为有些信息没说出来,没说清楚,看了好多文章博客的,如今有些感悟,来小写下总结,也算是为以后再次复习种个好果子. 先摘一下书 ...
- Android开发之dip, dp, px, sp区别
显示单位px和dip以及sp的区别 dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和Q ...
- 开篇/javascript基础知识点
html css js 分别是一个网站的:内容 样式 行为: js 的三种样式:行内 内嵌 外链. 函数的特性:1.可以重复执行的代码块.2.不调用不执行.3.要访问里面,必须先执行. 内置对象:j ...