Di mana untuk meletakkan kod js yang ditulis dalam 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. </script>

Lokasi kod JavaScript dalam Vue.js

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

1 <script></script> 标签

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

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

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

2. 外部 JavaScript 文件

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

<script src="./my-component.js"></script>

3. .vue 文件

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

4. setup() 函数

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

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

    return { count, increment }
  }
}

5. 其他位置

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

• mixins：用于在多个组件之间共享代码。
• plugins：用于将自定义功能添加到 Vue 实例。
• 全局安装
Ini ialah cara paling biasa untuk meletakkan kod JavaScript dalam komponen. Teg <script></script> hendaklah diletakkan selepas teg <template></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></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></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!