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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
详解jQuery中的easyui
Sep 02 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php xfocus防注入资料
2008/04/27 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python学习笔记_数据排序方法
2014/05/22 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python程序运行原理图文解析
2018/02/10 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
高二化学教学反思
2014/01/30 职场文书
便利店投资创业计划书
2014/02/08 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
困难补助申请报告
2015/05/19 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python