Vue.js और jQuery?

Question

क्या Vue.js के साथ jQuery का उपयोग करना संभव है? मेरे पास इस फ़ंक्शन का एक फ़ंक्शन है जिसे मैं अपने वू घटक में उपयोग करना चाहता हूं। फ़ंक्शन मूल रूप से आइटम को अंदर और बाहर स्लाइड करता है, लेकिन जब मैंने <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> 

Answer 1

आप ऐसा कर सकते हैं, लेकिन ज्यादातर मामलों में, आपको इसकी आवश्यकता नहीं है।

यदि आप वू सीख रहे हैं, तो वू में सोचने की कोशिश करें और बस jQuery को दूर रखें। JQuery में, आप चीजों को अनिवार्य तरीके से करते हैं; लेकिन अब आपको घोषणात्मक तरीके से सोचना चाहिए।
अपने आप से सीधे डोम में हेरफेर न करें। सभी डोम मैनिप्लेशंस को वू द्वारा संभाला जाना चाहिए, आप बस वू को बताएं जो आप चाहते हैं।

वू Transition प्रदान करता है, आपकी आवश्यकता पूरी तरह से jQuery के बिना की जा सकती है। सबसे पहले आप सोच सकते हैं कि यह सीधा नहीं है और इसे jQuery द्वारा हल करना चाहते हैं, लेकिन एक बार जब आप बिंदु प्राप्त कर लेंगे तो आप इसके साथ प्यार में पड़ जाएंगे।

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>