vue学习笔记十：Vue中引入jquery

最新推荐文章于 2024-06-04 13:02:21 发布

军军君01

最新推荐文章于 2024-06-04 13:02:21 发布

阅读量8.6k

点赞数 4

分类专栏：前端知识学习合集 # VUE学习笔记文章标签： vue.js 学习前端 jquery

本文链接：https://blog.csdn.net/m0_37631110/article/details/123261630

版权

前端知识学习合集同时被 2 个专栏收录

40 篇文章 7 订阅

订阅专栏

VUE学习笔记

11 篇文章 0 订阅

订阅专栏

文章目录

前言
一、引入方式
- 1.使用Vue CLI 创建的项目
- 2.直接引入vue方式的项目
二、使用方法
- 1.使用Vue CLI 创建的项目
- 2.直接引入vue方式的项目
总结

前言

本篇实现vue3中引入jquery，并进行使用测试。

一、引入方式

1.使用Vue CLI 创建的项目

创建好vue项目之后进行jquer的引入，具体步骤如下：
第一步：运行nmp指令安装jquery

npm install jquery --save

在这里插入图片描述
安装完成后在node_modules中会出现对jquery目录：

package.json中会出现jquery的依赖配置：

在main.js中引入jquery就可以直接使用了：

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();
});

熟悉的感觉回来了哈哈哈哈哈啊

2.直接引入vue方式的项目

直接使用script标签引入方式引入比较简单，和普通项目一样直接引入就可以使用。

<!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>

二、使用方法

1.使用Vue CLI 创建的项目

再组件中直接使用import引入就可以直接用了

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();
});

效果如下：
在这里插入图片描述

2.直接引入vue方式的项目

直接使用就行，代码如下：

<!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>