Comment introduire jq dans vue-Questions et réponses frontales-php.cn

Comment introduire jq dans vue

王林

Libérer： 2023-05-18 09:09:07

original

4880 Les gens l'ont consulté

Avec le développement continu du développement front-end, il existe désormais de plus en plus de types de frameworks technologiques front-end, tels que React, Vue, Angular, etc. Parmi eux, Vue est actuellement l'un des frameworks front-end les plus populaires. Il présente les avantages d'un développement puissant basé sur des composants, d'une syntaxe de modèle pratique et de bonnes performances de rendu. De plus, Vue peut également facilement introduire jQuery et mieux utiliser les plug-ins et les méthodes jQuery pour obtenir des effets plus riches.

Alors, comment introduire et utiliser jQuery dans Vue ? Voici une brève introduction.

Installer jQuery
Tout d'abord, nous devons installer jQuery dans le projet Vue.
Vous pouvez saisir la commande suivante dans la fenêtre de ligne de commande :

npm install jquery --save

Copier après la connexion

Une fois l'installation terminée, jQuery sera automatiquement ajouté au fichier package.json.

Présentation de jQuery
Introduction de jQuery dans le projet Vue, il existe les deux manières suivantes :

(1)require méthode# 🎜 🎜#

Vous pouvez utiliser require dans main.js pour introduire jQuery :

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

window.jQuery = require('jquery')
require('bootstrap/dist/js/bootstrap.min')

new Vue({
  render: h => h(App),
}).$mount('#app')

Copier après la connexion

(2) Introduisez directement

dans index.html ou directement dans index. Introduisez jQuery en HTML :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue App</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Copier après la connexion

Lorsque jQuery est introduit dans le projet Vue, vous pouvez l'utiliser avec plaisir. Voici un exemple d'utilisation du plug-in d'info-bulle de bootstrap :

<template>
  <div class="container">
    <button type="button" class="btn btn-primary mt-5"
        data-toggle="tooltip" title="这是一段提示文本">
      Hover over me
    </button>
  </div>
</template>

<script>
export default {
  mounted() {
    //在mounted方法中初始化tooltip插件
    $('[data-toggle="tooltip"]').tooltip()
  }
}
</script>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!