Vue.js和jQuery吗? [英] Vue.js and jQuery?

问题描述

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

Is it possible to use jQuery with Vue.js? I have a function this function that I want to use in my Vue component. The function basically slides the items in and out, but when I implemented using the <script> tags I got a list with all the items instead of the jQuery code working.

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

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

如何在代码中使用该功能?

How do I use that function in my code?

<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>

推荐答案

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

You can do that, but in most of cases, you don't need to.

如果您正在学习Vue，请尝试在Vue中思考，然后放下jQuery.在jQuery中，您以命令式方式执行操作；但现在您应该以说明性的方式思考.
不要直接自己操作DOM.所有DOM操作都应由Vue处理，您只需告诉Vue您想要什么即可.

If you are learning Vue, then try to think in Vue and just put jQuery away. In jQuery, you do things in imperative way; but now you should think in declarative way.
Do not manipulate the DOM by yourself directly. All the DOM manipulations should be handled by Vue, you just tell Vue what you want.

Vue提供了转换，您的需求完全可以不需要jQuery来完成.起初，您可能认为这并不简单，而是想通过jQuery解决它，但是一旦您掌握了要点，便会爱上它.

Vue provides Transition, your requirement can be done by this without jQuery at all. At first you may think it's not straightforward and want to solve it by jQuery, but once you get the point you will fall in love with it.

这篇关于Vue.js和jQuery吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！