¿Es posible usar jQuery con Vue.js? Tengo una función esta función que quiero usar en mi componente Vue. La función básicamente desliza los elementos hacia adentro y hacia afuera, pero cuando implementé el uso de las etiquetas <script> , obtuve una lista con todos los elementos en lugar del código jQuery en funcionamiento.
$("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(0) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 5000);¿Cómo uso esa función en mi código?
<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>Puede hacerlo, pero en la mayoría de los casos, no es necesario.
Si está aprendiendo Vue, intente pensar en Vue y simplemente guarde jQuery. En jQuery, haces las cosas de manera imperativa; pero ahora deberías pensar de manera declarativa .
No manipule el DOM usted mismo directamente. Todas las manipulaciones de DOM deben ser manejadas por Vue, solo dígale a Vue lo que quiere.
Vue proporciona Transition , su requisito se puede hacer sin jQuery en absoluto. Al principio, puede pensar que no es sencillo y desea resolverlo con jQuery, pero una vez que comprenda el punto, se enamorará de él.
Como mencionan algunos de los comentarios, podría usar una función montada. Para más detalles puedes ver este artículo: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
Aquí hay un ejemplo básico usando 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>aplicación.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>