Heim  >  Artikel  >  Web-Frontend  >  Wie lautet der Suffixname der in Vue geschriebenen Seite?

Wie lautet der Suffixname der in Vue geschriebenen Seite?

青灯夜游
青灯夜游Original
2022-12-27 18:28:203118Durchsuche

Der Suffixname der in Vue geschriebenen Seiten ist „.vue“. Die „.vue“-Datei ist ein benutzerdefinierter Dateityp, der eine HTML-ähnliche Syntax verwendet, um eine Vue-Komponente zu beschreiben. Die Vue-Seite besteht aus drei Komponenten: 1. Vorlage, der vom Template-Tag umschlossene Schnittstellen-Anzeigecode (HTML-Code); 2. Der vom Skript-Tag umschlossene Geschäftsimplementierungscode (js-Skriptcode); das Style-Tag Style-Code (CSS-Style-Code).

Wie lautet der Suffixname der in Vue geschriebenen Seite?

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Der Suffixname der in Vue geschriebenen Seite lautet „.vue“. Die Datei .vue”。

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: &#39;Hello world!&#39;
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

组件结构讲解

  • 把每个组件都放到一个独立的.vue文件里,

  • 文件的后缀是:.vue 文件

  • 此文件三大部分: templatescriptstyle

  • template

    • 写html结构的

    • 注意这里的html部分必须用一个标签全包住

  • script

    • 写逻辑的,data、methods、生命周期钩子、计算属性等等代码都写在这个部分

    • 注意这里的data不再是一个对象,在组件里,data将会是一个函数,return一个对象。

  • style

    • 写样式的

    • 如何 导入外部css,

      • 在css中的导入(主体使用):

       @import url(./babel.css);
  • 快捷键快速生成: <vue></vue>

  • 单文件组件的运行

    在cmd窗口该vue文件根目录下输入vue serve index.vue 这里index.vue

    .vue ist ein benutzerdefinierter Dateityp, der eine HTML-ähnliche Syntax zur Beschreibung einer Vue-Komponente verwendet. Jede .vue-Datei enthält drei Arten von Sprachblöcken der obersten Ebene