Vue.js 和 jQuery？答案

【问题标题】：Vue.js and jQuery?Vue.js 和 jQuery？
【发布时间】：2017-08-01 08:55:38
【问题描述】：

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

【问题讨论】：

把jquery代码放到mounted函数中
@thankd 当我这样做时，我看到了这两个项目并收到错误：ReferenceError: $ is not defined
你可以使用它，但除非你真的需要它，否则尽量避免使用它。从概念上讲，这两者是不同的。你用 jQuery 做的事情可以很容易地用纯 VueJS 实现。
顺便说一句，你必须通过 npm 安装 jQuery，然后像 import $ from 'jquery' 这样导入它，然后它应该与挂载的钩子一起工作 - 或者使用 jQuery 而不是 $ 我认为这也应该工作.
@BelminBedak 你如何让它与 Vue 一起工作？是否可以将函数替换为 Vue 函数？

标签： javascript jquery vue.js vuejs2

【解决方案1】：

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

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

Vue 提供了Transition，你的需求完全可以不用jQuery 来完成。一开始你可能觉得不简单，想用jQuery来解决，但是一旦你明白了，你就会爱上它。

【讨论】：

【解决方案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>

【讨论】：