A single-file component means that a file contains only one component, that is to say, a file is a component.
The suffix of the single-file component needs to be defined as .vue, and it needs to be run in the scaffolding, so the content of this chapter is only to introduce the file format of the scaffolding, just understand it.
The file name of a single-file component is generally capitalized, and multiple words are named with big camelCase For example: MyCode
Single file component format:
<template>
<!-- 组件的结构 -->
</template>
<script>
// 组件的逻辑【Vue的数据、方法等等】
</script>
<style>
/* 组件的样式 */
</style>Note : VSCode does not recognize the Vue code format by default. You also need to install the Vue syntax plug-in. After installation, enter < and press Enter to automatically generate the code format.
Create a single-file component:
<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>Note : After the component is created, the component needs to be exported in the script tag for external use.
Shorthand for single-file components [commonly used]:
<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>
Note : The Vue.extend() method is omitted, and the component name is replaced by name. In addition, the name should be the same as the file name as much as possible, so you need to change the file name to FrameHead.vue.
Common files in scaffolding:
In addition to the FrameHead.vue component, we create a FrameNav.vue component for backup.
<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>Then we create an App.vue file to manage all components.
<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>After these components are created, we also need to create a main.js as an entry file, and create a Vue instance in this file to manage these components.
import App from './App.vue';
new Vue({
el: '#root',
template: `<App>`,
components: { App },
})Finally, an index.html page needs to be created to introduce the main.js entry file and display the content in the component.
<!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>Original author: Wu Xiaotang
Creation time: 2023.4.11