Erste Einführung in *.Vue-Dateien in Vue.js_vue.js

vue.js ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Es verwendet ein inkrementelles Bottom-up-Entwicklungsdesign. In diesem Artikel wird hauptsächlich die erste Einführung in das Pit-Filling-Tagebuch* vorgestellt zu

Was ist Vue.js?

vue.js ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Es verwendet ein inkrementelles Bottom-up-Entwicklungsdesign. (Die Bottom-up-Entwurfsmethode basiert auf den funktionalen Anforderungen des Systems, ausgehend von bestimmten Geräten, Logikkomponenten oder ähnlichen Systemen, und stützt sich auf die Fachkenntnisse und die reiche Erfahrung des Designers, um diese zu verbinden, zu modifizieren und zu erweitern, um das erforderliche System zu bilden.) Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene. Sie ist nicht nur einfach zu starten, sondern auch einfach in Bibliotheken von Drittanbietern oder bestehende Projekte zu integrieren. Andererseits ist Vue auch in der Lage, komplexe Einzelseitenanwendungen zu betreiben, wenn es mit Einzeldateikomponenten und Bibliotheken kombiniert wird, die vom Vue-Ökosystem unterstützt werden.

Was ist eine *.vue-Datei?

Zunächst verwenden wir das Vue-Cli-Gerüst, um Projekte zu erstellen, auf die wir gestoßen sind viele, wie zum Beispiel die Datei index.vue oder App.vue. Was zum Teufel ist das? Wenn Sie neu in der Vue-Entwicklung sind, haben Sie dieses Ding vielleicht noch nie zuvor gesehen. Die *.vue-Datei 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: d477f9ce7bf77f53fbcf36bec1b69b7a, 3f1c4e4b6b16bbbd69b2ee476dc4f83a. Diese drei Teile repräsentieren jeweils HTML, JS und CSS.

Unter anderem unterstützen d477f9ce7bf77f53fbcf36bec1b69b7a das Schreiben in vorkompilierter Sprache. In unserem Projekt verwenden wir beispielsweise die SCSS-Vorkompilierung, also schreiben wir es so:

<style lang="scss">

html also verfügt über eine eigene vorkompilierte Sprache, die auch von Vue unterstützt wird. Im Allgemeinen bevorzugen unsere Front-End-Mitarbeiter jedoch immer noch die Muttersprache HTML, daher werde ich nicht zu sehr darauf eingehen.

Zusätzlich habe ich den Satz @import „./style/style“ in der App.vue-Datei verwendet, um unseren Stil an die angegebene Stelle zu schreiben. Daher wird dieser Teil des Inhalts nicht in allen meinen folgenden Artikeln erscheinen. Alle Stile werden an den entsprechenden Stellen im Ordner src/style/ geschrieben. Dies hat den Vorteil, dass ich nicht wiederholt verschiedene SCSS-Basisdateien einführen muss und den Stilcode des Projekts steuern kann.

*.vue-Dateicode-Analyse

Erstens werfen wir einen kurzen Blick:

<template>
  <p>
    <Header></Header>
    <p class="article_list">
      <ul>
        <li></li>
      </ul>
    </p>
    <Footer></Footer>
  </p>
</template>
<script>
import Header from &#39;../components/header.vue&#39;
import Footer from &#39;../components/footer.vue&#39;
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get(&#39;topics&#39;, null, r => {
        console.log(r)
      })
    }
  }
}
</script>
<style>
  .article_list {margin: auto;}
</style>

Das Obige ist die Grundstruktur einer einfachen *.vue-Datei. Lassen Sie es uns Teil für Teil erklären.

Vorlagenteil

Unten nenne ich es nicht mehr eine *.vue-Datei. Zur Vue-Komponente geändert. Erstens ist es eine Vue-Komponente, deren Vorlage ihre HTML-Struktur darstellt. Ich glaube, jeder kann sie verstehen. Es sollte jedoch beachtet werden, dass wir nicht sagen, dass es ausreicht, den Code in d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2 einzuschließen, sondern dass ein HTML-Tag darin platziert werden muss, um den gesamten Code einzuschließen. In diesem Beispiel verwenden wir das Tag e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

Jeder muss sehr überrascht sein, wenn er den Code 2432be42592c7cf43d7b271eae4dbb5a31a13137de512d4e98c7af37c2f9fe88 sieht. Tatsächlich handelt es sich hierbei um eine benutzerdefinierte Komponente. Wir haben an anderer Stelle eine Komponente geschrieben und können sie dann auf diese Weise vorstellen. Ebenso ist 479c53d55bf259afb26198039255ccd72fd8772b288aec020c7313ab369d9e3e

Skriptteil

Zuerst benötigen wir zwei benutzerdefinierte Komponenten, auf die wir zuerst verweisen. Das folgende Format ist leichter zu verstehen.

import Header from '../components/header.vue'
import Footer from '../components/footer.vue'

Zweitens verpacken wir mit Ausnahme der referenzierten Dateien den gesamten Code in den folgenden Code:

export default {
  // 这里写你的代码，外面要包起来。
}

Wir haben zunächst die Quelldateien der beiden Komponenten Header und Footer eingeführt. Als nächstes müssen wir die darin enthaltenen Komponenten deklarieren. Auf diese Weise können wir es in einer Vorlage verwenden.

components: { Header, Footer },

Daten sind unsere Daten. Unser Democode liefert leere Array-Daten einer Liste. In der Vorlage können wir this.list verwenden, um unsere Daten zu verwenden. Wir werden in einem späteren Artikel darüber sprechen, daher gehen wir hier nicht auf Details ein, sondern lernen es einfach kennen.

data () {
  return {
    list: []
  }
},

erstellt stellt dar, was ausgeführt werden muss, wenn unsere Komponente geladen wird. Hier lassen wir beispielsweise die Komponente eine Funktion namens this.getData() ausführen, wenn der Ladevorgang abgeschlossen ist. Darüber hinaus istcreated eine der Hook-Funktionen in vuejs. (Spezifische Hook-Funktionen finden Sie im Anhang)

created () {
  this.getData()
},

methods ist die Methode unserer Komponente, die auch sein kann soll Funktion sein. Der obige Code zeigt beispielsweise an, dass unsere Komponente eine Methodenfunktion namens getData() angepasst hat.

methods: {
  getData () {
    this.$api.get('topics', null, r => {
      console.log(r)
    })
  }
}

style 部分

这里比较简单，就是针对我们的 template 里内容出现的 html 元素写一些样式。如下，我的代码：

<style>
.article_list {margin: auto;}
</style>

到这里，我们应该对 vue 组件文件有了一定的认知。后面的博文中，将会涉及到比较多的各种写法，因此，建议在阅读完本文后，花比较多的时间，去查看 vue 的官方文档。虽然文档你不一定能全部看懂，但要有一个大概的认识，否则下面的学习将会比较困难。

附录

勾子，可以理解为vuejs的生命周期，而函数则是生命周期内各个阶段的事件方法。如下图

 

总结

以上所述是小编给大家介绍的初识 Vue.js 中的 *.Vue文件，希望对大家有所帮助！

相关推荐：

vue.js devtools遇到一系列问题详解

关于Vue.js 2.5新特性介绍

vue.js做出图书管理平台的详细步骤

Das obige ist der detaillierte Inhalt vonErste Einführung in *.Vue-Dateien in Vue.js_vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!