vue와 jquery는 호환되나요?

vue 및 jquery와 호환됩니다. JQuery와 Vue를 합리적으로 사용하면 서로 다른 초점을 갖기 때문에 충돌이 발생하지 않습니다. Vue는 데이터 바인딩 및 뷰 구성 요소에 중점을 두는 반면 JQuery는 비동기 요청 및 애니메이션 효과에 중점을 두고 있으며 JQuery와 Vue는 함께 작업할 때 매우 효율적으로 비동기 작업을 완료할 수 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2&&vue2.9.6 버전, Dell G3 컴퓨터.

JQuery와 VueJS를 합당하게 사용하면 초점이 다르기 때문에 충돌이 발생하지 않습니다. VueJS는 데이터 바인딩 및 뷰 구성 요소에 중점을 두고 있으며 JQuery는 비동기 요청 및 애니메이션 효과에 중점을 두고 있습니다. JQuery + VueJS를 사용하여 개발하는 경우 Vue가 렌더링한 후 모든 HTML 구성 요소를 JQuery를 통해 처리해야 합니다. JQuery를 사용할 때 DOM을 직접 조작하는 것은 피해야 하며 애니메이션 적용은 허용됩니다.

JQuery와 VueJS는 함께 작동하여 비동기 작업을 매우 효율적으로 완료할 수 있습니다. 먼저, 서버에서 전달된 JSON 데이터를 수신한 후 데이터가 Vue를 통해 구성 요소에 바인딩됩니다. 애니메이션 처리 전체 과정은 흐르는 구름과 흐르는 물처럼 자연스럽습니다.

vue 프로젝트에서 jquery를 사용하는 방법

이미 vue-cli를 사용하여 개발 스캐폴딩을 구축했다고 가정하고 다음을 살펴보세요.

1. NPM 설치 jQuery를 프로젝트 루트 디렉터리

npm install jquery --save

2에서 다음 코드를 실행합니다. Webpack 구성

프로젝트 루트 디렉터리 아래의 빌드 디렉터리에서 webpack.base.conf.js 파일을 찾아 다음을 사용합니다. 파일은 기본적으로 참조되지 않기 때문에 webpack을 소개하기 위해 시작 부분에 코드를 추가합니다.

var webpack = require('webpack')

그런 다음 module.exports에 코드 조각을 추가하세요.

// 原有代码resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src')
 }
},// 添加代码plugins: [
 new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery","window.jQuery": "jquery"
 })
],// 原有代码module: {
 rules: [// ...... ]
}

그런 다음 많은 다른 솔루션에서는 그냥 main.js로 가져오라고 했지만 질문자는 이를 따랐습니다.

main.js에서 jQuery 가져오기

import 'jquery'

Vue 구성 요소에서 $ 또는 jQuery를 사용하여 dom을 작동하는 코드를 작성하세요

그런 다음 프로젝트를 시작하세요

npm run dev

하지만 컴파일에서 오류가 보고되었습니다.

http://eslint.org/docs/rules/no-undef '$' is not defined or
http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

무슨 일이 일어나고 있나요? 에? ? ?

3.eslint check

똑똑한 친구들은 eslint와 관련이 있다고 생각했을 겁니다. 네, 이때 해야 할 일은 루트 디렉터리에 있는 .eslintrc.js 파일을 수정하는 것입니다. 수정된 파일을 내보내려면 키-값 쌍 jquery: true를 env에 추가하기만 하면 됩니다. 즉,

env: { // 原有
 browser: true, // 添加
 jquery: true
 }

다시npm run dev ，OK了，没报错，赶紧去组件里试一下吧，console.log($('选择器')), jQuery를 사용하여 DOM을 성공적으로 얻은 것을 확인할 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 vue와 jquery는 호환되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!