Bagaimana untuk memperkenalkan jq ke dalam vue-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memperkenalkan jq ke dalam vue

王林

Lepaskan： 2023-05-18 09:09:07

asal

4874 orang telah melayarinya

Dengan pembangunan berterusan pembangunan bahagian hadapan, kini terdapat lebih banyak jenis rangka kerja teknologi bahagian hadapan, seperti React, Vue, Angular, dsb. Antaranya, Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini Ia mempunyai kelebihan pembangunan berasaskan komponen yang berkuasa, sintaks templat yang mudah dan prestasi rendering yang baik. Selain itu, Vue juga boleh memperkenalkan jQuery dengan mudah dan menggunakan pemalam dan kaedah jQuery dengan lebih baik untuk mencapai kesan yang lebih kaya.

Jadi, bagaimana untuk memperkenalkan dan menggunakan jQuery dalam Vue? Berikut adalah pengenalan ringkas.

Pasang jQuery
Mula-mula, kita perlu memasang jQuery dalam projek Vue.
Anda boleh memasukkan arahan berikut dalam tetingkap baris arahan:

npm install jquery --save

Salin selepas log masuk

Selepas pemasangan selesai, jQuery akan ditambahkan secara automatik pada fail package.json.

Memperkenalkan jQuery
Memperkenalkan jQuery ke dalam projek Vue, terdapat dua cara:

(1)require method

boleh dilakukan dalam Penggunaan utama memerlukan dalam .js untuk memperkenalkan 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')

Salin selepas log masuk

(2) Perkenalkan terus

dalam index.html Anda juga boleh terus memperkenalkan jQuery dalam index.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>

Salin selepas log masuk

Menggunakan jQuery
Apabila jQuery diperkenalkan ke dalam projek Vue, anda boleh menggunakannya dengan gembira. Berikut ialah contoh penggunaan pemalam petua alat 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>

Salin selepas log masuk

Perlu diingatkan di sini bahawa pengendalian elemen DOM dalam projek Vue juga memerlukan penggunaan simbol $ jQuery $ apabila menggunakannya.

Pada ketika ini, kami boleh dengan mudah memperkenalkan jQuery ke dalam projek Vue dan menggunakannya. Selepas operasi sedemikian, kami boleh menggabungkan pembangunan komponen Vue dengan lebih baik dan pemalam dan kaedah jQuery yang kaya, membawa lebih banyak kemungkinan kepada pembangunan dan pengoptimuman projek, menjadikan pembangunan bahagian hadapan lebih mudah.

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan jq ke dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!