Vue3.0中如何引入jQuery并使用

这篇具有很好参考价值的文章主要介绍了Vue3.0中如何引入jQuery并使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.安装jquery

终端使用 npm 命令安装 :

npm install jquery --save

2.找到babel.config.js文件 

有的小伙伴可能项目结构不一样文件 名字会有点不一样 可能是.eslintrc.js文件,接下来我们在env中配置 jQuery:true

Vue3.0中如何引入jQuery并使用

 3.找到项目的根目录vue.config.js文件

如果在没有的情况下,可以创建一个,一般情况下新建项目是自动生成的,然后如下进行配置:

const webpack = require("webpack");
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      }),
    ],
  },
};

4.最后在main.js文件中导入jquery

import $ from 'jquert'

但是个人爱好 一般使用

import jquery from 'jquert'

这是jQuery 的引入与配置,可以全局使用。

使用案例,简单的一个点击事件:点击消失隐藏

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="one">
    <div class="d">嗯哼</div>
    <p class="ww">踹出来了</p>
  </div>
</template>
<style lang="less">
.loginbox {
  display: none;
}
</style>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "one",
  date() {
    return {};
  },
  mounted() {
    this.text();
  },
  methods: {
    text() {
      // eslint-disable-next-line no-undef
      $(".d").click(function () {
        // eslint-disable-next-line no-undef
        $(".ww").toggle();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.d {
  color: aliceblue;
  background-color: rgb(82, 199, 71);
}
.d:hover {
  cursor: pointer;
}
</style>

点击前:

Vue3.0中如何引入jQuery并使用

点击后隐藏:

Vue3.0中如何引入jQuery并使用

 此篇到此结束!文章来源地址https://www.toymoban.com/news/detail-514442.html

到了这里,关于Vue3.0中如何引入jQuery并使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • jQuery中ajax如何使用

    在现代Web开发中,使用Ajax进行异步数据交互变得非常普遍。而在jQuery中,提供了便捷的方法来实现Ajax请求,简化了开发过程。本文将介绍jQuery中如何使用Ajax以及通过代码详解其使用方法。 Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式Web应用程序的技术。它结合了

    2024年02月08日
    浏览(36)
  • 在ajax中如何使用jquery循环。

    假设result的数据是这个:  然后呢,我们就可以遍历这个result对象。 result.data : 表示你想要遍历的对象是什么。 index  是下标。 obj  就代表你想要遍历的每一个元素。

    2024年02月04日
    浏览(37)
  • 在前端开发中,何时应该使用 jQuery,何时应该使用 Vue.js

    如果您是最近才开始进入 Web 前端开发领域的开发人员,那么您可能会听说过 jQuery。jQuery 是一个小巧而功能强大的 JavaScript 库,旨在简化跨浏览器 DOM 操作、事件处理、动画效果和 AJAX 等方面的操作,可以让开发人员更轻松地开发出高质量的网站和 Web 应用程序。 何时应该使

    2024年02月02日
    浏览(49)
  • Vue3:在 VSCode 中如何成功安装 Mockjs 及成功引入 Mock 的详细过程

    1、什么是 Mock ? 其一、 Mock 的解释一: Mock 服务是指在测试过程中对于某些复杂(或者不太好构造)的对象,用一个虚拟的对象替代它;对于前端来说,就是后台数据还没有造出来,前端就可以通过 Mock 的路径或定义等,直接拿到想要的数据格式; 其二、 Mock 的解释二:

    2024年02月12日
    浏览(42)
  • Vue 和 JQuery 的区别在哪?为什么 JQuery 会被 Vue 取代?

    在 Web 前端开发领域,我们经常会遇到一些不同的工具和框架,其中 Vue 和 JQuery, JQuery 是曾经备受欢迎的选择,而现在 Vue 是大多数人的选择。本文将探讨 Vue 和 JQuery 之间的区别,并讨论为什么越来越多的开发人员放弃 JQuery 而选择 Vue。 1. 声明式 vs. 命令式 Vue 是一种声明式框

    2024年02月11日
    浏览(54)
  • jq如何获取选中option的值_使用jquery操作select(获取选中option的值等)

    总结下使用jQuery操作select的方法。 1.获取第一个候选项的值。 $(\\\'#test option:first\\\').val(); 2.获取最后一个候选项的值。 $(\\\'#test option:last\\\').val(); 3.获取第二个候选项的值。 $(\\\'#test option:eq(1)\\\').val(); 4.获取选中的候选项的值。 $(\\\'#test\\\').val(); $(\\\'#test option:selected\\\').val(); 5.设置值为2的候选项

    2023年04月08日
    浏览(51)
  • 031-安全开发-JS应用&WebPack打包器&第三方库JQuery&安装使用&安全检测

    1、三方库-JQuery-使用安全 2、打包器-WebPack-使用安全 演示案例: ➢打包器-WebPack-使用安全 ➢第三方库-JQuery-使用安全 创建WebPack,并创建目录src在目录下创建1.js 2.js 1.js 2.js 在创建index.html 由于js相互依赖的顺序不同,造成无法执行 ; 使用 Webpack 的主要原因: 模块化支持 :

    2024年02月22日
    浏览(52)
  • vue和jQuery有什么区别

            jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。         Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相

    2024年01月25日
    浏览(30)
  • Day31:安全开发-JS应用&WebPack打包器&第三方库JQuery&安装使用&安全检测

    目录 打包器-WebPack-使用安全 第三方库-JQuery-使用安全 思维导图 JS知识点: 功能:登录验证,文件操作, SQL 操作,云应用接入,框架开发,打包器使用等 技术:原生开发, DOM ,常见库使用,框架开发( Vue , NodeJS ),打包器 ( Webpack ) 等 安全:原生开发安全, NodeJS 安全,

    2024年03月14日
    浏览(52)
  • Vue、jquery和angular之间区别

    三个版本的输入数据绑定,都是单页面应用。 Angular jquery Vue.js 显而易见的是,拥有双向数据绑定的angular用更轻量的代码做了相同的事。 1.从理论来看,jquery在创建之初了为了解决前端在浏览器之中的样式兼容性问题,它是一个js库,而angular是一种前端框架,前者是用于调用

    2024年02月08日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包