草庐IT

javascript - Vue.js 和 jQuery？

coder 2024-07-22 原文

是否可以将 jQuery 与 Vue.js 一起使用？我有一个函数，这个函数我想在我的 Vue 组件中使用。该功能基本上是将项目滑入和滑出，但是当我使用 <script> 实现时标签我得到了一个包含所有项目的列表，而不是 jQuery 代码的工作。

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);

如何在我的代码中使用该函数？

<template>
<div class="timer">
   <div class="title-block">
       <p class="title">MG de Jong</p>
       <p class="description">Sprint 1</p>
   </div>
   <div class="column">
     <div class="block">
         <p class="digit">{{ days | two_digits }}</p>
         <p class="text">Days</p>
     </div>
     <div class="block">
         <p class="digit">{{ hours | two_digits }}</p>
         <p class="text">Hours</p>
     </div>
     <div class="block">
         <p class="digit">{{ minutes | two_digits }}</p>
         <p class="text">Minutes</p>
     </div>
   </div>   
 </div>
</template>
<script>

export default {
props: {
   date: {
       type: Number
   },
},
data() {
   return {
       now: Math.trunc((new Date()).getTime() / 1000)
   }
},
mounted() {
   window.setInterval(() => {
       this.now = Math.trunc((new Date()).getTime() / 1000);
   },1000);


},
computed: {
   seconds() {
       return (this.modifiedDate - this.now) % 60;
   },
   minutes() {
       return Math.trunc((this.modifiedDate - this.now) / 60) % 60;
   },
   hours() {
       return Math.trunc((this.modifiedDate - this.now) / 60 / 60) % 24;
   },
   days() {
       return Math.trunc((this.modifiedDate - this.now) / 60 / 60 / 24);
   },
   modifiedDate: function(){
      return Math.trunc(Date.parse(this.date) / 1000)
   }
},
}
</script>

最佳答案

您可以这样做，但在大多数情况下，您不需要这样做。

如果您正在学习 Vue，那么请尝试在 Vue 中思考，而不要使用 jQuery。在 jQuery 中，你以命令的方式做事；但现在你应该以声明式的方式思考。
不要自己直接操作 DOM。所有 DOM 操作都应该由 Vue 处理，你只需告诉 Vue 你想要什么。

Vue 提供 Transition ，你的要求可以通过这个来完成，根本不需要 jQuery。一开始你可能觉得它不简单，想用 jQuery 解决它，但一旦你明白了这一点，你就会爱上它。

关于javascript - Vue.js 和 jQuery？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42728104/

javascriptjQuerygtltclassvue.jsvuejs2

有关javascript - Vue.js 和 jQuery？的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  9. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  10. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

随机推荐