Apprentissage du développement front-end [Vue]-Partie 1

1. Vue d'ensemble

1. Introduction

Vue (prononcé /vjuː/, comme view) est un framework JavaScript progressif pour la construction d'interfaces utilisateur. Il est construit sur HTML, CSS et JavaScript standard et fournit un ensemble de modèles de programmation déclaratifs et à composants pour vous aider à développer efficacement des interfaces utilisateur.

• Construire l'interface utilisateur : transformer les données en interface utilisateur d'une manière ou d'une autre
• Progressif : Vue peut être appliqué couche par couche de bas en haut. Les applications simples n'ont besoin que d'une bibliothèque de base légère et compacte, et les applications complexes peuvent introduire divers plug-ins Vue.
• Votre développement Yuxi

2. Caractéristiques

• Suivez le modèle MVVM
• Codage simple, petite taille, haute efficacité de fonctionnement, adapté au développement mobile/PC
• Il se concentre uniquement sur l'interface utilisateur elle-même et peut introduire d'autres projets de développement de bibliothèques tierces
• Adoptez le mode composant pour améliorer le taux de réutilisation du code et faciliter la maintenance du code
• Codage déclaratif, afin que les codeurs n'aient pas besoin de manipuler directement le DOM, améliorant ainsi l'efficacité du développement
• Utilisez le DOM virtuel et l'algorithme Diff pour réutiliser les nœuds DOM autant que possible

Algorithme 3.Diff

Real DOM :
Le processus de rendu du navigateur comprend principalement les cinq étapes suivantes :

• Le navigateur récupère le document HTML et analyse l'arborescence DOM
• Analyse CSS pour construire un modèle de feuille de style en cascade CSSOM (CSS Object Model)
• Fusionner l'arbre DOM et le CSSOM en un seul arbre de rendu
• Avec Render Tree, le navigateur peut obtenir la définition CSS et l'affiliation de chaque nœud, afin de pouvoir calculer la position réelle de chaque nœud
• Dessiner des pages par règles de calcul de l'étape précédente

Le DOM virtuel fait référence à la construction de l'arbre DOM réel sous la forme d'objets js, afin de résoudre le problème de performances du navigateur exploitant le DOM réel.
Le DOM virtuel consiste à utiliser l'avantage de la vitesse d'exécution rapide de js pour optimiser le fonctionnement de DOM. Utilisez js pour simuler l'arborescence DOM et traitez le fonctionnement de DOM en js avant le rendu. Un bref résumé est divisé en trois points :

• Simulez l'arborescence DOM avec des objets javascript et affichez l'arborescence DOM ;
• Comparez les anciens et les nouveaux arbres DOM via l'algorithme diff pour obtenir l'objet de la différence ;
• Applique l'objet différent à l'arborescence DOM rendue.

L'algorithme diff est un algorithme efficace pour comparer les nœuds d'arbre au même niveau.

• Les comparaisons ne seront effectuées qu'au même niveau, pas de comparaisons entre niveaux
• Dans le processus de comparaison diff, la boucle compare des deux côtés au milieu
  

4. Construire l'environnement

Comment construire un projet vue

5. Facile à utiliser

Une fois l'objet d'instanciation Vue monté sur l'élément racine, une instance globale d'objet Vue est générée. L'objet Vue passera dans l'objet de configuration (options) pendant le processus d'instanciation. Les options incluent les données, les méthodes, le calcul, la surveillance, etc.

• Pour que Vue fonctionne, vous devez créer une instance de Vue et transmettre un objet de configuration
• Le code dans le conteneur racine est toujours conforme à la spécification html, mais une syntaxe Vue spéciale est mélangée dans
• Le code dans le conteneur racine est appelé le modèle Vue
• Il existe une correspondance biunivoque entre les instances de Vue et les conteneurs , et ces derniers ne seront pas remplacés dans Vue.
• Il n'y a qu'une seule instance Vue en développement réel, et elle sera utilisée avec des composants
• Le xxx dans { {xxx}} doit écrire une expression js, et xxx peut automatiquement lire tous les attributs dans les données
• Une fois que les données dans les données changent, l'endroit où les données sont utilisées dans le modèle sera également automatiquement mis à jour.

