.vue-Dateigenerierung und gemeinsame Nutzung von Beispielen

In den letzten Tagen wurden neue Projekte mit vue2.0 entwickelt. Als ich das Projekt-Framework bekam, sah ich hauptsächlich .vue-Dateien. vue-Dateien in den Einführungsnotizen und der Verwendung von vue2.0 , sehr praktischer Wert, Freunde in Not können sich darauf beziehen, ich hoffe, es kann jedem helfen.

Ich weiß nicht, wie ich es verwenden soll:

1 Eine gekapselte Komponente. Sie können HTML, CSS, JS schreiben. Der HTML-Code ist in einer Vorlage geschrieben, die die Vorlage tatsächlich definiert.

2. Die Stile der einzelnen .vue-Dateien sind nicht unabhängig. Derselbe Selektor kann in verschiedenen .vue-Dateien funktionieren, solange er die ausgewählten Bedingungen erfüllt .box{ width:200px; }, wenn es auch .box in der Datei gibt, auf die Pfeil 2 zeigt, dann funktioniert .box{ width:200px } auch in der Datei, auf die Pfeil 2 zeigt, es sei denn, der Stil wird in der Datei neu definiert Feile, auf die Pfeil 2 zeigt und abgedeckt ist.

3. Wenn Sie keine einzelne .vue-Datei verwenden, erstellen Sie eine Vue-Root-Instanz über den Vue-Konstruktor, um vuejs zu starten. In der .vue-Datei müssen Sie Vue nicht zum Erstellen einer Instanz verwenden, sondern verwenden Sie die Export-Standardeinstellung. Das standardmäßige Objekt nach dem Export in der .vue-Datei entspricht dem akzeptierten Objekt im neuen Vue()-Konstruktor:

, das heißt:

4. Sie können weniger eingeben usw.:

<script>
  export default{
    data:function(){
      return {
        //返回一个对象
      }
    },
    methods:{
      //定义方法
    }
  }
</script>

5 Um eine bestimmte Datei index.vue im Ordner zu speichern, können Sie index.vue nach dem Ordner weglassen. Wenn Sie zu dieser Datei springen möchten:

, dann sind die folgenden zwei Sätze äquivalent:

Daher wird die index.vue nach dem Ordner normalerweise weggelassen.

Verwandte Empfehlungen:

Ausführliche Erläuterung von oninput zur Überwachung von Eingabeeingabeereignissen in der .vue-Datei

Erste Einführung in Vue.js *.Vue file_vue.js

Webstorms neue .vue-Datei unterstützt hervorgehobene Vue-Syntax und ES6-Syntax

Das obige ist der detaillierte Inhalt von.vue-Dateigenerierung und gemeinsame Nutzung von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!