摘要:本篇文章主要讲述jQuery之详解使vue实现jQuery调用的两种方法,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章主要讲述jQuery之详解使vue实现jQuery调用的两种方法,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
引言
如果说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.jsvar 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会提示标红,无需处理。
这种方法是在开发中比较看好的方法,方便易用。同样,也有不希望在所有的页面都引用到jQuery,这样我们就会考虑到按需引用。
方法二:按需引用jQuery方法
这种方法只在单页面中使用jQuery时进行操作。这种方法适用于极个别的交互页面中。
jQuery的安装和配置
1. 和“方法一”中的操作一致,在终端中输入
npm install jquery --save-dev
2. 找到build中webpack.base.conf文件
// webpack.base.confmodule.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>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号