notes d'étude de vue (2)--vue introduction

Cet article partage avec vous une partie de l'introduction à Vue. Les amis intéressés peuvent y jeter un œil

Cette étude provient principalement des tutoriels du site officiel https://cn.vuejs.org/ v2/ guide

Une instance Vue

L'application Vue démarre avec une instance racine de Vue. Vue liera les données aux données Lorsque les données changent, cela entraînera également un changement de vue [mode observateur], ce qui peut réaliser une liaison bidirectionnelle des données [réactivité]. Les attributs dans l'instance vue peuvent être obtenus via $+attribute name. Entrez $data

vue lie les données lors de l'initialisation. Si des éléments sont à nouveau ajoutés après l'initialisation, la vue ne changera pas.

Deuxième cycle de vie de Vue

Le processus d'initialisation de l'instance Vue comprend une série de processus, qui incluent la configuration de la surveillance des données, la compilation de modèles, le montage de l'instance sur le DOM et la mise à jour du DOM lorsque le les données sont mises à jour. Il y aura certaines fonctions de hook de cycle de vie dans ce processus, et vous pouvez ajouter votre propre code dans ce processus pour implémenter diverses fonctions.
Le diagramme du cycle de vie de Vue est le suivant :

Les trois modèles Vue

Les modèles Vue sont tous du HTML légal, basé sur sur la syntaxe HTML de. Vue rendra le modèle dans un DOM virtuel.
Vue peut implémenter le rendu DOM via la fonction de rendu via la syntaxe JSX.
Vue utilise {{}} pour l'interpolation, c'est-à-dire des espaces réservés. Semblable à Freemaker. {{}} insère une chaîne de texte Si vous utilisez v-html, le code html réel sera inséré [cela provoquera du xss, à utiliser avec prudence].
Commandes courantes Vue :

• v-bind : peut lier des attributs HTML, qui peuvent être abrégés en : xx

• v-on : Les événements de liaison peuvent être abrégés en @xxxx

• v-model : données de liaison bidirectionnelle

• v-if : déclaration de jugement, v - if doit être utilisé avec des éléments. S'il y a plusieurs éléments, vous pouvez utiliser