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.

Lokasi kod JavaScript dalam Vue.js

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

1 <script> 标签

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

<code class="html"><template>
  <!-- HTML 模板 -->
</template>

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

2. 外部 JavaScript 文件

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

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

3. .vue 文件

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

4. setup() 函数

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

<code class="javascript">const MyComponent = {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    return { count, increment }
  }
}</code>

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!