如何在vue 中引入使用jquery

在Vue中引入jQuery可以使用以下两种方法：

方法一: 通过cdn引入

Vue的脚手架中默认已经配置了webpack，因此我们可以使用CDN来引入jQuery。只需在index.html中加入以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，我们就可以在我们的Vue组件中使用jQuery了。示例如下：

<template>
  <div>
    <h1>使用jQuery操作Dom元素</h1>
    <div id="app">
      <button @click="changeColor">改变颜色</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    $("#app").css("background-color", "red");
  },
  methods: {
    changeColor() {
      $("#app").css("background-color", "green");
    },
  },
};
</script>

这里的mounted钩子函数中使用了jQuery的css方法来设置背景颜色，当点击按钮时会改变颜色。

方法二: 使用npm安装并引入

我们也可以使用npm来安装jQuery，然后再在我们的Vue组件中通过import语句来引入。首先，我们需要安装jQuery：

npm install jquery --save

安装完成后，我们可以在我们的Vue组件中引入：

import $ from "jquery";

然后，我们就可以在Vue组件中使用jQuery了。示例如下：

<template>
  <div>
    <h1>使用jQuery操作Dom元素</h1>
    <div ref="app">
      <button @click="changeColor">改变颜色</button>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {};
  },
  mounted() {
    $(this.$refs.app).css("background-color", "red");
  },
  methods: {
    changeColor() {
      $(this.$refs.app).css("background-color", "green");
    },
  },
};
</script>

这里的mounted钩子函数中使用了jQuery的css方法来设置背景颜色，当点击按钮时会改变颜色。需要注意的是，在Vue中使用ref属性来获取DOM节点。

总之，以上两种方法都能帮助我们在Vue中使用jQuery，具体选择哪种方法可以根据项目的需要来决定。