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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 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
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
列表内容的选择
2006/06/30 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
Python之修改图片像素值的方法
2019/07/03 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
财务支持类个人的自我评价
2014/02/14 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
关于保护环境的标语
2014/06/09 职场文书
公司合作协议范文
2014/10/01 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
具结保证书
2015/01/17 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
客户答谢会致辞
2015/07/30 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL