单文件组件指的是:一个文件中只包含一个组件,也就是说一个文件就是一个组件。
单文件组件的后缀名需要定义为 .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.
脚手架中常见的文件:
扫描二维码关注公众号,回复:
15910660 查看本文章
除了 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