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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jquery实现图片放大镜效果
Dec 23 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判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP培训要多少钱
2017/06/06 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
jquery实现pager控件示例
2014/04/09 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python中的id()函数指的什么
2017/10/17 Python
详解python单元测试框架unittest
2018/07/02 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python实现FM算法解析
2019/06/18 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python简单实现最大似然估计&scipy库的使用详解
2020/04/15 Python
Python datetime模块使用方法小结
2020/06/18 Python
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
三好生演讲稿
2014/09/12 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
个人债务授权委托书
2014/10/17 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js