Entwickeln Sie mit einem modularen Ansatz in VueJS

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie man Vuejs modular schreibt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Einführung

vuejs ist ein einfaches Framework für den Einstieg, das einfach zu verwenden und leicht zu erweitern ist. Mit der Beliebtheit von Webpack hat Vuejs auch einen eigenen Loader, den Vue-Loader, auf den Markt gebracht, mit dem Code problemlos gepackt werden kann. Ich habe kürzlich einen JSON-Viewer-AC geschrieben, der die modularen Funktionen von Vue-Loader vollständig nutzt. Ich war beim Schreiben sehr zufrieden und habe viel Erfahrung gesammelt. Nehmen Sie es hier auf.

Dateistruktur

 <template>
  <p>
   <app-header></app-header>
  </p>
</template>
<style>
...
</style>
<script>
  import AppHeader from &#39;./AppHeader.vue&#39;
  export default {
   name:&#39;app&#39;,
   props:[&#39;data&#39;]
   data() {
    return {}
    },
   methods: {
    handleClick() {}
   },
   components: {
    AppHeader
   }
  }
</script>

Vorlage enthält den Vorlagencode, bei dem es sich normalerweise um ein geschlossenes HTML-Tag handelt, z. B. ein p.

Stil enthält CSS-Code. Wenn Sie ihn nur auf die aktuelle Vorlage anwenden möchten, müssen Sie das Attribut „

 <style scoped>

“ verwenden Um einige CSS-Präprozessoren wie Sass zu verwenden, müssen Sie nur Lang deklarieren, und der Vue-Loader lädt ihn dann automatisch. Voraussetzung ist natürlich, dass der entsprechende Sass-Loader installiert ist.

 <style lang="sass">

Skript Beachten Sie, dass hier der es6-Code verwendet wird, um ihn zu kompilieren. Daher muss ich natürlich babel, die es6-Voreinstellung, installieren und eine .babelrc-Datei im Stammverzeichnis erstellen. Weitere Informationen finden Sie in meinem AC oder verwenden Sie die offizielle Vue-CLI, um das Projekt zu initialisieren.

Vorlage macht unsichtbare Tags

Vorlage ist nicht nur das äußerste Tag der Vorlage, sondern kann auch als gewöhnliches Tag verwendet werden. Wenn wir beispielsweise v-if verwenden müssen, um die Anzeige und das Ausblenden einiger Bereiche zu steuern, ist dies möglich.

 <template>
  <template v-if="valid">
    <p></p>
  </template>
  <template v-else>
   <p></p>
  </template>
</template>

Außerdem wird die Vorlage nicht gerendert, sodass sie keinen Einfluss auf die endgültige DOM-Struktur hat.

Hinweis: V-Show kann nicht mit Vorlage verwendet werden

flux

Während der eigentlichen Entwicklung werden Sie feststellen, dass das ursprüngliche Datenverwaltungsmodell recht ist Es ist schwierig, zwischen temporären Daten, Benutzerdaten und Hintergrunddaten zu unterscheiden. Zu diesem Zeitpunkt ist es am besten, Flux einzuführen.

Wenn Sie vorerst keine anderen Bibliotheken einführen möchten, können Sie versuchen, selbst eine zu implementieren. Das ist eigentlich sehr einfach. Bereiten Sie eine store.js vor

 let trim = str => {
 return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, '');
}
export const state = {
  jsons: []
}

export const actions = {
  parse(jsonStr) {
    if(!trim(jsonStr)) return

    let jsonObj = null
    try{  
      jsonObj = JSON.parse(jsonStr)
    }catch(err){
      state.jsons.push({err: jsonStr + '', valid: false })

    }
    if(jsonObj){
      state.jsons.push({obj:jsonObj, valid: true})
    }
  }
}

Alle Ansichtsdaten stammen aus dem Bundesstaat. Alle Änderungen müssen durch Aktionen erfolgen. Da Änderungen an Daten in untergeordneten Komponenten keine Auswirkungen auf die übergeordnete Komponente haben, können Sie die bidirektionale Bindungsfunktion von vuejs bedenkenlos verwenden.

Dann können Sie Status und Aktionen unter der Stammkomponente der App einführen und sie dann nach Bedarf an Unterkomponenten übergeben

import { state, actions } from '../store' data() {
  return {
   state,
   actions
  }
 },

<child :state="state" :handleClick="actions.update"></child>

öffentliches CSS importieren

Wäre es nicht sehr praktisch und leistungsstark, wenn die häufig verwendeten Stilvariablen auf der Seite in einer öffentlichen Datei wie common.sass

 $width: 80%;
$height: 100%;
$moli-green:#CCF3E4;
$moli-white:#f8f8f8;

gespeichert und dann in den Stil der Komponente eingeführt würden?

Aber leider weiß ich noch nicht, wie ich das umsetzen soll.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie in Jstree, dass deaktivierte untergeordnete Knoten auch ausgewählt werden, wenn der übergeordnete Knoten ausgewählt wird

in Vue Über die Verwendung von Filtern

Adaptive Verarbeitungsmethode in Javascript

Das obige ist der detaillierte Inhalt vonEntwickeln Sie mit einem modularen Ansatz in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!