vue脚手架vue-cli 中 引入 jquery 把某个按钮 加上点击事件 事件 第一次 成功 第二次就失效了

最新推荐文章于 2024-04-29 11:52:08 发布
最新推荐文章于 2024-04-29 11:52:08 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： vue实践 vue-cli jquery 文章标签： vue jquery  点击事件失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41296616/article/details/79694214
版权
vue实践 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
vue-cli
6 篇文章 0 订阅
订阅专栏
jquery
3 篇文章 0 订阅
订阅专栏

这里 其实 涉及到了  vue生命周期     当我们 引入jq   是不是 每次都要写$(function(){})或者是document.ready 等 代码 其实 这里可以看出 jq 生效也是有生命 周期得       所以  我们让jq 生效  必须在生命周期内     我们在这里 可以利用 vue生命周期   把jQuery中的代码放到mounted中  此时  就可以 生效了


看下图


小马哥的天涯
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 点击事件失效
Hero_rong的博客
11-10 1万+
点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，.stop 阻止一下冒泡就行了 @click.stop="doSomething($event)" 2.还有一种可能被默认事件阻止了，我们加个这个就能解决，.native @click.native='setUp(index)' 3.如果项目中的某些组件，使用了
2021-08-02 Jquery 监听click事件，只触发一次，第二次点击就失效
wangfeng117254的博客
08-02 1896
Jquery 监听click事件，只触发一次，第二次点击就失效只触发一次的写法解决方案 案例以class为选择器，也可以换成id 只触发一次的写法 $(".fc-prev-button").click(function(){}) 或 $(".fc-prev-button").on(“click”,function(){}); 解决方案 $(document).on(“click”,".fc-prev-button",function(){}); ...
vue跟jQuery中的事件冒泡、事件捕获、事件委托（事件代理）
最新发布
weixin_45392204的博客
04-29 1245
鼠标点击或者触发了dom事件，浏览器会从根节点（Document 对象）流向目标元素，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标元素。在捕获完成后，与事件捕获相反，事件会从目标元素流向文档根节点，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。在网页中，有时我们需要动态增加或移除页面中的元素，使用事件委托不需要再为新增的元素绑定事件，也不需要为删除的元素解绑事件。一直向下到目标元素后，从目标元素开始向上执行冒泡元素。
jquery项目引入vue和elementui遇到的坑
wenjinrong的博客
12-07 2712
切记引入elementui的前提是引入vue 常见出错的情况： 一个简单的html页面或者一个非vue的项目，想要引入elementui的组件，然后引入elementui之后发现样式不起作用，很大一个原因就是没有引入vue 为方便此处CDN引入 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> .
Vue简单练习封装button按钮 直接上代码和效果图
weixin_42201272的博客
03-24 764
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
解决vue第一次弹窗以后第二次就不弹窗的问题
Mjxiaomihu的博客
08-08 4721
解决vue第一次弹窗以后第二次就不弹窗的问题
vue-cli webpack 引入jquery的方法
10-18
小编使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具体内容详情大家参考下本
使用vue脚手架（vue-cli）搭建一个项目详解
10-17
主要介绍了vue脚手架（vue-cli）搭建项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
08-28
Vue 的实例、生命周期与 Vue 脚手架（vue-cli）实例详解 一、Vue 的实例 1.1 创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的。Vue 的设计无疑受到了 MVVM 模型的启发，因此在...
Vue.js
You are happier than before
12-11 369
1.安装方式https://www.runoob.com/vue2/vue-install.html 第3种 NPM方法，一直执行到最后，就可以看到欢迎页了。其中，安装过程中有询问 Use ESLint to lint your code? ESLint是可组装的JavaScript和JSX检查工具，定义一些规则，对代码格式进行校验，更适用于团队协作中。如果是个人学习，可以选择No,...
Vue项目使用jQuery 动态增加元素及绑定点击事件
小破孩的博客
07-18 1万+
先看效果图： HTML部分： <div class="xph-panel-body"> <div class="xph-btn newdom">增加</div> <div class="xph-dom"> <div class="xph-dom-list"> ...
js动态append添加的节点点击事件无效
热门推荐
DUDUfine的专栏
06-19 1万+
js动态append添加的节点点击事件无效问题
同时使用vue.js和jquery时，jq事件无响应解决办法
weixin_40431771的博客
10-26 6589
先加载vue.js，让页面渲染完成后加载jq，给jq绑定ready事件 $(document).ready(function(){ $(function() { //jq事件 }); }); 更新 ……ready加载太玄学了，测试3/10的几率可以操作dom成功，还是用vue的v-if和v-show方法，data中设置false隐藏，绑定到@clic...
同时使用vue 和 jquery， jquery事件绑定失效
Lv骚年
08-21 6319
问题： 一个h5项目同时引用了vue.js和jquery.js， 发现jquery绑定的事件失效。 原因是： vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素. 解决办法： 先加载vue.js，让页面渲染完成后加载jq，给jq绑定ready事件 $(document).ready(function(){ ...
vue脚手架基本使用
m0_64205564的博客
11-20 1165
终端输入npm run dev，然后打开localhost:8080就可以看到项目运行啦 ![在这里插入图片描述](https://img-blog.cs 【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】 浏览器打开：qq.cn.hn/FTf 开源分享 dnimg.cn/20190707201349774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM.
vue-cli中利用v-if+button来进行子组件的增删
csdn_xuebing的博客
04-19 2643
这个里面图片虽然多，但是都是在父组件里进行的。当然在子组件中也可以进行如下的操作。如果不需要增删子组件的话，用v-show当然是更好了。 v-if是增删DOM，v-show是对DOM是否进行渲染。 1、写好一个子组件（我以olMapLoadImage.vue为例） 2、加载子组件（如上图，import进来，然后再components里面注册） 3、绑定一个v-if，在上图<tem...
关于 submit 按钮的 onclick 验证事件，第一次验证失败，第二次 submit 按钮失效的原因解析...
weixin_30477797的博客
12-23 645
今天在做一个生成订单的简单验证页面 主要功能：实现点击提交按钮后，先在页面上用JavaScript验证信息是否输入完全，不完全不允许提交，待输入完全后，才可以提交 页面：如下页面，可以看到，当文本框有未填值的项，点击底部“去结算”按钮，文本框后面的图片会显示，提示有错，并且“去结算”按钮旁边也显示一段文字，提示有内容没有填写，不难看出，红叉图片和提示文字是同时存在的 但是这张图片里就出现...
帮我写一个代码测试vue-cli搭建的项目中jquery是否成功导入
05-10
然后，在你的 Vue 项目中的入口文件（例如`main.js`）中引入 jQuery： ```js import $ from 'jquery' ``` 最后，你可以在你的 Vue 组件中使用 `$` 来测试 jQuery 是否成功导入。例如，在你的组件中添加以下代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值