[Vue.js] Vue에서 JQuery 사용하기

[Vue.js] Vue에서 JQuery 사용하기

jquery datetimepicker 추가해서 사용하기

---

1. 방법

index.html에 jquery cdn을 추가해주면 vue 어디서나 사용이 가능하다.

<!-- index.html -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

 

2. 예제

[ JQuery datetimepicker를 Vue에서 사용하기 ]

1. CDN 추가

public/index.html 에 jquery, jquery-ui, jquery-datetimepicker 를 추가해 준다.

<!-- public/index.html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

 

2. 컴포넌트 생성

jquery datetimepicker option 은 jquery datetimepicker document 와 동일하게 원하는대로 넣어주면 된다.

여기서 가장 중요한 점은 onChangeDateTime 함수 부분이다. 

변경된 값을 부모에게 전달해주는 emit을 추가해 주어야 한다.

onClose때 사용해도 상관은 없다.

emit을 통해 값을 전달해 줄 수 있다는 점이 포인트!이다.

 

<!-- src/components/datetimepicker.vue -->
<template>
	<input class="datetimepicker" />
</template>

<script>
export default {
	name: 'DateTimePicker',
	mounted() {
		const self = this;

		// jquery datetimepicker options
		$(this.$el).datetimepicker({
			format: 'Y-m-d H:i',
			onChangeDateTime: function(value) {
				if (value) {
					self.$emit('update-date', value);
				}
			},
		});
	},
	beforeDestroy() {
		$(this.$el)
			.datetimepicker('hide')
			.datetimepicker('destroy');
	},
};
</script>

 

3. 전역 컴포넌트 등록

자주 사용되는 컴포넌트이기에 전역으로 등록했다. 

전역이 아니어도 상관 없으며, 원하는 부모 컴포넌트 안에 추가해도 상관 없다.

// src/main.js

import Vue from 'vue';
import DateTimePicker from '@/components/DateTimePicker';

Vue.component('DateTimePicker', DateTimePicker);

 

4. 컴포넌트 사용

emit으로 데이터를 부모에게 전달 했기 때문에 부모는 v-on을 이용해서 해당 이벤트를 받을 수 있다!

<template>
	<DateTimePicker @update-date="updateDate"></DateTimePicker>
</template>

<script>
export default {
	name: 'InputDateTimePicker',
	data: () => {
		return { date: null };
	},
	methods: {
		updateDate: function(value) {
			this.date = value;
		},
	},
};
</script>

 

 

 

---

[참고] jquery datetimepicker : xdsoft.net/jqplugins/datetimepicker/