在 Vue.js 中使用 jQuery-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一款流行的 JavaScript 框架，能够让我们轻松构建高效的单页面应用程序。虽然 Vue.js 拥有强大的 API 和许多功能强大的内置指令，但有时在处理 DOM 元素时，我们可能会遇到一些“棘手”问题。在这些情况下，jQuery 可能是一个更好的选择。在本文中，我们将学习如何在 Vue.js 中使用 jQuery，并在实践中理解 jQuery 对 Vue.js 的指导意义。

为什么要在 Vue.js 中使用 jQuery？

Vue.js 提供了内置的 DOM 操作和数据绑定功能，这使得大多数前端开发人员可以轻松构建复杂的单页应用程序。但在某些情况下，我们可能需要以一种更为直接和细致的方式来操作 DOM 元素，这时 jQuery 就能够展示其强大的一面。

特别是当您正在使用第三方库或插件时，这些库或插件可能会以 jQuery 的形式提供。如果您不熟悉 jQuery，那么许多这些库或插件就无法使用。因此，学习如何在 Vue.js 中使用 jQuery 将提高您的前端技能，并帮助您更好地理解基于jQuery的插件和库。

在 Vue.js 中使用 jQuery 的实践"指南"

在使用 jQuery 时，遵循以下步骤：

1. 安装 jQuery

您可以从 jQuery官网下载最新的 jQuery 版本，复制代码并将其复制到您的项目中，然后使用以下代码将其引入：

<!-- 引入 jQuery CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

功能相对较复杂的 Vue.js 项目中，还可以使用包管理工具（npm 或 yarn 等）轻松安装它：

npm install jquery

2. 将 jQuery 引入到您的 Vue.js 项目

一旦您已经安装并准备好了 jQuery，接下来您需要了解如何在 Vue.js 中正确引用它。最好的方式是使用 webpack 和 webpack 的 vue 方法。

import $ from 'jquery';

这将允许您在 Vue.js 项目的组件中使用 jQuery，但在 Vue.js 的 mounted() 生命周期事件处理程序中引入 jQuery 时，通常更可取。如果您使用的是 Vue CLI 或类似的工具，则可以选择在 vue.config.js 中配置它：

module.exports = {
  configureWebpack: {
    plugins: [],
    externals: {
      jquery: 'jQuery'
    }
  }
}

3. 在 Vue.js 组件中使用 jQuery

一旦您已经成功将 jQuery 引入到您的 Vue.js 项目中，接下来您可以在您的 Vue.js 组件中使用它。这里有一些常见的用例：

示例：隐藏/显示 HTML 元素

// www.javascriptcn.com code example
<template>
  <div>
    <button @click="isHidden = !isHidden">Toggle Visibility</button>
    <div class="box" v-show="!isHidden"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHidden: true
    }
  },

  mounted() {
    $('.box').css({
      width: '100px',
      height: '100px',
      background: 'red'
    })
  }
}
</script>

在这个示例中，我们创建了一个按钮来切换一个包含 class 名为“box”的 HTML 元素的可见性。Vue.js 提供了一个 v-show 指令来隐藏/显示元素，而 $ 作为 jQuery 的别名，我们可以使用 jQuery 代码来给此元素添加样式。

示例：获取和设置 HTML 表单值

// www.javascriptcn.com code example
<template>
  <div>
    <input type="text" id="name" v-model="message">
    <button @click="showValue">Submit</button>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data() {
    return {
      message: ''
    }
  },

  methods: {
    showValue() {
      console.log($('#name').val())
    }
  }
}
</script>

在此示例中，我们创建了一个 input 元素来收集用户的输入，并在单击按钮时用 jQuery 检索该输入并打印输出。

后话

以上便是在 Vue.js 中使用 jQuery 的基本步骤和一些示例。虽然 Vue.js 提供了许多强大的功能和指令，但使用 jQuery 可以进行更细致的 DOM 操作，同时更好地理解基于jQuery的插件和库。通过遵循本指南，您可以成功地在您的 Vue.js 项目中使用 jQuery，并从中获得指导意义。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ca54cbe46428fe9e2597d2

在 Vue.js 中使用 jQuery