Développer en utilisant une approche modulaire dans vuejs

Cet article présente principalement en détail comment écrire vuejs de manière modulaire. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil.

Introduction

vuejs est un framework simple pour démarrer, facile à utiliser et facile à développer. Avec la popularité de webpack, vuejs a également lancé son propre chargement, vue-loader, qui peut facilement empaqueter du code. J'ai récemment écrit un json viewer-ac, qui utilise pleinement les fonctionnalités modulaires apportées par vue-loader. J'étais très heureux de l'écrire et j'ai acquis beaucoup d'expérience. Enregistrez-le ici.

Structure du fichier

 <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>

le modèle contient le code du modèle, qui est généralement une balise HTML fermée, telle qu'un p.

Le style contient du code CSS. Ce code est appliqué à la page entière. Si vous souhaitez l'appliquer uniquement au modèle actuel, vous devez utiliser l'attribut scoped. vous souhaitez utiliser certains processeurs prédéfinis CSS, tels que sass, il vous suffit de déclarer lang, puis vue-loader le chargera automatiquement. Bien sûr, le principe est que le sass-loader correspondant est installé.

 <style scoped>

script Notez que le code es6 est utilisé ici. J'utilise babel pour le compiler, donc bien sûr je dois installer babel, le préréglage es6, et créer un fichier .babelrc dans le répertoire racine. Pour plus de détails, vous pouvez vous référer à mon ac ou utiliser la vue-cli officielle pour initialiser le projet.

 <style lang="sass">

le modèle rend les balises invisibles

le modèle n'est pas seulement la balise la plus externe du modèle, mais il peut également être utilisé comme une balise ordinaire. Par exemple, lorsque nous devons utiliser v-if pour contrôler l'affichage et le masquage de certaines zones, cela peut être fait.

De plus, le modèle ne sera pas rendu, cela n'affectera donc pas la structure DOM finale.

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

Remarque : v-show ne peut pas être utilisé avec le modèle

flux

Pendant le développement réel, vous constaterez que le modèle de gestion des données d'origine est assez Il est difficile de distinguer les données temporaires, les données persistantes, les données utilisateur et les données d'arrière-plan. À l'heure actuelle, il est plus approprié d'introduire un flux.

Si vous ne souhaitez pas introduire d’autres librairies pour le moment, vous pouvez essayer d’en implémenter une vous-même. Préparez un store.js

Toutes les données de visualisation proviennent de l'état. Toutes les modifications doivent se faire par des actions. Étant donné que les modifications apportées aux données dans les composants enfants n'affecteront pas le composant parent, vous pouvez utiliser en toute sécurité la fonctionnalité de liaison bidirectionnelle de vuejs.

 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})
    }
  }
}

Ensuite, vous pouvez introduire l'état et les actions sous le composant racine de l'application, puis les transmettre aux sous-composants selon vos besoins

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

importer public css

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

Ne serait-il pas très pratique et puissant si nous stockions les variables de style couramment utilisées sur la page dans un fichier public tel que common.sass

et puis introduisez-les dans le style du composant.

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

Mais malheureusement, je ne sais pas encore comment mettre cela en œuvre.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter dans Jstree que les nœuds enfants désactivés seront également sélectionnés lorsque le nœud parent est sélectionné

dans Vue À propos de l'utilisation des filtres

Méthode de traitement adaptatif en Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!