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 './AppHeader.vue' export default { name:'app', props:['data'] 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>
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.jsToutes 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}) } } }
import { state, actions } from '../store' data() { return { state, actions } },
<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;
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!