JQuery 사용방법 (비권장)¶

jQuery를 사용하시는 경우 아래와 같은 단점을 초래할 수 있습니다.

코드가 복잡해지기 쉽다.
최초 화면 로딩 시간이 늘어난다.
Vue 와 jQuery간 충돌 발생 시, 문제가 더 커질 수 있다.
파일 크기가 커진다.

Note

jQuery 기능은 대부분 트랜지션과 디렉티브를 통해서 구현할 수 있습니다.

https://kr.vuejs.org/v2/guide/custom-directive.html

https://kr.vuejs.org/v2/guide/transitioning-state.html

ajax 관련 기능 필요시 axios를 사용을 권장드립니다.

https://www.npmjs.com/package/axios

jQuery 사용이 필요한 경우 아래의 코드를 참고하여 사용할 수 있습니다.

Jquery 설치

npm i jquery

전역변수 선언

frontend/build/webpack.common.js 내..

new webpack.ProvidePlugin({

    '$': 'jquery',

}),

사용 예시 (mounted 안에서 사용)

Vue 샘플..

<template>

    <div>

    <button @click="slide">Slide Toggle</button>

    <ul ref="list">

        <li>1</li>

        <li>2</li>

    </ul>

    </div>

</template>

<script>

export default {

    name: 'App',

    methods: {

        slide() {

            $(this.$refs.list).slideToggle();

        },

    }

};

</script>

ESLint 사용시

fronted/.eslintrc 내.. 선언 필요

"globals": {

    "M" : "readonly",

    "$mcore": "readonly",

    "$": "readonly",

    "_": "readonly",

    "moment": "readonly"

},