Vue.js và jQuery?

Question

Có thể sử dụng jQuery với Vue.js không? Tôi có một chức năng chức năng này mà tôi muốn sử dụng trong thành phần Vue của tôi. Chức năng về cơ bản trình bày các mục trong và ngoài, nhưng khi tôi thực hiện bằng cách sử dụng các thẻ <script> tôi nhận được một danh sách với tất cả các mục thay vì mã jQuery hoạt động.

$("#slideshow > div:gt(0)").hide(); 

setInterval(function() { 
$('#slideshow > div:first') 
.fadeOut(0) 
.next() 
.fadeIn(1000) 
.end() 
.appendTo('#slideshow'); 
}, 5000); 

Làm cách nào để sử dụng chức năng đó trong mã của tôi?

<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

Bạn có thể làm điều đó, nhưng trong hầu hết các trường hợp, bạn không cần phải làm như vậy.

Nếu bạn đang học Vue, sau đó cố gắng suy nghĩ trong Vue và chỉ cần đặt jQuery đi. Trong jQuery, bạn làm mọi thứ theo cách bắt buộc; nhưng bây giờ bạn nên suy nghĩ theo cách khai báo.
Không trực tiếp thao túng DOM. Tất cả các thao tác DOM nên được xử lý bởi Vue, bạn chỉ cần nói với Vue những gì bạn muốn.

Vue cung cấp Transition, yêu cầu của bạn có thể được thực hiện bằng cách này mà không cần jQuery chút nào. Lúc đầu, bạn có thể nghĩ rằng nó không đơn giản và muốn giải quyết nó bằng jQuery, nhưng một khi bạn nhận được điểm bạn sẽ rơi vào tình yêu với nó.

Answer 2

Như một số ý kiến ​​của anh ấy đề cập đến, bạn có thể sử dụng chức năng được gắn kết. Để biết thêm chi tiết bạn có thể xem bài viết này: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Dưới đây là một ví dụ cơ bản sử dụng 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>