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


Posted in jQuery onMay 12, 2019

引言

如果说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-dev
2.在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中写一个案例

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

这种方法是在开发中比较看好的方法,方便易用。同样,也有不希望在所有的页面都引用到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调用的两种方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
jquery登录的异步验证操作示例
May 09 #jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
You might like
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php数组一对一替换实现代码
2012/08/31 PHP
apache php模块整合操作指南
2012/11/16 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
预防煤气中毒方案
2014/06/16 职场文书
甜品店创业计划书
2014/09/21 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书