Maison >interface Web >Questions et réponses frontales >Quel est le suffixe de la page écrite en vue ?

Quel est le suffixe de la page écrite en vue ?

青灯夜游
青灯夜游original
2022-12-27 18:28:203220parcourir

Le suffixe des pages écrites dans vue est ".vue". Le fichier « .vue » est un type de fichier personnalisé qui utilise une syntaxe de type HTML pour décrire un composant Vue ; un fichier vue est un composant ; La page vue comporte trois composants : 1. Le modèle, qui est le code d'affichage de l'interface (code HTML) enveloppé par la balise template ; 2. Le code d'implémentation métier (code de script js) enveloppé par la balise script ; la balise de style Style code (code de style CSS).

Quel est le suffixe de la page écrite en vue ?

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Le suffixe du nom de la page écrite dans vue est ".vue". Le fichier .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 est un type de fichier personnalisé qui utilise une syntaxe de type HTML pour décrire un composant Vue. Chaque fichier .vue contient trois types de blocs de langage de niveau supérieur