Vue.js 和 jQuery？

Posted 2023-02-22

【中文标题】Vue.js 和 jQuery？

【英文标题】：Vue.js and 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 函数？

【参考方案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>