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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现轮播图效果demo
Jan 11 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
Php获取金书网的书名的实现代码
2010/06/11 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
28个JS验证函数收集
2010/03/02 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
西部世纪.net笔试题面试题
2014/04/03 面试题
银行行长竞聘演讲稿
2014/04/23 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
年度评优评先方案
2014/06/03 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
晚会开幕词范文
2016/03/04 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang