Maison > interface Web > js tutoriel > Développer en utilisant une approche modulaire dans vuejs

Développer en utilisant une approche modulaire dans vuejs

亚连
Libérer: 2018-06-20 15:11:04
original
2946 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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">
Copier après la connexion

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>
Copier après la connexion
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, &#39;&#39;);
}
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 + &#39;&#39;, valid: false })

    }
    if(jsonObj){
      state.jsons.push({obj:jsonObj, valid: true})
    }
  }
}
Copier après la connexion
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 &#39;../store&#39; data() {
  return {
   state,
   actions
  }
 },
Copier après la connexion
importer public css
<child :state="state" :handleClick="actions.update"></child>
Copier après la connexion

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;
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal