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中的deferred对象和extend方法详解
May 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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编程效率的53个要点(经验小结)
2010/09/04 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
银行职员个人的工作自我评价
2014/02/15 职场文书
美术毕业生求职信
2014/02/25 职场文书
新年团拜会主持词
2014/04/02 职场文书
医德考评自我评价
2014/09/14 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang