Vue.js 및 jQuery?

Vue.js 및 jQuery?

vue.js에서 jQuery를 사용할 수 있습니까?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>

그렇게 할 수 있지만 대부분의 경우 그럴 필요가 없습니다.

Vue를 배우고 있다면 Vue를 생각하고 jQuery를 치워보세요.jQuery에서는 명령적인 방법으로 일을 처리하지만, 지금은 선언적인 방식으로 생각해야 합니다.
DOM 를 직접 조작하지 말아 주세요.모든 DOM 조작은 Vue가 담당해야 합니다. 원하는 대로 Vue에게 말하면 됩니다.

Vue는 전환을 제공하며, 이를 통해 jQuery를 전혀 사용하지 않고도 요건을 충족할 수 있습니다.처음에는 간단하지 않고 jQuery로 해결하고 싶다고 생각할지도 모르지만, 일단 요점을 알게 되면 당신은 그것에 빠져들게 될 것이다.

코멘트 중 일부에서 언급했듯이 마운트된 기능을 사용할 수 있습니다.상세한 것에 대하여는, 다음의 문서를 참조해 주세요.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>

언급URL : https://stackoverflow.com/questions/42728104/vue-js-and-jquery