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>

- Lucafraser

---

将jQuery代码放在mounted函数中。 - thanksd

当我这样做时，我看到两个项目，并且出现错误：ReferenceError: $未定义。 - lucafj2j282j

你可以使用它，但除非确实需要，否则请尽量避免。从概念上讲，这两者是不同的。使用jQuery完成的事情可以轻松地用纯VueJS实现。 - Belmin Bedak

顺便提一下，你需要通过npm安装jQuery，并像这样导入它import $ from 'jquery'，然后就可以在挂载钩子中使用它了 - 或者使用jQuery代替$，我认为这也应该可以工作。 - Belmin Bedak

@BelminBedak，您如何让它与Vue一起工作？是否可以用Vue函数替换该函数？ - lucafj2j282j

Answer 1

你可以这样做，但在大多数情况下是不必要的。

如果你正在学习Vue，那就试着用Vue的方式思考，把jQuery放到一边。 在jQuery中，你以命令式的方式处理事物；但现在你应该以声明式的方式思考。
不要直接自己操纵DOM。 所有DOM操作都应该由Vue处理，你只需要告诉Vue你想要什么。

Vue提供了转换效果，你的需求完全可以通过这个来实现，不需要借助jQuery。 起初，你可能认为它不太直观，想用jQuery解决它，但一旦你理解了它的本质，你就会爱上它。

- CodinCat

Answer 2

正如一些评论所提到的，您可以使用一个挂载函数。有关更多详细信息，请参见此文章：https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

这是一个使用cleave.js的基本示例：

<template>
    <input />
</template>

<script>
/* eslint-disable no-new */
import Cleave from 'cleave.js'

export default {
  mounted () {
    new Cleave(this.$el, {
      date: true,
      datePattern: ['d', 'm', 'Y']
    })

    this.$el.oninput = (e) => {
      console.log('oninput the field', e.target.value)
      this.$emit('oninput', e.target.value)
    }
  }
}
</script>

<style>

</style>

App.vue

<template>
  <div id="app">
    <smart-cleave @oninput="logIt"></smart-cleave>
    <div>{{date}}</div>
  </div>
</template>

<script>

/* eslint-disable no-new */
import Cleave from 'cleave.js'
import SmartCleave from './components/SmartCleave'

new Cleave('#plain-input', {
  date: true,
  datePattern: ['d', 'm', 'Y']
})

export default {
  name: 'app',
  components: {
    SmartCleave
  },
  data () {
    return {
      date: ''
    }
  },
  methods: {
    logIt (val) {
      console.log('cahnged', val)
      this.date = val
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>

- Daryn