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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery编写QQ简易聊天框
Aug 27 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP 文件上传限制问题
2019/09/01 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python查看模块,对象的函数方法
2018/10/16 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
编程输出如下图形
2013/11/24 面试题
班组长竞聘书
2014/03/31 职场文书
趣味运动会策划方案
2014/06/02 职场文书
计划生育证明书写要求
2014/09/17 职场文书
行政撤诉申请书
2015/05/18 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android