1. Abréviation de la liaison en V
<! - Syntaxe complète -> <A V-Bind: href = "url"> </a> <! - Abréviation -> <a: href = "url"> </a> <! - Syntaxe complète -> <Button V-Bind: Disabled - SomeDamicCondition "> Button </ / bouton> <! : Disabled = "SomedynAmicCondition"> Button </fontificateur>
2. Abréviation V-on
<! - Syntaxe complète -> <a v-on: click = "dosomething"> </a> <! - Abréviation -> <a @ click = "Dosomething"> </a>
3. Filtre
{{message | capitaliser}}4. Rendu conditionnel
v-if <h1 v-if = "ok"> oui </h1> <h1 v-else> non </h1> <div v-if = "math.random ()> 0,5"> désolé </v> <div v-else> pas désolé </v> template-v-if <template v-if = "ok"> <h1> title </h1> <p> paragraph 1 </ p> <p> <p> piste> title </h1> <p> paragraph 1 </ p> <p> <p>) 2 </p> </ template> V-show <h1 v-show = "ok"> Bonjour! </h1>
5. Rendu liste pour
v-for <ul id = "example-1"> <li v-for = "item in items"> {{item.message}} </li> </ul> var example1 = new Vue ({el: '# example-1', data: {items: [{message: 'foo'}, {message: 'bar'}]}}); <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' }]}});Détection du changement de tableau
Vue.js enveloppe les méthodes mutées des tableaux observés, afin qu'ils puissent déclencher des mises à jour de la vue. Les méthodes enveloppées sont: push (), pop (), shift (), unshift (), splice (), tri (), reverse ()
example1.items.push ({message: 'baz'}); example1.items = example1.items.filter (fonction (item) {return item.message.match (/ foo /);}); template-v-for <ul> <template v-for = "item in items"> <li> {{item.msg}} </li> <li> </li> </ template> </ul>Objet V-For
<ul id = "repeat-object"> <li v-for = "value in object"> {{$ key}}: {{value}} </li> </ul> new Vue ({el: '# repeat-object', data: {object: {première: 'John', lastName: 'DOE', Âge: 30}}});Plage de valeur en V-for
<div> <span v-for = "n in 10"> {{n}} </span> </div>6. Méthodes et gestionnaires d'événements
Processeur de méthode
<div id = "Example"> <Button V-on: cliquez sur = "saluer"> saluer </ bouton> </div> var vm = new vue ({el: '#example', data: {name: 'vue.js'}, // définir des méthodes dans le `Methods` Object: {` `Grel `Event` est une alerte d'événement DOM native DOM (event.target.tagname)}}}) // Vous pouvez également appeler la méthode vm.greet () dans JavaScript Code; // -> 'Bonjour Vue.js!'Processeur de déclaration en ligne
<div id = "Exemple-2"> <Button V-on: cliquez sur = "Say ('Hi')"> Dites Hi </fitton> <Button V-on: cliquez sur = "Say ('What')"> Dites What </ Button> </div> new Vue ({el: '# Example-2', Methods: {Say: function (msg) {alert (msg)}}});Parfois, il est également nécessaire d'accéder aux événements natifs DOM dans le processeur de déclaration en ligne. Vous pouvez utiliser l'événement Special Variable $ pour le transmettre dans la méthode
<Button V-on: cliquez sur = "Say ('Hello!', $ Event)"> Soumider </ Button> Méthodes: {Say: function (msg, événement) {// Nous pouvons maintenant accéder à l'événement de l'événement natif Event Event.PreventDefault ()}};## Modificateur d'événement
<! - Empêchez l'événement de clic de Bubbled -> <a V-on: click.stop = "dothis"> </a> <! - Soumettre l'événement ne surcharge plus la page -> <formulaire v-on: soumed.prevent = "onSubmit"> </ form> <! - Les modificateurs peuvent être concatenés -> <a V-on: click.stop.prevent = "Dothat"> <! v-on: soumed.prevent> </ form>
## Modificateur de clé
<! - VM.SUBMIT () est appelé uniquement lorsque KeyCode est 13 -> <entrée v-on: keyup.13 = "soumi"> <! - Identique à Ci-dessus -> <entrée v-on: keyup.enter = "soumi"> <! - Abréviation Syntax -> <entrée @ keyup.enter = "soumission">
Tous les principaux alias: Entrez, Tab, Supprimer, ESC, Espace, haut, bas, gauche, droite
## Autres exemples
new Vue ({el: '#demo', data: {newLabel: '', statistiques: statistiques}, méthodes: {add: function (e) {e.PreventDefault () if (! this.newLabel) {return;} this.stats.push ({label: this.NewLabel: 100}); this.newLabel = '; (stat) {if (this.stats.length> 3) {this.stats. $ supprime (stat);7. Transition
Transition CSS
<div v-if = "show" transition = "expand"> bonjour </div> puis ajoutez des règles CSS pour .expand-transition, .expand-enter, et .expand-leave: / * requise * /. Extend-Transition {transition: all .3s facilite; hauteur: 30px; rembourrage: 10px; Color d'arrière-plan: #eee; Overflow: Hidden;} / * .Expand-enter Définissez l'état de début de l'entrée * // * .expand-leave Définissez l'état de départ final * /. rembourrage: 0 10px; Opacité: 0;}Vous pouvez obtenir différentes transitions sur le même élément grâce à la liaison dynamique:
<div v-if = "show": transition = "transitionname"> bonjour </div> new Vue ({el: '...', data: {show: false, transitionname: 'fade'}}De plus, des crochets JavaScript peuvent être fournis:
Vue.transition ('Expand', {avant enquête: fonction (el) {el.textContent = 'avant enter'}, enter: function (el) {el.textContent = 'After'}, aprèsrent: function (el) {el.textcontent = 'afterenter'}, enfère: el) {// handle canellation} el.textContent = 'befreleave'}, Leave: function (el) {el.textContent = 'Leave'}, AfterLeave: function (el) {el.textContent = 'AfterLeave'}, leavecCecelled: function (el) {// Gire Cnappellation}});8. Composants
1. Registre
// définir var myComponent = vue.extend ({modèle: '<div> un composant personnalisé! </div>'}); // Enregistrer vue.component ('my-composant', myComponent); // créer une instance racine new Vue ({el: '#Exampon'}); <div id = "Exemple"> <mycomponent> Vue.component ('my-composant', {template: '<div> un composant personnalisé! </div>'}); // Créer une instance root new vue ({el: '#Example'}); <div id = "example"> <my-composant> </ my-composant> </div>2. Utilisez un accessoire pour passer les données
Exemple 1:
Vue.component ('child', {// Déclare les accessoires: ['msg'], // prop peut être utilisé dans des modèles // vous pouvez utiliser `this.msg` pour définir le modèle: '<span> {{msg}} </span>'}); <enfant msg =" Bonjour! "> </fitExemple 2:
Vue.component ('child', {// camelcase dans javascript accessoires: ['myMessage'], modèle: '<span> {{myMessage}} </span>'}); <! - Kebab-Case in HTML -> <Child My-Message = "Hello!"> </fil>3. accessoires dynamiques
<div> <entrée v-model = "parentmsg"> <br> <child v-bider: my-message = "parentmsg"> </fil> </div>
L'utilisation de la syntaxe d'abréviation de la liaison V est généralement plus simple:
<child: my-message = "parentmsg"> </fil>
4. Type de liaison prorop
L'ensemble est une liaison unidirectionnelle par défaut: lorsque les propriétés du composant parent changent, elle sera transmise au composant enfant, mais l'inverse ne le fera pas. Il s'agit d'empêcher le composant enfant de modifier accidentellement l'état du composant parent - cela rendra le flux de données de l'application difficile à comprendre. Cependant, il est également possible de forcer explicitement la liaison bidirectionnelle ou unique à l'aide du modificateur de liaison .Sync ou .once:
Syntaxe comparative:
<! - La valeur par défaut est une liaison unidirectionnelle -> <child: msg = "parentmsg"> </fil> <! - Bidirectional Binding -> <child: msg.sync = "parentmsg"> </fil> <! - Binding unique -> <child: msg.once = "parentmsg"> </fil> d'autres exemples: <modal: show.sync = "showModal"> <h3 SLOT = "En-tête"> En-tête personnalisé </h3> </odal> </div>
5. Vérification de la propagation
Les composants peuvent spécifier les exigences de vérification des accessoires. Ceci est utile lorsque des composants sont donnés à d'autres, car ces exigences de vérification forment l'API du composant, garantissant que les autres utilisent correctement le composant. À l'heure actuelle, la valeur des accessoires est un objet qui contient des exigences de vérification:
Vue.component ('example', {accesstes: {// Basic Type Detection (`null` signifie que tout type est ok) propa: nombre, // requis et chaîne propb: {type: string, requis: true}, // nombre, avec la valeur par défaut propc: {type: numéro, par défaut: 100}, // la valeur par défaut: un objet: return doit être renvoyé par une fonction à prod: {Type: objet:) {msg: 'Hello'}}}, // Spécifiez cet access {coerce: function (val) {return val + '' // converti la valeur en une chaîne}}, proph: {coerce: function (val) {return JSON.Parse (val) // converti la chaîne JSON en un objet}}}});Autres exemples:
Vue.component ('modal', {template: '# modal-template', accessoires: {show: {type: booléen, obligatoire: true, twoway: true}}});6. Registre
// définir var myComponent = vue.extend ({modèle: '<div> un composant personnalisé! </div>'}); // enregistre Vue.component ('my-composant', myComponent); // Créer une instance root new vue ({el: '#exampon'}); <div id = "exampon"> <mycomponent>Ou écrivez-le directement:
Vue.component ('my-composant', {template: '<div> un composant personnalisé! </div>'}); // Créer une instance root new vue ({el: '#Example'}); <div id = "example"> <my-composant> </ my-composant> </div>7. Utiliser Prop pour passer les données
Exemple 1:
Vue.component ('child', {// Déclare les accessoires: ['msg'], // prop peut être utilisé dans des modèles // vous pouvez utiliser `this.msg` pour définir le modèle: '<span> {{msg}} </span>'}); <enfant msg =" Bonjour! "> </fitExemple 2:
Vue.component ('child', {// camelcase dans javascript accessoires: ['myMessage'], modèle: '<span> {{myMessage}} </span>'}); <! - Kebab-Case in HTML -> <Child My-Message = "Hello!"> </fil>8. accessoires dynamiques
<div> <entrée v-model = "parentmsg"> <br> <child v-bider: my-message = "parentmsg"> </fil> </div>
L'utilisation de la syntaxe d'abréviation de la liaison V est généralement plus simple:
<child: my-message = "parentmsg"> </fil>
9. type de liaison prorop
L'ensemble est une liaison unidirectionnelle par défaut: lorsque les propriétés du composant parent changent, elle sera transmise au composant enfant, mais l'inverse ne le fera pas. Il s'agit d'empêcher le composant enfant de modifier accidentellement l'état du composant parent - cela rendra le flux de données de l'application difficile à comprendre. Cependant, il est également possible de forcer explicitement la liaison bidirectionnelle ou unique à l'aide du modificateur de liaison .Sync ou .once:
Syntaxe comparative:
<! - La par défaut est une liaison à sens unique -> <child: msg = "parentmsg"> </fil> <! - Bidirectional Binding -> <child: msg.sync = "parentmsg"> </fffred> <! - Binding unique -> <fffred: msg.once = "parentm
Autres exemples:
<modal: show.sync = "showmodal"> <h3 slot = "header"> En-tête personnalisé </h3> </odal> </div>
10.
Les composants peuvent spécifier les exigences de vérification des accessoires. Ceci est utile lorsque des composants sont donnés à d'autres, car ces exigences de vérification forment l'API du composant, garantissant que les autres utilisent correctement le composant. À l'heure actuelle, la valeur des accessoires est un objet qui contient des exigences de vérification:
Vue.component ('example', {accesstes: {// Basic Type Detection (`null` signifie que tout type est ok) propa: nombre, // requis et chaîne propb: {type: string, requis: true}, // nombre, avec la valeur par défaut propc: {type: numéro, par défaut: 100}, // la valeur par défaut: un objet: return doit être renvoyé par une fonction à prod: {Type: objet:) {msg: 'Hello'}}}, // Spécifiez cet access {coerce: function (val) {return val + '' // converti la valeur en une chaîne}}, proph: {coerce: function (val) {return JSON.Parse (val) // converti la chaîne JSON en un objet}}}});Autres exemples:
Vue.component ('modal', {template: '# modal-template', accessoires: {show: {type: booléen, obligatoire: true, twoway: true}}});11. Utilisez des emplacements pour distribuer du contenu
L'élément <slot> est utilisé comme un emplacement de distribution de contenu dans le modèle de composant. Cet élément lui-même sera remplacé.
Une fente avec l'attribut de nom est appelée un emplacement nommé. Le contenu avec l'attribut de l'emplacement sera distribué à des emplacements nommés avec des noms correspondants.
Par exemple, supposons que nous ayons un composant multi-insertion avec un modèle comme:
<div> <slot name = "One"> </slot> <slot> </slot> <slot name = "Two"> </slot> </div>
Modèle de composant parent:
<multi-insertion> <p slot = "one"> un </p> <p slot = "deux"> deux </p> <p> par défaut a </p> </ multi-insertion>
Le résultat de rendu est:
<div> <p slot = "one"> un </p> <p> par défaut a </p> <p slot = "deux"> deux </p> </div>