当前位置: 首页 > 编程笔记 >

vue单页应用中如何使用jquery的方法示例

赵超
2023-03-14
本文向大家介绍vue单页应用中如何使用jquery的方法示例,包括了vue单页应用中如何使用jquery的方法示例的使用技巧和注意事项,需要的朋友参考一下

前言

本文给大家介绍的是关于在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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。

 类似资料:
  • 本文向大家介绍在vue中使用setInterval的方法示例,包括了在vue中使用setInterval的方法示例的使用技巧和注意事项,需要的朋友参考一下 昨天在用vue开发项目的时候遇到一个坑,在群友的探讨中,成功的解决了这一问题。 具体情形如下:使用vue开发,在页面中有一个人数统计组件,人数统计是要动态变化数据的,由于目前没有真实数据,那么我想的是用随机数和setInterval来改变dat

  • 本文向大家介绍clipboard在vue中的使用的方法示例,包括了clipboard在vue中的使用的方法示例的使用技巧和注意事项,需要的朋友参考一下 简介 页面中用 clipboard 可以进行复制粘贴,clipboard能将内容直接写入剪切板 安装 使用方法一 使用方法二 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jquery在vue脚手架中的使用方式示例,包括了jquery在vue脚手架中的使用方式示例的使用技巧和注意事项,需要的朋友参考一下 本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 这种方式不会影响原来VUE文件中的$的使用,完全可行;但是需要每个vue文件都引入一遍; 2:在入口文件app.vue中整体引入,不会报错 3:在

  • 本文向大家介绍vue中jsonp插件的使用方法示例,包括了vue中jsonp插件的使用方法示例的使用技巧和注意事项,需要的朋友参考一下 通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback 总结 到此这篇关于vue中jsonp插件的使用的文章就介绍到这了,更多相关vue中jsonp插件使用内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教

  • 本文向大家介绍vue中动态select的使用方法示例,包括了vue中动态select的使用方法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 js中写如: 希望本文所述对大家vue.js程序设计有所帮助。

  • 我有工作代码,当我点击重置按钮时,可以重置我的表单。然而,在我的代码变得越来越长之后,我意识到它不再工作了。 和我的jQuery: 是否有一些源代码应该包含在我的代码中,以便使用<代码>。reset()方法是否有效?之前我使用: 并且方法正在工作。 目前我正在使用 这可能是原因之一吗?