使vue实现jQuery调用的两种方法

2024-08-19 10:49:50

引言

如果说vue是前端工程化使用较多的骨架，那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携，无需再过多的考虑DOM的操作。而vue的渐进式开发（逐步引用组件，按需引入），也让许多新手前端开发人员逐步绕过对jQuery的学习。jQuery需要记忆的内容颇多，这也让jQuery变得不那么受新入行开发者喜欢。

在前端工程化的需求没有普及的时候，许多公司使用的是后端渲染技术，为了能够实现友好的前端交互效果，需要写好大量的jQuery、JavaScript和CSS，所以到目前还是有大量的公司维护和使用jQuery。

前端工程化让许多人看到了开发的效率，但公司还是需要维护产品线，所以解决jQuery在vue的使用是每位前端工程师的必经之路，毕竟从零造轮子是一个非常痛苦耗时的事。

今天我们提供两种方法引用，切记二选其一。

方法一：在webpage中引入JQ（推荐）

在vue中安装jQuery组件

老乡已经默认你的已经使用vue-cli脚手架进行操作了。至于如何使用vue-cli，可以进入vue的官网中查看相关开发文档。

1.在项目终端中输入npm install jquery -save-dev2.在build文件夹中找到webpack.base.conf.js文件，打开，在第一行添加

var webpack = require('webpack')

效果：

// webpack.base.conf.js
var webpack = require('webpack')
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')

3.在同样这个文件中（webpack.base.conf.js）的module.exports里添加：

plugins: [
 new webpack.ProvidePlugin({
  $:"jquery",
  jQuery:"jquery",
  "windows.jQuery":"jquery"
 })
 ],

1.在入口文件main.js中输入：

import $ from 'jQuery'

提示：这里无需再下面注册，有些IDE会提示标红，无需处理。

查看执行效果

在app.vue中写一个案例

这种方法是在开发中比较看好的方法，方便易用。同样，也有不希望在所有的页面都引用到jQuery，这样我们就会考虑到按需引用。

方法二：按需引用jQuery方法

这种方法只在单页面中使用jQuery时进行操作。这种方法适用于极个别的交互页面中。

jQuery的安装和配置

1.和“方法一”中的操作一致，在终端中输入

npm install jquery --save-dev

2.找到build中webpack.base.conf文件

// webpack.base.conf
module.exports = {
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
   'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
  }
 }
}

jq的引用

在APP.vue中或者需要使用的地方

<template>
 <div>
  <p class="jj">请点击我</p>
 </div>
</template>
<script>
import $ from 'jquery'
export default {
 name: 'app',
 mounted () {
  $('.jj').click(function(){
   alert(1)
  })
 }
}
</script>

结语

方法千万条，道理第一条。本文是我在开发中遇到jq无法引入后查阅资料后整理的方法。但不论是什么方法，我们最终的目标都是要完成项目的需求。技术的革新速度和时代的发展飞快，jQuery也在不断发展，许多人觉得这类语言过于复杂多变，但这就如同学习python一样，开始“学习一时爽，一直学习一直爽”，但到达技术瓶颈时，你会发现总会让人很棘手。我就多次遇到vue处理的问题而就迫使我去阅读底层技术。所以，学无止境，有效努力，持续输出。

以上所述是小编给大家介绍的使vue实现jQuery调用的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

在Vue项目中引入JQuery-ui插件的讲解

安装: npm install jquery-ui-dist -S 引入: import 'jquery-ui-dist/jquery-ui' 更改配置文件: 1.添加jquery:'jquery' resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), jquery:'jquery', } }, // 添加代码 plugins:
Vue CLI3.0中使用jQuery和Bootstrap的方法

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta
jQuery+vue.js实现的多选下拉列表功能示例

本文实例讲述了jQuery+vue.js实现的多选下拉列表功能.分享给大家供大家参考,具体如下: 其实就是实现一个多选下拉列表,然后将选中的选项显示到相应的位置: 因为主要是jQuery选中行为的实现,所以,样式结构就不多说啦,直接贴代码啦: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
在vue项目中使用Jquery-contextmenu插件的步骤讲解

使用步骤: 1.安装: npm i jquery-contextmenu --save-dev 2.在main.js文件中引包 import Jquery_contextmenu from 'jquery-contextmenu' Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/dist/jquery.contextMenu.css' 注意: 在引入样式时可以点击进去jquery-contextmenu的安装目录中查找对应的css文件
vue轻量级框架无法获取到vue对象解决方法

使用vue框架,jar包都已经导入进去了,可是还是不能运行,提示vue未定义控制台报错:vue is not defined 报错原因:如图vue2 解决方法:如图vue3.将js文件引入到body中或者是直接在body中写js代码如图vue4 问题解决:如图vue5
jQuery会死吗?我为什么不用vue写富文本

一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已经落后,不久将死.甚至有少数网友很激进:非vue技术栈,你不应该加入我这个群,不管你做得多好.对应这个事情,首先我一般不反驳,因为我对vue,jquery有自己的应用场景度量.但是对于这种不分场景应用而盲目赶潮流的观点,我是持否定态度的. 为此我想有必要通过这篇文章,说明一下:我为什么用jquery
详解jquery和vue对比

前言:很多人说jquey和vue没有什么可比的,应该和Angular,React来比吧,我到觉得他们倒没有多大的可比性,都是基于mvvm思想设计的框架,无非就是实现的方式不一样,在不同场景下性能上会有一些差异.然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据上去,难道不是一个根本性的改变吗? 1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在
使vue实现jQuery调用的两种方法

引言如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按需引入),也让许多新手前端开发人员逐步绕过对jQuery的学习.jQuery需要记忆的内容颇多,这也让jQuery变得不那么受新入行开发者喜欢. 在前端工程化的需求没有普及的时候,许多公司使用的是后端渲染技术,为了能够实现友好的前端交互效果,需要写好大量的jQuery.JavaScript和CSS,
Js类的静态方法与实例方法区分及jQuery拓展的两种方法

上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~ 静态方法,属于类的方法,即类可以直接调用的方法.为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态
vue中使用WX-JSSDK的两种方法(推荐)

公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题.本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效. 一.通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk 2.将微信jsdk挂载到全局上在utils目录下新建WechatPlugin.js WechatPlugin.js import wx from 'we
vue实现打印功能的两种方法

第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id="printTest" > <p>锄禾日当午</p> <p>汗滴禾下土 </p> <p>谁知盘中餐</p&
C# 编译生成dll文件供程序调用的两种方法

一.使用vs2017 创建动态dll文件方法一: 1.新建-项目-类库 2.创建一个.cs文件写入代码,例如:建立一个Windows窗体略丑,简单明了... using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System
vue 动态创建组件的两种方法

Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c
jQuery插件开发的两种方法及$.fn.extend的详解

jQuery插件开发分为两种: 1 类级别类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码代码如下: var i = $.add(3,2); var j
实现jquery放大镜的两种方法

jquery写的两种放大镜效果,没有使用到插件.调理和思路清晰.不是使用面向对象方式写的,初学者较容易看懂.废话不多说,看代码.图片这里就不上传了,大家自己找下.最好是找到比例的,这样效果比较好. <body> <div id="father"> <div id="container"> <img src="img/400_1.jpg" style="display: block;"&
Jquery与JS两种方法仿twitter/新浪微博高度自适应无缝滚动实现代码

首先是Jquery 无标题文档 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $ul.animate({
vue打印功能实现的两种方法总结

第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </div> <butt

使vue实现jQuery调用的两种方法

相关推荐

随机推荐