Que sont les composants?
Le composant est l'une des caractéristiques les plus puissantes de Vue.js. Les composants peuvent étendre les éléments HTML et encapsuler le code réutilisable. À un niveau supérieur, les composants sont des éléments personnalisés et le compilateur de Vue.js y ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également être sous la forme d'éléments HTML natifs, étendus avec la caractéristique IS.
Ensuite, je vous présenterai la connaissance de base des fonctions de liaison unidirectionnelle, de liaison bidirectionnelle, de rendu et de réponse. Les détails spécifiques sont les suivants:
(I) Liaison à sens unique
<div id = "app"> {{message}} </div> <cript> new Vue ({el: '#App', data: {message: 'Hello Vue.js!'}}) </ script>①E devrait signifier la liaison, ID de liaison = balise d'application
Il peut également être changé pour ce qui suit:
<div> {{message}} </div>el: '.app',
Tout aussi efficace.
Mais s'il y a plusieurs, cela ne fonctionnera que pour le premier:
<div> {{message}} </div> <div> {{message}} </div> Bonjour Vue.js! {{message}}②La variable de message dans les données représente la valeur de {{message}
(2) Liaison bidirectionnelle
<div id = "app"> {{message}} <br/> <entrée v-model = "message" /> </div> <cript> new Vue ({el: '#App', data: {message: 'bonjour vue.js!'}}) </ script>L'effet est:
①La valeur initiale est dans la zone d'entrée d'entrée et la valeur est la valeur de l'attribut de message dans les données;
② La modification de la valeur de la zone d'entrée peut affecter la valeur extérieure;
(Iii) la valeur de retour de la fonction
<div id = "app"> {{message ()}} <br/> <entrée v-model = "message ()" /> </div> <cript> new vue ({el: '#app', data: {message: function () {return 'hello vue.js!';}}}}) </script>Effet:
① La valeur de sortie est également la valeur de retour du message;
② Inconvénients: perdre la liaison bidirectionnelle!
(Iv) Liste de rendu
<div id = "app"> <ul> <li v-for = "list in todos"> {{list.text}} </li> </ul> </div> <cript> new vue ({el: '#app', data: {todos: [{text: "1st"}, {text: "2nd"}, {text: "3rd"}}) </ scriptLa liste en V-For est similaire à la i in For
Personnellement,
① Liste dans Todos peut être comprise comme pour la liste dans Todos
② Comprenez ensuite la liste.
Ensuite, où est cette balise V-For, elle y est copiée plusieurs fois.
(V) traiter la saisie de l'utilisateur
<div id = "app"> <entrée v-model = "message"> <input type = "bouton" value = "value +1" v-on: click = "add" /> <input type = "bouton" value = "value-1" v-on: click = "moins" /> <entrée type = "bouton" value = "réset" /> v-on: cliquet ". Message: 1}, Méthodes: {Add: Function () {this.Message ++;Effet:
① Pour la valeur de la zone d'entrée, cliquez une fois sur le bouton Ajouter et la valeur sera +1;
② Si cela ne peut pas être ajouté, le résultat sera renvoyé comme si l'expression normale est ajoutée de manière incorrecte, comme NAN;
③ La valeur du message dans les données est la valeur initiale;
④Les méthodes sont des collections de fonctions, séparées par des virgules;
⑤ Lors de l'obtention de la valeur, ajoutez ceci, par exemple, ce.Message obtient la valeur du message.
(Vi) multifonctionnel
<div id = "app"> <entrée v-model = "val" v-on: keypress.enter = "addtolist"> <ul> <li v-for = "val in value"> {{val.val}} <entrée type = "Button" value = "Delete" v-on: click = "removeList ($ index)" /> </li> </ul> '#App', données: {val: "1", valeurs: []}, méthodes: {addtolist: function () {var val = parseInt (this.val.trim ()); String (Val + 1);}, RemoveList: fonction (index) {this.values.splice (index, 1);Effet:
① La valeur dans la boîte d'entrée initiale est 1;
② Appuyez sur Entrée dans la zone d'entrée pour convertir le contenu de la zone d'entrée en un nombre et ajoutez-le à une liste. Le numéro converti et un bouton de suppression de la liste, et la valeur dans la zone d'entrée sera modifiée en valeur convertie en un nombre et en ajouté une.
Comme indiqué dans l'image:
③ Son ajout utilise la liaison bidirectionnelle, poussez la valeur d'entrée vers le tableau de valeurs dans les données, puis utilise l'effet de la liste de rendu pour produire plusieurs lignes de valeurs.
④ Dans la balise de bouton, le nom du paramètre de la fonction reçoit un paramètre, qui est l'index de la ligne, et le nom du paramètre est $ index
⑤ Dans la balise, le nom de fonction de la fonction déclenchée peut être ajouté avec des supports ou sans supports. La mesure réelle ne semble avoir aucun effet.
(7) Tags et résumé de l'API (1)
① {{nom de variable}}
Représente la variable liée, ceci. Le nom de variable est requis lors de l'appel
② Variable V-model = "
Utilisez la liaison bidirectionnelle. Si aucun type n'est ajouté à l'entrée, c'est du texte. Si le type est ajouté, c'est le type, par exemple:
<entrée v-model = "date" type = "date" /> <li> {{date}} </li>La valeur de la boîte d'entrée de type date sera liée avec le contenu affiché par la balise Li.
③ v-on: cliquez = ”Nom de la fonction"
Cette fonction est déclenchée lors du clic, soit () peut être ajoutée ou non. $ index est utilisé comme paramètre pour représenter l'index, et la valeur d'index commence à partir de 0.
④ V-for
Une fois le contenu du tableau mis à jour, la limite bidirectionnelle sera mise à jour en temps réel, tout comme le modèle V;
Semblable à l'instruction FOR IN, il est utilisé plusieurs fois
⑤ V-on: événement
Autrement dit, l'événement déclenché, il y a un clic (cliquez), une pression de touche (cliquez)
Les événements peuvent être suivis de choses plus spécifiques, telles que Keypress.Entter est le retour en voiture, Keypress.Space est l'espace, etc.
Plus besoin de voir
⑥ Nouveau Vue
Par une nouvelle instance de Vue, puis transmettez un objet en tant que paramètre à cette instance;
dans:
el signifie le modèle lié (il ne correspondra que la première limite)
Les données représentent des données, qui peuvent être utilisées directement, par exemple dans V-model ou {{nom de variable}}
méthodes
⑦ Variables d'appel à l'intérieur de la fonction
Par ce nom variable, par exemple:
data: {val: "1", valeurs: []}, méthodes: {addtolist: function () {console.log (this.val);Ce.val ici est le data.val ci-dessus, qui est également le {{val}} en html, et est aussi V-model = "val", mais ce n'est pas
<li v-for = "Val in Values"> {{Val.val}} <input type = "Button" value = "Delete" v-on: cliquez = "reposlist ($ index)" /> </li>Quant à la raison, je pense personnellement que le Val ici est dans le cadre du V-FOR, donc le Val dans Val dans les valeurs a une priorité plus élevée dans la chaîne de portée.
Ce qui précède est une explication détaillée du premier tutoriel d'introduction de VueJS présenté par l'éditeur (liaison unidirectionnelle, liaison bidirectionnelle, rendu de liste, fonction de réponse). J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!