recherche

Maison  >  Article  >  interface Web  >  Comment introduire jq dans vue

Comment introduire jq dans vue

王林
王林original
2023-05-18 09:09:074864parcourir

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.

  1. 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

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

  1. 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')

(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>

    Utilisez jQuery
  1. 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 : 
    2. <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>
Il convient de noter ici que l'exploitation des éléments DOM dans les projets Vue nécessite également l'utilisation du symbole $ de jQuery. N'oubliez pas. pour l'introduire lors de son utilisation $.

À ce stade, nous pouvons facilement introduire jQuery dans le projet Vue et l'utiliser. Après de telles opérations, nous pouvons mieux combiner le développement de composants de Vue et les riches plug-ins et méthodes jQuery, apportant plus de possibilités de développement et d'optimisation de projets, rendant le développement front-end plus pratique.

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!

json jquery bootstrap html angular 前端框架 require JS dom
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：serveur de déploiement nodejsArticle suivant：serveur de déploiement nodejs

Articles Liés

Voir plus