JQuery와 Vue

뷰에서 제이쿼리는 필요 없습니다.
하지만 프로젝트 특성상 순차적으로 뷰 적용이 필요할수도 있습니다.
따라서 뷰와 제이쿼리의 차이점을 알아보겠습니다.

jQuery

<button id="btn">시작</button>
<p id="pEl"></p>

<script>
$('#btn').click(function() {
    $('#pEl').text('jQuery');
});
</script>

Vue

<button v-on:click="clickBtn">시작</button>
<p id="pEl"></p>

<script>
method : {
    clickBtn : function () {
        this.$refs.pEl.innerText = 'Vue';
    }
}
</sript>

위 예제는 버튼 클릭시 jQuery와 Vue가 표시되는 예제입니다.

jQuery UI 사용

<template>
    <div id="app">
        App 컴포넌트 <br>
        <input id="calendar">
    </div>
</template>

<script>
export default {
    mounted() {
        $('#calendar').datapicker();
    }
}
</script>

Vue에서 jQuery를 사용하려면 index.html 파일에 script로 호출하거나,
웹팩에서 jQuery 플러그인을 추가하려 사용할 수 있습니다.

jQuery UI의 컴포넌트화

위 예제를 컴포넌트화 하여 사용할수 있습니다.

Datepicker.vue 생성
<template>
    <input id="calendar">
</template>

<script>
export default {
    mounted() {
        $('#calendar').datapicker();
    }
}
</script>
app.vue에서 호출
<template>
    <div id="app">
        App 컴포넌트 <br>
        <DatePicker></DatePicker>
    </div>
</template>

<script>
import DatePicker from './DatePicker.vue'

export default {
    components : {
        DatePicker
    }
}
</script>

위에서 작성했던 UI 사용 예제와 똑같이 동작합니다.
이처럼 jQuery -> Vue의 도입은 한번에 실행되기 어렵습니다.
점진적으로 판단하여 진행하는게 좋습니다.