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 ...
随机推荐
- Java中常见数据结构List之LinkedList
二,LinkedList 1, linkedList底层数据结构 linkedList底层是一个双向链表 2,LinkedList和ArrayList的对比 1.顺序插入速度ArrayList会比较快 ...
- 大数据Hadoop与Spark学习经验谈
昨晚听了下Hulu大数据基础架构组负责人–董西成的关于大数据学习方法的直播,挺有收获的,下面截取一些PPT的关键内容,希望对正在学习大数据的人有帮助. 现状是目前存在的问题,比如找百度.查书这种学习方 ...
- python web开发-flask调试模式
使用run()方式可以启动flask应用,但是每次修改代码之后,需要重新启动,这样对于调试就很不太方便.Flask的调试模式可以让代码在每次修改之后自动载入. 有两种方法可以启用flask的调试模式 ...
- Unity 读取资源(图片)
方法一: 采用Resource.Load方法读取,读取在Unity中Assets下Resources目录下的资源名(不采用后缀). //图片放在Asset/Resources/ Texture2D t ...
- 使用python+Selenium对空调控制器进行循环发送控制命令
今天一同事说想对空调控制器进行循环发送命令操作.经过了对控制流程的梳理,发现每次选择内机后进入控制页面设定温度都是在26度,想了想,如果要进行循环就得将设定温度重置为17度,然后每循环一次温度增加1度 ...
- js操作DOM元素
创建 document.createElement() 查找 document.getElementById() 返回对拥有指定 id 的第一个对象的引用. document.getElement ...
- C/S 和B/S 详解 --- 2017-04-25
来源:脚本之家 一.C/S 架构 1. 概念 C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两 ...
- shell脚本中文件测试
shell脚本中文件测试 author:headsen chen 2017-10-17 14:35:19 个人原创,转载请注明作者,否则 依法追究法律责任 [ -f filename ] ...
- linux下安装软件
业界的软件标准安装有三步:configure,make,make install,下面是它们的定义: ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不 ...
- python趣味 ——奇葩的全局形参
在c++,c#,js等语言中: 函数定义(参数) 函数体:参数修改 这里的参数修改都是仅限于这个函数体内的 python不知道是不是bug,我们这样写: def test(a=[]): a.appen ...