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.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 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的SQL注入过程分析
2012/01/06 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python游戏地图最短路径求解
2019/01/16 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
五年级语文教学反思
2014/01/30 职场文书
现场活动策划方案
2014/08/22 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
创业计划书之校园超市
2019/09/12 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
mysql自增长id用完了该怎么办
2022/02/12 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技