Is it possible to use jQuery with Vue.js? I have a function this function that I want to use in my Vue ponent. 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);
},
puted: {
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>
Is it possible to use jQuery with Vue.js? I have a function this function that I want to use in my Vue ponent. 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);
},
puted: {
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>
- put the jquery code in the mounted function – thanksd Commented Mar 10, 2017 at 21:45
- @thankd when I do that I see both the projects and I get the error: ReferenceError: $ is not defined – lucafj2j282j Commented Mar 10, 2017 at 21:54
- You can use It, but try to avoid that unless you really need it.Conceptually those two are different.The thing that you done with jQuery could be implemnted with pure VueJS easily. – Belmin Bedak Commented Mar 10, 2017 at 21:54
-
1
Btw you have to install jQuery via npm, and import it like this
import $ from 'jquery'and then it should work with mounted hook - or usejQueryinstead of$I think that should work too. – Belmin Bedak Commented Mar 10, 2017 at 21:55 - @BelminBedak how do you get it to work with Vue? Is that possible to replace the function for a Vue function? – lucafj2j282j Commented Mar 10, 2017 at 21:56
2 Answers
Reset to default 14You can do that, but in most of cases, you don't need to.
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 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.
As some of he ments mention, you could use a mounted function. For more details you can see this article: https://vuejsdevelopers./2017/05/20/vue-js-safely-jquery-plugin/
Here is a basic example using 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 './ponents/SmartCleave'
new Cleave('#plain-input', {
date: true,
datePattern: ['d', 'm', 'Y']
})
export default {
name: 'app',
ponents: {
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>