什么 Vue.js 单文件组件

发布时间：2023-04-24 12:31:18 所属栏目：教程来源：

导读：Vue 单文件组件主要是一个 .vue 文件，这是一个自定义的文件类型，一个 .vue 文件就是一个单文件组件。

uni-app 只支持 vue 单文件组件（.vue 组件）。其他的诸如：动态组件，自定义 render，和<script type="tex

Vue 单文件组件主要是一个 .vue 文件，这是一个自定义的文件类型，一个 .vue 文件就是一个单文件组件。

uni-app 只支持 vue 单文件组件（.vue 组件）。其他的诸如：动态组件，自定义 render，和<script type="text/x-template">字符串模版等，在非H5端不支持。

创建好 .vue 文件后，vue-loader 会帮助我们解析文件，它会提取每个语言块，将他们组装成一个 Commonjs 模块，默认会导出一个 Vue.js 组件对象。

创建 .vue 文件

我们用 HBuilderX 这个官方工具来创建 .vue 文件，右键点击 pages 文件夹，点击新建页面，命名为 imoocPage。

pages 文件夹下面就会创建一个 imoocPage 文件夹，下面包含了一个 .vue 文件。

.vue 文件中会帮我们默认创建 <template>、<script> 和 <style>这三大顶级语言块。

<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

<template> 部分

每个 .vue 文件最多包含一个 <template> 标签。<template> 里面包含 html 代码，在这里面定义了页面模板，也就是页面上显示的内容。在 <template> 标签的下一级只能有一个子节点元素，如果有多个子节点元素就会报错。

正确实例：

<template>
<view>
...
</view>
</template>
错误实例：

<template>
<view>
...
</view>
<view>
...
</view>
</template>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!