Rumah >hujung hadapan web >View.js >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 实例。全局安装
<script></script>
hendaklah diletakkan selepas teg <template></template>
seperti yang ditunjukkan di bawah: <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: 🎜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!