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实现前端分页功能
Mar 23 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 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与SQL注入攻击[二]
2007/04/17 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python实现购物车购物小程序
2018/04/18 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
幼儿教师培训感言
2014/03/08 职场文书
财务部总监岗位职责
2014/03/12 职场文书
宣传工作经验材料
2014/06/02 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
文艺晚会开场白
2015/05/29 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL