javascript - Vue.js 和 jQuery？

Question

是否可以将 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>

Answer 1

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

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

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