Un componente de un solo archivo significa que un archivo contiene solo un componente, es decir, un archivo es un componente.
El sufijo del componente de un solo archivo debe definirse como .vue y debe ejecutarse en el scaffolding, por lo que el contenido de este capítulo es solo para presentar el formato de archivo del scaffolding, simplemente entiéndalo.
El nombre de archivo de un componente de un solo archivo generalmente está en mayúsculas y varias palabras se nombran con camelCase grande Por ejemplo: MyCode
Formato de componente de archivo único:
<template>
<!-- 组件的结构 -->
</template>
<script>
// 组件的逻辑【Vue的数据、方法等等】
</script>
<style>
/* 组件的样式 */
</style>Nota : VSCode no reconoce el formato de código de Vue de forma predeterminada. También debe instalar el complemento de sintaxis de Vue. Después de la instalación, ingrese < y presione Entrar para generar automáticamente el formato de código.
Cree un componente de un solo archivo:
<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>Nota : Después de crear el componente, el componente debe exportarse en la etiqueta de secuencia de comandos para uso externo.
Abreviatura de componentes de un solo archivo [de uso común]:
<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>
Nota : se omite el método Vue.extend() y el nombre del componente se reemplaza por el nombre. Además, el nombre debe ser el mismo que el nombre del archivo tanto como sea posible, por lo que debe cambiar el nombre del archivo a FrameHead.vue.
Archivos comunes en andamios:
Además del componente FrameHead.vue, creamos un componente FrameNav.vue para la copia de seguridad.
<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>Luego creamos un archivo App.vue para administrar todos los componentes.
<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>Después de crear estos componentes, también debemos crear un main.js como un archivo de entrada y crear una instancia de Vue en este archivo para administrar estos componentes.
import App from './App.vue';
new Vue({
el: '#root',
template: `<App>`,
components: { App },
})Finalmente, se debe crear una página index.html para introducir el archivo de entrada main.js y mostrar el contenido en el componente.
<!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>Autor original: Wu Xiaotang
Hora de creación: 2023.4.11