Wo soll der in Vue geschriebene JS-Code abgelegt werden?

JavaScript-Code wird normalerweise im <script>-Tag in Vue.js platziert, kann aber auch in externen JavaScript-Dateien oder .vue-Dateien platziert werden. Vue 3 und höher unterstützt das Platzieren von JavaScript-Logik in der Funktion setup(). Weitere Platzierungsorte sind Mixins, Plugins und globale Installationen.

JavaScript-Code-Speicherort in Vue.js

In Vue.js wird JavaScript-Code normalerweise an den folgenden Speicherorten platziert:

1. <script>-Tag<script> 标签

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

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

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

2. 外部 JavaScript 文件

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

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

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 }
  }
}

5. 其他位置

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

• mixins：用于在多个组件之间共享代码。
• plugins：用于将自定义功能添加到 Vue 实例。
• 全局安装

Dies ist die gebräuchlichste Methode, JavaScript-Code in Komponenten zu platzieren. Das <script>-Tag sollte wie folgt nach dem <template>-Tag platziert werden: 🎜rrreee🎜🎜2. Externe JavaScript-Dateien🎜🎜🎜Für größere oder komplexe Komponenten kann es praktischer sein, den JavaScript-Code in einer separaten externen Datei zu platzieren. Externe Dateien können mit dem Attribut src in das Tag <script> importiert werden, wie unten gezeigt: 🎜rrreee🎜🎜3 Datei 🎜🎜🎜Einzeldateikomponenten (.vue-Dateien) in Vue.js kombinieren HTML-, CSS- und JavaScript-Code in einer einzigen Datei. JavaScript-Codeteile können wie in <script>-Tags geschrieben werden. 🎜🎜🎜4. setup()-Funktion 🎜🎜🎜In Vue 3 und höher können Sie die JavaScript-Logik der Komponente in der Funktion setup() platzieren. Die Funktion setup() gibt ein reaktives Objekt zurück, das Komponentenoptionen enthält. 🎜rrreee🎜🎜5. Andere Orte🎜🎜🎜In manchen Fällen müssen Sie möglicherweise JavaScript-Code an anderen Orten platzieren, z zwischen Komponenten. 🎜

plugins: Wird verwendet, um benutzerdefinierte Funktionen zu Vue-Instanzen hinzuzufügen. 🎜

Globale Installation: Wird verwendet, um Code in allen Komponenten zu verwenden. 🎜🎜

Das obige ist der detaillierte Inhalt vonWo soll der in Vue geschriebene JS-Code abgelegt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!