À propos de l'implémentation de l'analyse des fichiers .vue

Cet article présente principalement la mise en œuvre d'une explication détaillée de l'analyse des fichiers .vue. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

vue single file

vue est l'un des frameworks les plus populaires aujourd'hui. Le sentiment général est qu'il est élégant et compact. J'ai récemment commencé à l'apprendre. J'ai commencé à utiliser ce framework pour réaliser certains projets et apprendre de la pratique. Après avoir parcouru les documents officiels, j'ai commencé à utiliser l'échafaudage vue-cli pour construire rapidement un projet Vue et apprendre rapidement de la pratique. Après avoir examiné la structure du fichier du projet, j'ai beaucoup de confusion sur le fichier unique se terminant par .vue. Les problèmes spécifiques rencontrés sont les suivants :

Qu'est-ce que a1b75129ea8984009b8f2892633dbcb1. Si vous écrivez plusieurs balises telles que a6f776b766579c28d02706af09482172, une erreur sera signalée, comme indiqué ci-dessous.

<template>
 <p></p>
 <p></p>
</template>

//run --> throw error
-Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

.vue peut contenir du html-css-js, webpack le conditionne automatiquement en trois fichiers ?

Dans le fichier .vue, la structure dom peut être écrite sous la balise dcdc0fa59b5fea5bdae0d810c3919fcd, et le fichier de style pour la structure dom est tel que 38f6bc29e2c81c1085853db6543e4a3e de la balise ; existe, et le même script qui contrôle la structure DOM est écrit dans un autre élément frère 7239f9c7b7d151b366b41e07a1e7636c. style. Dans le même fichier, il ne sera pas confondu avec d’autres composants.

Instance officielle hello.vue

Quels sont les attributs de la balise style ? Que signifie la différence ? La balise

e5323b80b7cdba5fa628a1c89784fa75 contient les attributs scoped et module, qui représentent respectivement la portée CSS et le module CSS. Généralement, l'attribut scoped est écrit pour indiquer que le le style est uniquement pour le composant actuel. Et la partie modèle de ses sous-composants prend effet

Que signifie l'exportation par défaut dans la balise de script ?

Vous pouvez voir sur la seule image dans le texte intégral que la première ligne de code sous la balise 7239f9c7b7d151b366b41e07a1e7636c est export default {…}, qui est nouveau dans ES6 La syntaxe de la partie module ajoutée adopte la méthode module. Chaque fichier est son propre module, et l'exportation et l'importation sont utilisées pour exposer et référencer l'interface. Dans un fichier ou un module, il peut y avoir plusieurs exportations et importations, mais il ne peut y avoir qu'une seule valeur d'exportation par défaut. Après avoir utilisé cette commande, les autres modules n'ont pas besoin de connaître le nom de la variable du module pour être chargés

Que peut-on écrire sous Export Default ?

Vous pouvez écrire beaucoup de choses, y compris des variables, des méthodes, des objets, etc. Vous pouvez l'écrire comme une interface ouverte, généralement écrire data() dans le .vue. file {} et méthode, etc., les données font référence aux données du modèle définies dans le composant, et si vous liez une méthode de clic à l'élément dans dcdc0fa59b5fea5bdae0d810c3919fcd, tel que

<script>
export default {
 name: &#39;hello&#39;,
 data () {
 return {
  msg: &#39;Welcome to Your Vue.js App&#39;
 }
 },
 methods: {
   login: function() {
    console.log(this.username,this.password);
   }
  }
}
</script>

Je viens d'entrer en contact avec vue il n'y a pas longtemps. Je crois que la meilleure façon d'apprendre est. combattre avec la guerre. Je ne comprends pas l'étape. Je pense qu'il sera très intéressant de la comprendre étape par étape. S'il y a des erreurs dans ce qui précède, j'espère que quelqu'un pourra le signaler. Merci ~

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Veuillez prêter attention au contenu plus pertinent du site Web PHP chinois !

Recommandations associées :

Accès au sous-composant VUEJS 2.0/composant parent d'appel

À propos de vue-admin et du backend ( flacon) analyse de séparation et de combinaison

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!