Article Directory
foreword
This article implements the introduction of jquery in vue3 and conducts usage tests.
1. Import method
1. Projects created using Vue CLI
After creating the vue project, introduce jquer. The specific steps are as follows:
Step 1: Run the nmp command to install jquery
npm install jquery --save
After the installation is complete, the jquery directory will appear in node_modules:
jquery dependency configuration will appear in package.json:
import jquery in main.js and you can use it directly:
import { createApp } from 'vue'
import App from './App.vue'
import $ from 'jquery'
// 使用jquery
$(document).ready(function() {
createApp(App).mount('#app')
console.log($("#app").html());
$("#app").append('<span>说明</span>');
$("button").click();
});
The familiar feeling is back hahahahaha
2. Directly introduce the project of Vue mode
It is relatively simple to import directly using the script tag import method, and it can be used directly as a normal project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue项目中引入jquery并使用</title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
<!-- 直接将jquery文件引入项目 -->
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{
{ counter }}
</div>
<script>
const App = {
data() {
return {
counter: 0
}
}
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
2. How to use
1. Projects created using Vue CLI
Then use import directly in the component to introduce it and use it directly
import { createApp } from 'vue'
import App from './App.vue'
import $ from 'jquery'
// 使用jquery
$(document).ready(function() {
createApp(App).mount('#app')
console.log("jquery打印："+$("#app").html());
$("#app").append('<span>说明</span>');
$("button").click();
});
The effect is as follows:
2. Directly introduce the project of Vue mode
Just use it directly, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue项目中引入jquery并使用</title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
<!-- 直接将jquery文件引入项目 -->
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
文本:{
{ counter }}
</div>
<script>
$(document).ready(function() {
const App = {
data() {
return {
counter: 0
}
}
};
Vue.createApp(App).mount('#app');
console.log($("#app").html());
$("#app").append('<span>说明</span>');
});
</script>
</body>
</html>
The effect is as follows:
Summarize
This article summarizes the introduction of jquery in vue and the use of jquery related methods.