Vue.js 和 jQuery?
[英] Vue.js and jQuery?
本文介绍了Vue.js 和 jQuery?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以在 Vue.js 中使用 jQuery?我有一个函数，我想在我的 Vue 组件中使用这个函数.该函数基本上将项目滑入和滑出，但是当我使用 <script> 标签实现时，我得到了一个包含所有项目的列表，而不是 jQuery 代码工作.
$("#slideshow > div:gt(0)").hide();设置间隔(函数(){$('#slideshow > div:first').淡出(0).下一个().淡入(1000).结尾().appendTo('#slideshow');}, 5000);
如何在我的代码中使用该函数?
<div class="timer"><div class="title-block"><p class="title">MG de Jong</p><p class="description">Sprint 1</p>
<div 类=列"><div class="block"><p class="digit">{{ 天 |两位数}}</p><p class="text">天</p>
<div class="block"><p class="digit">{{ 小时 |两位数}}</p><p class="text">小时</p>
<div class="block"><p class="digit">{{ 分钟 |两位数}}</p><p class="text">分钟</p>
<脚本>导出默认{道具: {日期: {类型:数字},},数据() {返回 {现在:Math.trunc((new Date()).getTime()/1000)}},安装(){window.setInterval(() => {this.now = Math.trunc((new Date()).getTime()/1000);},1000);},计算:{秒(){返回 (this.modifiedDate - this.now) % 60;},分钟() {返回 Math.trunc((this.modifiedDate - this.now)/60) % 60;},小时() {返回 Math.trunc((this.modifiedDate - this.now)/60/60) % 24;},天() {返回 Math.trunc((this.modifiedDate - this.now)/60/60/24);},修改日期:函数(){返回 Math.trunc(Date.parse(this.date)/1000)}},}
解决方案
您可以这样做，但在大多数情况下，您不需要这样做.
如果您正在学习 Vue，那么尝试在 Vue 中思考，然后将 jQuery 放在一边.在 jQuery 中，你以命令式的方式做事；但现在你应该以声明式的方式思考.
不要直接自己操作DOM.所有的 DOM 操作都应该由 Vue 处理，你只需告诉 Vue 你想要什么.
Vue 提供了 Transition，您的需求可以通过它来完成，完全不需要 jQuery.一开始你可能觉得不简单，想用jQuery来解决，但是一旦你明白了，你就会爱上它.
Is it possible to use jQuery with Vue.js? I have a function this function that I want to use in my Vue component. 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);
},
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>
解决方案
You 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.
这篇关于Vue.js 和 jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
