编程知识 cdmana.com

Vue facile à comprendre (1)

Petite connaissance,Grand défi!Cet article participe“Les programmeurs ont besoin de peu de connaissances”Activités créatives

vueIntroduction

vueC'est un MVVMLe cadre de

   M - Oui.model,Correspond à la couche de données
   V - Oui.view,   Correspond à la couche de vue
   VM Oui. MCouche etVCouche Les couches intermédiaires associées,Peut réaliser la liaison bidirectionnelle des données(reactEst une liaison d'élément de données)
Copier le Code

vueéchafaudage

   npm  install  -g  @vue/cli   
   Pour utilisernpmIl est recommandé d'installer d'abord le miroir Taobao Ou utiliser   yarn add  @vue/cli
  
Copier le Code

vuePrésentation du document

B6E593E3-F284-4C58-A610-94C6ACDAD485.jpg

build          Construction du projet(webpack)Codes connexes
config         Configurer le Répertoire,Y compris le numéro de port, etc. Nous pouvons utiliser par défaut .
node_modules   npm  Module de dépendance du projet chargé  
src             Voici le catalogue que nous allons développer , Tout ce qu'il faut faire est dans ce répertoire . Il contient plusieurs répertoires et fichiers :
               assets: Mettez quelques photos,Par exemple:logoAttendez.
               components: Fichiers de composantsjia
               App.vue: Fichier d'entrée du projet, Nous pouvons aussi écrire les composants directement ici ,Sans utiliser components Table des matières.
               main.js: Document de base du projet
static         Répertoire des ressources statiques,Comme les photos、Police, etc
test            Répertoire des tests initiaux ,Peut être supprimé
ndex.html       Page d'accueil fichier d'entrée , Vous pouvez ajouter  meta  Information ou Code statistique ou quelque chose comme ça 
package.json   Profil du projet
README.md      Description du projet,markdown Format
.xxxxDocumentation       Voici quelques profils , Y compris la configuration syntaxique ,gitConfiguration, etc..
store          vuexDossiers
                                                                                 Du tutoriel débutant 
Copier le Code

vueSyntaxe des modèles

    Syntaxe différentielle : Notre méthode habituelle de liaison des données , Liaison des données avec des accolades doubles , Beaucoup de cette syntaxe différentielle que nous utilisons habituellement 
      Par exemple:<span>Message: {{ msg }}</span>
   OriginalhtmlSyntaxe: Les accolades doubles interprètent les données comme du texte normal ,Au lieu de HTML Code. Pour exporter le vrai  HTML,Vous devez utiliser v-html
   Par exemple:<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Copier le Code

vueInstructions communes

(1) Attribut directive BIND V-bind

   v-bind Utilisé pour lier certains éléments de base , Quand la valeur d'expression change , Avec des effets collatéraux 
Copier le Code

70209f926aa0418a88b66e2cb8786c2b_tplv-k3u1fbpfcp-watermark.awebp

(2)### Événement lié à l'écoute V-on

  Ça marche `v-on`  Surveillance des commandes  DOM Événements,v-on:clickDirectives,Abréviations(@click)
  
Copier le Code

3cbe1d688cc34b51b56199b6c559f902_tplv-k3u1fbpfcp-watermark.awebp

(3)Liaison bidirectionnelle des donnéesv-model

  Créer une liaison bidirectionnelle de données sur un élément de formulaire , Pour écouter les utilisateurs et les mettre à jour en premier lieu 
 
Copier le Code

9da42ab8fc8947ffbc7529875a546c87_tplv-k3u1fbpfcp-watermark.awebp

(4)Traverser le tableauV-for

 Les données originales sont rendues plus d'un élément ou d'un modèle plus rapidement 
Lien vers le texte original: https://blog.csdn.net/xukongjing1/article/details/81584890
Copier le Code

91b37507839446738a571262cbe7bc7c_tplv-k3u1fbpfcp-watermark.awebp

(5)v-if Et v-show

Photo de  https://www.cnblogs.com/dengyao-blogs/p/11378228.html
Copier le Code

c5bce85b5cb04cd1834beb34d6f11159_tplv-k3u1fbpfcp-watermark.awebp

(6)Améliorer les performances v-once

Rendre les éléments et les composants une seule fois.Rendu ultérieur,Élément/Le composant et tous ses sous - noeuds seront traités comme du contenu statique et sautés. Ceci peut être utilisé pour optimiser les performances de mise à jour.
Copier le Code

(7) Directivesv-textEtv-html

v-text Afficher la valeur comme une chaîne normale , v-html Prenez la valeur comme htmlAnalyse
Copier le Code

c0bc498ba0374898ab030ca68e82424d_tplv-k3u1fbpfcp-watermark.awebp

vueLe cycle de vie de

En termes simples,:  Tout le processus de naissance à la mort des choses 
    Regardez l'image ci - dessous et vous verrez 
   
Copier le Code

1473d5b5dbcc4b83a508943b70c4dee7_tplv-k3u1fbpfcp-watermark.awebp

cbfb635bb64d440494625c569d0e7748_tplv-k3u1fbpfcp-watermark.awebp

版权声明
本文为[Xiao ren ne boit pas de coke.]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/10/20211008170808611X.html

Scroll to Top