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의 도입은 한번에 실행되기 어렵습니다.
점진적으로 판단하여 진행하는게 좋습니다.