vue单页应用中如何使用jquery的方法示例


Posted in jQuery onJuly 27, 2017

前言

本文给大家介绍的是关于在vue单页应用中使用jquery的相关内容,主要记录一个今天用到的vue-cli建立的应用中引入jquery的方式。下面话不多说,来一起看看详细的介绍吧。

方法如下:

1.首选通过npm安装jquery

npm install jquery --save

2.在build/webpack.base.conf文件当中引入jquery

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')
 }
 },
 ...
}

3.在需要的地方

import $ from 'jquery'
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 },
 mounted:function(){
 let test = $('#test').text()
 console.log(test)
 },
 methods:{

 }
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用vue能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery操作之效果详解
May 19 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
基于jquery实现多级菜单效果
Jul 25 #jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
You might like
用 PHP5 轻松解析 XML
2006/12/04 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python单例模式实例解析
2018/08/28 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
职工运动会邀请函
2014/01/19 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
社区低保工作总结2015
2015/07/23 职场文书
教师节校长致辞
2015/07/31 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python