2. Grammaire

1. Syntaxe du modèle

Il existe deux types de syntaxe de modèle : la syntaxe d'interpolation de texte et la syntaxe d'instruction.

1. Syntaxe d'interpolation : utilisée pour analyser le contenu des balises

<div>{
   
   {xxx}}</div>
//xxx 是 js 表达式，可以直接读取到 data 中的所有区域

2. Syntaxe d'instruction : utilisée pour analyser les balises (y compris : les attributs de la balise, le contenu du corps de la balise, les événements de liaison...)

• v-html: insérer au format html ;

<span v-html="xxx"></span>

• v-bind: Liaison de données à sens unique, les données ne peuvent circuler que de données à page ;

<div v-bind:id="dynamicId"></div>
简写为：
<div :id="dynamicId"></div>

动态绑定多个值：
<div v-bind="objectOfAttrs"></div>
data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

• v-model: Liaison de données bidirectionnelle, les données peuvent non seulement circuler des données vers les pages, mais également des pages vers les données ; abrégé v-model:valueenv-model ; souvent utilisé dans les composants de formulaire.

<input type="text" v-model:value="name"><br/>
简写为
<input type="text" v-model="name">

• v-if: Cette commande supprime/insère l'élément en fonction de la valeur vraie ou fausse de l'expression

<p v-if="seen">Now you see me</p>

• v-on: écoute les événements DOM, abrégés en @caractères

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

Paramètres dynamiques :
vous pouvez également utiliser une expression JavaScript sur le paramètre de commande, qui doit être placé entre crochets :

<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

• La valeur de l'expression dans le paramètre dynamique doit être une chaîne ou null ;
• Les espaces et les guillemets ne sont pas autorisés dans les noms d'attributs HTML ;
• Lors de l'utilisation de modèles en ligne DOM (modèles écrits directement dans le fichier HTML), nous devons éviter d'utiliser des lettres majuscules dans le nom, car le navigateur forcera sa conversion en minuscules.

2. Bases réactives

data : Lors de l'utilisation de l'API option, l'option data sera utilisée pour déclarer l'état réactif du composant. La valeur de cette option doit être une fonction qui renvoie un objet. Vue appellera cette fonction lors de la création d'une nouvelle instance de composant et enveloppera l'objet renvoyé par la fonction avec le système réactif. Toutes les propriétés de niveau supérieur de cet objet seront associées à l'instance du composant (c'est-à-dire, cela dans les méthodes et les crochets de cycle de vie).

Autrement dit, les données sont une fonction appelée lors de la création d'une instance de Vue. Cette fonction renvoie un objet composé des valeurs à répondre dans le composant réactif. Les propriétés de niveau supérieur de l'objet sont liées à l'instance du composant.

Il existe 2 façons d'écrire des données :

• Type d'objet : données : { }
• Style fonctionnel : data() { return { } }
  Comment choisir : toute méthode d'écriture est acceptable à l'heure actuelle, et en ce qui concerne les composants à l'avenir, les données doivent utiliser des fonctions, sinon une erreur sera signalée.
  Les fonctions gérées par Vue ne doivent pas écrire de fonctions fléchées, sinon ce ne sera plus une instance de Vue.

el :
el a 2 façons d'écrire

• Configurez l'attribut el lors de la création d'un objet d'instance Vue
• Créez d'abord une instance de Vue, puis spécifiez la valeur de el via vm.$mount('#root')

3. Agent de données de modèle MVVM

Modèle MVVM

• M : modèle Modèle, les données dans les données
• V : vue Vue, code de modèle
• VM : modèle de vue ViewModel, instance Vue

Tous les attributs de data apparaissent enfin sur la vm ;
tous les attributs de la vm (c'est-à-dire l'instance Vue) et tous les attributs du prototype Vue peuvent être utilisés directement dans le modèle Vue (gros doubles crochets sur la page).

Proxy de données : opérations de proxy sur les propriétés d'un autre objet via un objet (lecture/écriture)

