使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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery实现轮播图特效
Apr 12 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 图像函数大举例(非原创)
2009/06/20 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
《春晓》教学反思
2014/04/20 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
消防演习通知
2015/04/25 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Python保存并浏览用户的历史记录
2022/04/29 Python