Où mettre le code js écrit en vue

Le code JavaScript est généralement placé dans la balise <script> dans Vue.js, mais peut également être placé dans des fichiers JavaScript externes ou des fichiers .vue. Vue 3 et supérieur prend en charge le placement de la logique JavaScript dans la fonction setup(). Les autres emplacements de placement incluent les mixins, les plugins et les installations globales.

Emplacement du code JavaScript dans Vue.js

Dans Vue.js, le code JavaScript est généralement placé aux emplacements suivants :

1 balise <script><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 实例。
• 全局安装.

• mixins : utilisé dans plusieurs codes de partage. entre les composants. 🎜
• plugins : utilisés pour ajouter des fonctionnalités personnalisées aux instances Vue. 🎜
• Installation globale : utilisé pour utiliser du code dans tous les composants. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!