JavaScript 代码在 Vue.js 中通常放置在 <script> 标签中，也可以在外部 JavaScript 文件或 .vue 文件中放置。Vue 3 及更高版本支持将 JavaScript 逻辑放在 setup() 函数中。其他放置位置包括 mixins、plugins 和全局安装。
Vue.js 中的 JavaScript 代码位置
在 Vue.js 中，JavaScript 代码通常放置在以下位置：
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 实例。 -
全局安装：用于在所有组件中使用代码。
