Vue.js和jQuery？

Question

是否可以在Vue.js中使用jQuery？我有一个函数这个函数,我想在我的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来解决它,但是一旦你明白了,你就会爱上它.