Vue.jsとjQuery？

Question

jQueryをVue.jsで使用することはできますか？私は私の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> 

Answer 1

これは可能ですが、ほとんどの場合、そうする必要はありません。

Vueを学んでいるなら、Vueで考えてみてjQueryを離れてみてください。 jQueryでは、あなたは不可欠なやり方で物事を行います。しかし今では宣言的な方法で考えるべきである方法。
DOMを自分で直接操作しないでください。すべてのDOM操作はVueで処理する必要があります。あなたはVueに必要なものを伝えるだけです。

Vueは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>