Objet.defineproperty (à qui ajouter des attributs, nom d'attribut, {élément de configuration})
élément de configuration :

{
    
    
	value:xx,
	enumerbale:true,//是否可枚举，默认false
	writable:true,// 是否可以被修改，默认值是false
    configurable:true// 是否可以被删除，默认值是false
	get(){
    
    }
	//当有人读取对象的该属性时，get函数(getter)就会被调用，且返回值就是该属性的值
	set(value){
    
    }
	//当有人修改对象的该属性时，set函数(setter)就会被调用，且会收到要修改的值
}

Proxy de données dans Vue :

• Le proxy de données dans Vue utilise l'objet vm pour proxy le fonctionnement des propriétés dans l'objet de données (lecture/écriture)
• Les avantages du proxy de données dans Vue : exploitation plus pratique des données dans les données
  Principes de base
• Ajoutez toutes les propriétés de l'objet de données à la machine virtuelle via object.defineProperty()
• Pour chaque attribut ajouté à la vm, spécifiez un gettersetter
• Exploiter (lire/écrire) les attributs correspondants dans les données à l'intérieur du gettersetter

C'est-à-dire que lorsque nous créons une instance de vue, nous transmettons des éléments de configuration, où la fonction de données renvoie un ensemble de données, qui est copié sur l'instance (vm) , puis utilise les données de la fonction de données pour proxy _datale données. Afin de réaliser le piratage de données, implémentez la surveillance des modifications de données et informez Vue de rendre. Il est écrit en Vue2 : lorsqu'une instance de Vue est créée, elle ajoute toutes les propriétés de l'objet de données au système réactif de Vue. Lorsque les valeurs de ces propriétés changent, la vue "répondra", c'est-à-dire que la correspondance sera mise à jour avec les nouvelles valeurs._data_data

Il y a deux façons d'écrire des données, mais est-ce un objet ou une fonction ?

4. Gestion des événements

• Utilisez v-on:xxx ou @xxx pour lier des événements, où xxx est le nom de l'événement
• Le rappel de l'événement doit être configuré dans l'objet méthodes, qui sera éventuellement sur la vm
• Pour les fonctions configurées dans les méthodes, n'utilisez pas les fonctions fléchées, sinon ce ne sera pas vm mais pointez sur window
• Les fonctions configurées dans les méthodes sont toutes des fonctions gérées par Vue, et cela pointe vers l'objet vm ou component instance
• @click="demo" a le même effet que @click="demo($event)", mais ce dernier peut passer des paramètres.

Modificateurs d'événement :

les modificateurs peuvent être utilisés conjointement :@click.prevent.stop=dosome

Evénements clavier :

5. Propriétés calculées

Attribut : les données dans les données, le premier est le nom de l'attribut, et le second est la valeur de l'attribut.
Définition : L'attribut à utiliser n'existe pas et doit être calculé à partir d'attributs existants.
Principe : La couche inférieure utilise le getter et le setter fournis par la méthode Objcet.defineproperty(). Le getter est appelé
lorsque la valeur est lue pour la première fois et lorsque les données dépendantes changent .
Le setter est appelé lorsque la propriété est modifiée.

Avantages : Par rapport à l'implémentation de méthodes, il y a un mécanisme de cache (multiplexage) à l'intérieur, qui est plus efficace et facile à déboguer.

Les valeurs de propriété calculées sont mises en cache en fonction de leurs dépendances réactives. Une propriété calculée n'est recalculée que lorsque ses dépendances réactives sont mises à jour. Sinon, le résultat du calcul précédent est renvoyé immédiatement sans ré-exécuter la fonction getter. Les appels de méthode exécuteront toujours la fonction à nouveau lorsqu'un nouveau rendu se produit.

• Les attributs calculés apparaîtront éventuellement sur la machine virtuelle, il suffit de lire et d'utiliser directement
• Si la propriété calculée doit être modifiée, la fonction set doit être écrite pour répondre à la modification, et le set entraînera la modification des données dont dépend le calcul
• S'il est déterminé que la propriété calculée ne prend pas en compte la modification , vous pouvez utiliser la forme abrégée de la propriété calculée

Grammaire :

computed{
    
    
	计算属性名:
	{
    
    	get(){
    
    },
		set(){
    
    }}
	}

new Vue({
    
    
	el:'#root',
	data:{
    
    
		n:12
	},
	computed: {
    
    
		//完整写法
      fun: {
    
    
      	get(){
    
    
      		return n++;
      	},
     	set(value){
    
    
     		this.n=value
     	}
      // 简写
      fun2() {
    
    
        return this.n++
      }
	}
})

6. Surveiller les propriétés

Les attributs calculés sont calculés directement à partir des attributs existants pour obtenir de "nouveaux attributs", mais si certaines opérations dérivées doivent être effectuées sur des attributs existants, elles ne peuvent pas être complétées.

Une propriété watch est une fonction qui se déclenche chaque fois qu'une propriété réactive change. Déclenchez une fonction pour faire quelque chose lorsqu'une propriété existante pour surveiller les changements.

regarder les propriétés de surveillance

• Lorsque la propriété surveillée change, le gestionnaire de fonction de rappel est automatiquement appelé pour effectuer les opérations associées
• L'attribut surveillé doit exister avant de pouvoir être surveillé, les données ou l'attribut calculé peuvent être surveillés
• L'attribut de l'élément de configuration par défaut est immediate:false, s'il est changé en true, le gestionnaire (newValue,oldValue) sera appelé une fois lors de l'initialisation

Il existe deux façons d'écrire la surveillance

• Passer en veille lors de la création de Vue : {} configuration
• Surveillance via vm.$watch()

  const vm = new Vue({
    
    
    el: '#root',
    data: {
    
    
      isHot: true,
    },
    computed: {
    
    
      info() {
    
    
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
    
    
      changeWeather() {
    
    
        this.isHot = !this.isHot
      }
    },
    // 方式一
    /* watch:{		
			isHot:{
				immediate:true,
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} */
  })
  // 方式二
  vm.$watch('isHot', {
    
    		
    immediate: true, // 初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时
    handler(newValue, oldValue) {
    
    
      console.log('isHot被修改了', newValue, oldValue)
    }
  })

Surveillance multi-niveaux :
utilisez directement des guillemets pour une valeur dans l'objet de surveillance'对象名.属性名'

const vm = new Vue({
    
    
    el: '#root',
    data: {
    
    
      number:{
    
    
		a:1,
		b:2
		}
    },
    watch:{
    
    		
		"number.a":{
    
    
				immediate:true,
				handler(newValue,oldValue){
    
    
				}
			}
		}
  })

Moniteur profond :
la surveillance est peu profonde par défaut : la propriété surveillée ne déclenchera la fonction de rappel que lorsqu'une nouvelle valeur lui sera attribuée, mais le changement de la propriété imbriquée ne se déclenchera pas. Si vous souhaitez écouter toutes les modifications imbriquées, vous avez besoin d'écouteurs profonds.

• La montre dans Vue ne surveille pas le changement de la valeur interne de l'objet par défaut (un calque)
• La configuration dans la montre deep:truepeut surveiller le changement de la valeur interne de l'objet (multicouche)

Avis

• Vue lui-même peut surveiller le changement de la valeur interne de l'objet, mais la montre fournie par Vue ne peut pas par défaut
• Lors de l'utilisation de la surveillance, décider d'utiliser ou non une surveillance approfondie en fonction de la structure spécifique des données de surveillance

Raccourci :
si l'attribut de surveillance n'a pas d'autres éléments de configuration à l'exception du gestionnaire, il peut être raccourci.

 watch: {
    
    
      //简写
      isHot(newValue, oldValue) {
    
    
        console.log('isHot被修改了', newValue, oldValue, this)
      }

Propriétés calculées vs propriétés écoutées

• Les fonctions qui peuvent être complétées par calcul peuvent être complétées par montre

• Les fonctions qui peuvent être complétées par watch peuvent ne pas l'être par calcul. Par exemple, watch peut effectuer des opérations asynchrones.

• Toutes les fonctions gérées par Vue sont mieux écrites comme des fonctions ordinaires, de sorte que le point de ceci est l'objet d'instance de vm ou de composant

• Pour toutes les fonctions non gérées par Vue (fonction de rappel de minuterie, fonction de rappel ajax, etc., fonction de rappel de promesse), il est préférable d'écrire des fonctions fléchées, de sorte que le point de ceci soit l'objet d'instance de vm ou de composant

7. Reliure de classe et de style

Un scénario d'exigence courant pour la liaison de données consiste à manipuler la liste de classes CSS et les styles en ligne d'un élément, à l'aide de v-bind.

• Méthode d'écriture : :class="xxx", où xxx peut être une chaîne, un tableau ou un objet
• :style="[a,b]" où a et b sont des objets de style
• :style="{fontSize: xxx}" où xxx est une valeur dynamique
• La méthode d'écriture de chaîne convient pour : le nom de la classe est incertain et doit être obtenu dynamiquement
• La méthode d'écriture de tableau convient pour : pour lier plusieurs styles, le nombre est incertain et le nom est également incertain
• La méthode d'écriture d'objet convient pour : pour lier plusieurs styles, le nombre est déterminé et le nom est également déterminé, mais il n'est pas sûr de l'utiliser ou non

绑定数组
<div :class="[activeClass, errorClass]"></div>

绑定对象isActive
<div :class="{ active: isActive }"></div>

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" :class="mood" @click="changeMood">{
   
   {name}}</div><br/><br/>

  <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  <div class="basic" :class="classArr">{
   
   {name}}</div><br/><br/>

  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{
   
   {name}}</div><br/><br/>

  <!-- 绑定style样式--对象写法 -->
  <div class="basic" :style="styleObj">{
   
   {name}}</div><br/><br/>

  <!-- 绑定style样式--数组写法 -->
  <div class="basic" :style="styleArr">{
   
   {name}}</div>

8. Rendu conditionnel

v-if Les directives sont utilisées pour restituer conditionnellement un élément de contenu. Ce bloc ne sera rendu que si l'expression de la directive renvoie true. Un v-elseélément doit suivre un élément v-ifou v-else-if , sinon il ne sera pas reconnu.

Vous voulez basculer plus d'un élément : dans ce cas, nous pouvons utiliser v-if sur un élément, qui est juste un élément wrapper invisible, et le résultat rendu final ne contiendra pas cet élément.

v-showAffiche également conditionnellement un élément.

<h1 v-show="ok">Hello!</h1>

v-si 与 v-pour：

• v-if est un rendu conditionnel "true" car il garantit que les écouteurs d'événements et les composants enfants à l'intérieur du bloc conditionnel sont détruits et recréés lorsqu'ils sont basculés.
• v-if est également paresseux : si la condition est évaluée comme fausse au premier rendu, rien ne sera fait. Les blocs conditionnels ne sont rendus que lorsque la condition devient vraie pour la première fois.
• En revanche, v-show est beaucoup plus simple, l'élément sera toujours rendu quelle que soit la condition initiale, et seule la propriété d'affichage CSS sera basculée.
• Dans l'ensemble, v-if a une surcharge de commutation plus élevée, tandis que v-show a une surcharge de rendu initiale plus élevée. Par conséquent, si des commutations fréquentes sont nécessaires, v-show est préférable ; si les conditions de liaison changent rarement au moment de l'exécution, v-if est plus approprié.

9. Rendu de la liste

Utilisez la directive v-for pour afficher une liste basée sur un tableau.

• Utilisé pour afficher les données de la liste
• Syntaxe : <li v-for="(item, index) of items" :key="index">, où la clé peut être un index, mieux vaut l'identifiant unique de l'objet de traversée
• Traversable : tableaux, objets, chaînes (moins utilisés), heures spécifiées (moins utilisées)

"(item, index) of items" :key="index" :
objets traversants : le premier est la valeur de l'attribut, le second est le nom de l'attribut et le troisième est l'index de position ;
parcours du tableau : élément dans les éléments

<li v-for="item in items">
  {
   
   { item.message }}
</li>

  <!-- 遍历数组 -->
  <h3>人员列表（遍历数组）</h3>
  <ul>
    <li v-for="(p,index) of persons" :key="index">{
    
    {
    
     p.name }}-{
    
    {
    
     p.age }}</li>
  </ul>

  <!-- 遍历对象 -->
  <h3>汽车信息（遍历对象）</h3>
  <ul>
    <li v-for="(value,k) of car" :key="k">{
    
    {
    
     k }}-{
    
    {
    
     value }}</li>
  </ul>

  <!-- 遍历字符串 -->
  <h3>测试遍历字符串（用得少）</h3>
  <ul>
    <li v-for="(char,index) of str" :key="index">{
    
    {
    
     char }}-{
    
    {
    
     index }}</li>
  </ul>

  <!-- 遍历指定次数 -->
  <h3>测试遍历指定次数（用得少）</h3>
  <ul>
    <li v-for="(number,index) of 5" :key="index">{
    
    {
    
     index }}-{
    
    {
    
     number }}</li>
  </ul>

v-for peut accepter directement une valeur entière. Dans ce cas d'utilisation, le modèle est répété plusieurs fois sur la base d'une plage de valeurs de 1 à n.

<span v-for="n in 10">{
   
   { n }}</span>

Notez que la valeur initiale de n commence ici à partir de 1 au lieu de 0.

Utilisez v-for sur une balise pour afficher un bloc contenant plusieurs éléments.

Il n'est pas recommandé d'utiliser v-for et v-if en même temps, car il n'y a aucun moyen de distinguer la priorité.

Vous pouvez utiliser v-for directement sur le composant, mais il ne transmettra automatiquement aucune donnée au composant, car le composant a sa propre portée indépendante.

Gestion des clés :
Par défaut, Vue met à jour la liste des éléments rendus par v-for selon la stratégie "in-place update". Lorsque l'ordre des éléments de données change, Vue ne déplace pas l'ordre des éléments DOM en conséquence, mais met à jour chaque élément en place pour s'assurer qu'ils sont rendus à la position d'index spécifiée à l'origine.

Le mode par défaut est efficace, mais convient uniquement aux cas où le résultat de la sortie de rendu de liste ne dépend pas de l'état du composant enfant ou de l'état temporaire du DOM (comme les valeurs d'entrée du formulaire).

Il est donc nécessaire de fournir une clé unique pour le bloc correspondant à chaque élément, afin qu'il puisse suivre l'identité de chaque nœud, réutilisant et réordonnant ainsi les éléments existants.

Gestion de la baie :

Changer de méthode : changer le tableau d'origine

• pousser()
• populaire()
• changement()
• unshift()
• épissure()
• trier()
• inverse()

remplacer tableau : renvoie un nouveau tableau

• filtre()
• concat()
• tranche()

Data monitoring :
Ce lien l'explique très clairement : Vue data monitoring
En termes simples, c'est

1. Transformez l'objet de données en un objet _data : ajoutez des méthodes get et set réactives (proxy de données) pour implémenter le piratage de données et les stocker dans l'instance de Vue ;
2. L'objet d'instance global de Vue proxy l'objet _data pour implémenter des opérations directes sur les attributs dans _data ;
3. Effet de surveillance des changements de données
   Lorsque chaque donnée avec un setter réactif change, le setter réactif sera appelé, et lorsque le setter réactif est appelé, il déclenchera une nouvelle analyse du modèle, générant un nouveau DOM virtuel, comparant l'ancien et le nouveau DOM virtuel , et la mise à jour du mappage de contenu vers le vrai DOM, en restituant cet ensemble de processus.

Attributs ajoutés dynamiquement : méthode Vue.set(targetObject, attributeName, attributeValue) ou this.$set(targetObject, attributeName, attributeValue) pour ajouter dynamiquement des attributs réactifs.

Vue n'ajoute pas de getters et de setters réactifs aux éléments de tableau , de sorte que les modifications apportées aux données de tableau via des indices ne peuvent pas être surveillées par Vue.
Pour les tableaux, ce n'est qu'en appelant les sept API de push, pop, shift, unshift, splice, reverse et sort pour changer le tableau d'origine lui-même que Vue répondra.