Rumah hujung hadapan web View.js Di mana untuk meletakkan kod js yang ditulis dalam vue

Di mana untuk meletakkan kod js yang ditulis dalam vue

May 02, 2024 pm 10:18 PM
css vue

Kod JavaScript biasanya diletakkan dalam teg <script> dalam Vue.js, tetapi juga boleh diletakkan dalam fail JavaScript luaran atau fail .vue. Vue 3 dan ke atas menyokong meletakkan logik JavaScript dalam fungsi persediaan(). Lokasi peletakan lain termasuk campuran, pemalam dan pemasangan global.

Di mana untuk meletakkan kod js yang ditulis dalam vue

Lokasi kod JavaScript dalam Vue.js

Dalam Vue.js, kod JavaScript biasanya diletakkan di lokasi berikut:

1 <script> 标签

这是在组件中放置 JavaScript 代码最常见的方法。<script> 标签应放置在 <template> 标签之后,如下所示:

<template>
  <!-- HTML 模板 -->
</template>

<script>
  export default {
    // 组件选项
    data() {
      return {
        // 数据
      }
    },
    methods: {
      // 方法
    }
  }
</script>
Salin selepas log masuk

2. 外部 JavaScript 文件

对于较大的或复杂组件,将 JavaScript 代码放置在单独的外部文件中可能更方便。可以使用 src 属性将外部文件导入到 <script> 标签中,如下所示:

<script src="./my-component.js"></script>
Salin selepas log masuk

3. .vue 文件

Vue.js 中的单文件组件 (.vue 文件) 将 HTML、CSS 和 JavaScript 代码组合在一个文件中。JavaScript 代码部分可以像在 <script> 标签中一样编写。

4. setup() 函数

在 Vue 3 及更高版本中,可以将组件的 JavaScript 逻辑放在 setup() 函数中。setup() 函数返回一个包含组件选项的响应式对象。

const MyComponent = {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    return { count, increment }
  }
}
Salin selepas log masuk

5. 其他位置

在某些情况下,您可能需要将 JavaScript 代码放置在其他位置,例如:

  • mixins:用于在多个组件之间共享代码。
  • plugins:用于将自定义功能添加到 Vue 实例。
  • 全局安装
  • Ini ialah cara paling biasa untuk meletakkan kod JavaScript dalam komponen. Teg <script> hendaklah diletakkan selepas teg <template> seperti yang ditunjukkan di bawah:
rrreee🎜🎜2 Fail JavaScript luaran🎜🎜🎜Untuk lebih besar atau Untuk komponen yang kompleks, mungkin lebih mudah untuk meletakkan kod JavaScript dalam fail luaran yang berasingan. Fail luaran boleh diimport ke dalam teg <script> menggunakan atribut src, seperti yang ditunjukkan di bawah: 🎜rrreee🎜🎜3 .vue fail 🎜🎜🎜Komponen fail tunggal (fail .vue) dalam Vue.js menggabungkan kod HTML, CSS dan JavaScript dalam satu fail. Bahagian kod JavaScript boleh ditulis seperti dalam teg <script>. 🎜🎜🎜4. Fungsi setup() 🎜🎜🎜Dalam Vue 3 dan ke atas, anda boleh meletakkan logik JavaScript komponen dalam fungsi setup(). Fungsi setup() mengembalikan objek reaktif yang mengandungi pilihan komponen. 🎜rrreee🎜🎜5 Lokasi lain🎜🎜🎜Dalam sesetengah kes, anda mungkin perlu meletakkan kod JavaScript di lokasi lain, seperti: 🎜
  • campuran: digunakan dalam berbilang kod Kongsi. antara komponen. 🎜
  • plugin: Digunakan untuk menambah fungsi tersuai pada tika Vue. 🎜
  • Pemasangan global: Digunakan untuk menggunakan kod dalam semua komponen. 🎜🎜

Atas ialah kandungan terperinci Di mana untuk meletakkan kod js yang ditulis 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

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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

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

Peranan onmounted dalam vue

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

Apakah cangkuk 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?

Dipasang dalam vue sepadan dengan kitaran hayat yang bertindak balas Dipasang dalam vue sepadan dengan kitaran hayat yang bertindak balas May 09, 2024 pm 01:42 PM

Dipasang dalam vue sepadan dengan kitaran hayat yang bertindak balas

Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui May 09, 2024 pm 02:43 PM

Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui

See all articles