Vue 单文件组件的常用方法

最新推荐文章于 2023-09-01 14:19:26 发布

小吴吴吴呀

最新推荐文章于 2023-09-01 14:19:26 发布

阅读量214

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xiaowude_boke/article/details/130093855

版权

文章介绍了Vue.js中的单文件组件（SFC）概念，包括其结构、命名规范以及如何创建和导出组件。通过示例展示了模板、脚本和样式部分，并提到了VSCode的Vue语法插件支持。最后，文章演示了如何在App.vue和main.js中组织及管理组件。

摘要由CSDN通过智能技术生成

单文件组件指的是：一个文件中只包含一个组件，也就是说一个文件就是一个组件。

单文件组件的后缀名需要定义为 .vue ，需要在脚手架中才能运行所以本章节内容只是为了引出脚手架的文件格式，理解即可。

单文件组件的文件名一般首字母大写，多个单词使用大驼峰命名例如：MyCode

单文件组件格式：

<template>
  <!-- 组件的结构 -->
</template>

<script>
  // 组件的逻辑【Vue的数据、方法等等】
</script>

<style>
  /* 组件的样式 */
</style>

注：VSCode 默认不识别 Vue 代码格式，还需要安装 Vue 语法插件，安装后输入 < 再按回车键自动生成代码格式.

创建单文件组件:

<template>
  <div class="demo">
    <h2>{{title}}</h2>
    <p>用户：{{username}}</p>
  </div>
</template>

<script>
  const FrameHead = Vue.extend({
    data() {
      return {
        title: "商城管理系统",
        username: "张三",
      };
    },
  };
  export default FrameHead;
</script>

<style>
  .demo {
    display: flex;
    justify-content: space-between;
    background-color: aqua;
  }
</style>

注：组件创建完毕后，还需要在 script 标签中将组件导出，供外界使用。

单文件组件的简写方式【常用】:

<template>
	<div class="demo">
		<h2>{{title}}</h2>
		<p>用户：{{username}}</p>
	</div>
</template>

<script>
	export default {
		name: "FrameHead",
		data() {
			return {
				title: "商城管理系统",
				username: "张三",
			};
		},
	};
</script>

<style>
	.demo {
		display: flex;
		justify-content: space-between;
		background-color: aqua;
	}
</style>

注：省略了 Vue.extend() 方法，组件名替换为 name 名。另外 name 名尽量和文件名一样，所以还需要将文件名改为 FrameHead.vue.

脚手架中常见的文件:

除了 FrameHead.vue 组件我们再创建一个 FrameNav.vue 组件备用.

<template>
	<div class="demo">
		<ul>
			<li v-for="(item, index) in list" :key="index" @click="isHref(item)">
				{{ item }}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "FrameNav",
		data() {
			return {
				list: ["首页", "用户管理", "商品管理", "轮播图管理"]
			};
		},
		methods: {
			isHref(name) {
				alert(`跳转至${name}`);
			}
		}
	};
</script>

<style>
	.demo {
		background-color: blue;
	}
</style>

然后我们再创建一个 App.vue 文件用于管理所有组件.

<template>
	<div>
		<FrameHead></FrameHead>
		<FrameNav></FrameNav>
	</div>
</template>

<script>
	// 引入组件
	import FrameHead from './FrameHead.vue';
	import FrameNav from './FrameNav.vue';
	export default {
		name: "App",
		components: {
			FrameHead,
			FrameNav
		}
	}
</script>

这些组件创建完毕后，我们还需要创建一个 main.js 作为入口文件，在这个文件中创建 Vue 实例管理这些组件.

import App from './App.vue';

new Vue({
	el: '#root',
	template: `<App>`,
	components: { App },
})

最后还需要创建一个 index.html 页面，用于引入 main.js 入口文件，显示组件中的内容.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>

		<script src="./js/vue.js"></script>
		<script src="./main.js"></script>
	</body>
</html>

原创作者：吴小糖

创作时间：2023.4.11