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 13 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现回到顶部效果
Oct 19 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
完善的jquery处理机制
2016/02/21 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python中字典(Dictionary)用法实例详解
2015/05/30 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
python实现批量监控网站
2016/09/09 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
面向对象编程OOP的优点
2013/01/22 面试题
实习教师自我鉴定
2013/12/09 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
课外访万家心得体会
2014/09/03 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
小班下学期个人总结
2015/02/12 职场文书