VueJS基础系列：vue-clix3.x，外部js中使用jq

本文链接：https://blog.csdn.net/baidu_41327283/article/details/108165083

一、问题描述

在自定义幻灯片轮播组件中引用了公共js文件：carousel.js，在carousel.js文件中又使用了大量的jq方法。运行的时候项目一直报错误：

$ is not defined

这个问题基本就是jq没有正确引入的问题了。百度可以查到很多vue引入jq的方式，但是要注意自己的脚手架版本，以及引入jq的使用范围。

vue-cli2.x与vue-cli3.x引入jq的方式不一样。
在vue文件中使用$，则需要将jquery挂到vue的原型的$变量上。在外部js文件中使用$，则需要将jquery挂在顶层对象下（通常浏览器环境下是window对象，Node环境下是global对象）。

二、配置

我的vue-cli是3.x以上的，2.x版本的同学可以自行百度引入jq的引入方式。

1、npm 安装jquery，在项目所在目录下运行cmd输入以下命令：

npm install jquery

2、src目录下新建jquery.js，内容如下：

3、修改src下的main.js，内容如下：

4、如果使用了eslint，eslint报错的话，可以尝试在项目根目录下的.eslintrc.js文件中作如下修改：

三、使用

1、在外部公共js文件中使用：$(selector)

2、在vue文件中使用如下：

this.$(selector)

3、在vue文件中获取dom的写法：

既然引入了jquery，自然会想法用jq的$("#xxx")等方法获取dom，但是在vue中最提倡的还是使用$refs获取dom。写法如下：

<template>
   <div ref="dom"></div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted (){
    let dom = this.$refs.dom;
    debugger;
  }
}
</script>

<style scoped>

</style>

在要获取的dom元素上设置ref属性，在mounted()中获取dom，注意不能在created()中获取，此时dom还未渲染并挂载出来，获取不到。设置debugger断点，打开浏览器开发者选项，即可查看dom的内容。

对于this.$refs.dom，如果ref作用在html标签上，则通过this.$refs.dom获取到的元素，它的__proto__是HTMLDivElement。如果采用了基于vue的前端框架，如：vuetify、elementUI等，并且ref作用在这些UI框架的标签上，例如：vuetify标签<v-sheet ref="xxx">，则通过this.$refs.xxx获取到的元素，它的__proto__是VueComponent，可以通过this.$refs.xxx.$el获取__proto__是HTMLDivElement的元素。

获取到dom对应的HTMLDivElement对象后，就可以通过$(HTMLDivElement)将元素转化为jq对象，从而使用jq方法。

<template>
   <div ref="dom"></div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted (){
    let dom = this.$refs.dom;
    let jqdom = this.$(dom);
    debugger;
  }
}
</script>

<style scoped>

</style>