Rumah hujung hadapan web View.js Bagaimana untuk memperkenalkan fail js dalam vue

Bagaimana untuk memperkenalkan fail js dalam vue

May 02, 2024 pm 10:21 PM
vue

Terdapat empat cara untuk memperkenalkan fail JS luaran dalam Vue.js: melalui teg <skrip> Import fail JS modular melalui penyata import. Daftarkan fail JS sebagai komponen Vue melalui kaedah Vue.component(). Campurkan kod fail JS dengan berbilang komponen Vue melalui kaedah Vue.mixin().

Bagaimana untuk memperkenalkan fail js dalam vue

Memperkenalkan fail JS ke dalam Vue.js

Vue.js menyediakan pelbagai kaedah untuk memperkenalkan fail JavaScript luaran, termasuk:

1< Tag &lt;script&gt; 标签</strong></p> <p>在 Vue 模板中,可以使用 <code>&lt;script&gt; 标签引入 JS 文件:

&lt;script src=&quot;./my-script.js&quot;&gt;&lt;/script&gt;
Salin selepas log masuk

2. 通过 import 语句

对于模块化的 JavaScript 文件,可以通过 import 语句进行导入:

import myModule from './my-module.js'
Salin selepas log masuk

3. 通过 Vue.component() 方法

如果需要将 JavaScript 文件作为 Vue 组件注册,可以使用 Vue.component() 方法:

Vue.component('my-component', {
  // ... 组件配置
  template: '&lt;div&gt;&lt;/div&gt;',
  // ... 组件方法
  created() {
    // 组件创建时执行
    this.fetchData()
  },
  methods: {
    fetchData() {
      // ... 从 JavaScript 文件中获取数据
    }
  }
})
Salin selepas log masuk

4. 通过 Vue.mixin() 方法

如果需要将 JavaScript 文件中的代码与多个 Vue 组件混合,可以使用 Vue.mixin()

Dalam templat Vue, anda boleh menggunakan teg &lt;script&gt; untuk memperkenalkan fail JS:

const myMixin = {
  data() {
    return {
      // ... 混合数据
    }
  },
  methods: {
    // ... 混合方法
  }
}

Vue.mixin(myMixin)
Salin selepas log masuk
  • 2 Melalui pernyataan import
  • Untuk modularisasi fail JavaScript boleh diimport melalui penyataan import:
  • rrreee
3 Melalui kaedah Vue.component() 🎜🎜🎜Jika anda perlu mendaftar JavaScript. fail sebagai komponen Vue , anda boleh menggunakan kaedah Vue.component(): 🎜rrreee🎜🎜4 Gunakan kaedah Vue.mixin() 🎜🎜🎜Jika anda. perlu menggabungkan kod dalam fail JavaScript dengan berbilang Untuk mencampurkan komponen Vue, anda boleh menggunakan kaedah Vue.mixin(): 🎜rrreee🎜Apabila menggunakan kaedah ini untuk memperkenalkan fail JS, anda perlu mempertimbangkan yang berikut: 🎜🎜🎜Pastikan laluan ke fail JS adalah betul. 🎜🎜Jika menggunakan JavaScript modular, anda perlu memastikan Babel atau webpack dikonfigurasikan dengan betul. 🎜🎜Pilih kaedah pengenalan yang paling sesuai mengikut situasi tertentu. 🎜🎜

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan echarts dalam vue Cara menggunakan echarts dalam vue May 09, 2024 pm 04:24 PM

Cara menggunakan echarts dalam vue

Peranan lalai eksport dalam vue Peranan lalai eksport dalam vue May 09, 2024 pm 06:48 PM

Peranan lalai eksport dalam vue

Cara menggunakan fungsi peta dalam vue Cara menggunakan fungsi peta dalam vue May 09, 2024 pm 06:54 PM

Cara menggunakan fungsi peta dalam vue

Perbezaan antara acara dan $event dalam vue Perbezaan antara acara dan $event dalam vue May 08, 2024 pm 04:42 PM

Perbezaan antara acara dan $event dalam vue

Perbezaan antara eksport dan eksport lalai dalam vue Perbezaan antara eksport dan eksport lalai dalam vue May 08, 2024 pm 05:27 PM

Perbezaan antara eksport dan eksport lalai dalam vue

Peranan onmounted dalam vue Peranan onmounted dalam vue May 09, 2024 pm 02:51 PM

Peranan onmounted dalam vue

Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue? Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue? May 09, 2024 pm 02:33 PM

Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue?

Apakah cangkuk dalam vue Apakah cangkuk dalam vue May 09, 2024 pm 06:33 PM

Apakah cangkuk dalam vue

See all articles