VueJS - Reliure

Dans ce chapitre, vous apprendrez à manipuler ou à affecter des valeurs aux attributs HTML, à modifier le style et à affecter des classes à l'aide de la directive de liaison appelée v-bind disponible avec VueJS.

Prenons un exemple pour comprendre pourquoi nous avons besoin et quand utiliser la directive v-bind pour la liaison de données.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         {{title}}<br/>
         <a href = "hreflink" target = "_blank"> Click Me </a> <br/>
         <a href = "{{hreflink}}" target = "_blank">Click Me </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">Click Me </a>   <br/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "DATA BINDING",
               hreflink : "http://www.google.com"
            }
         });
      </script>
   </body>
</html>

Dans l'exemple ci-dessus, nous avons affiché une variable de titre et trois liens d'ancrage. Nous avons également attribué une valeur au href à partir de l'objet de données.

Maintenant, si nous vérifions la sortie dans le navigateur et inspectons, nous verrons que les deux premiers liens d'ancrage n'ont pas le href correctement, comme indiqué dans la capture d'écran suivante.

Le premier clickme montre le href comme hreflink, et le second l'affiche dans {{hreflink}}, tandis que le dernier affiche l'URL correcte selon nos besoins.

Par conséquent, pour attribuer des valeurs aux attributs HTML, nous devons le lier avec la directive v-bind comme suit.

<a v-bind:href = "hreflink" target = "_blank">Click Me </a>

VueJS fournit également un raccourci pour v-bind comme suit.

<a :href = "hreflink" target = "_blank">Click Me </a>

Si nous voyons l'élément inspect dans le navigateur, la balise d'ancrage n'affiche pas l'attribut v-bind, cependant, elle affiche le HTML brut. Aucune des propriétés VueJS n'est visible lorsque nous inspectons le DOM.

Liaison des classes HTML

Pour lier une classe HTML, nous devons utiliser v-bind: class. Prenons un exemple et lions les classes dedans.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : true
            }
         });
      </script>
   </body>
</html>

Il existe un div créé avec v-bind: class = "{active: isactive}".

Ici, isactiveest une variable basée sur vrai ou faux. Il appliquera la classe active au div. Dans l'objet de données, nous avons attribué à la variable isactive la valeur true. Il y a une classe définie dans le style.active avec la couleur de fond en rouge.

Si la variable isactive est vraie, la couleur sera appliquée sinon pas. Voici la sortie dans le navigateur.

Dans l'affichage ci-dessus, nous pouvons voir que la couleur de fond est rouge. La classe = "active" est appliquée au div.

Maintenant, changeons la valeur de la variable en false et voyons la sortie. La variable isactive est remplacée par false comme indiqué dans le code suivant.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : false
            }
         });
      </script>
   </body>
</html>

Dans l'affichage ci-dessus, nous pouvons voir que la classe active n'est pas appliquée au div.

Nous pouvons également attribuer plusieurs classes aux balises HTML à l'aide de l'attribut v-bind.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

Pour le div dans le code ci-dessus, nous avons appliqué une classe normale, exemple class = "info". Basé sur isActive et hasError variable, les autres classes seront appliquées au div.

Production

C'est une classe normale appliquée. Les deux variables sont fausses pour le moment. FaisonsisActive variable à true et voir la sortie.

Dans l'affichage ci-dessus, dans le DOM, nous pouvons voir deux classes affectées au div, info et active. Rendons la variable hasError true et isActive comme false.

Maintenant, lorsque nous voyons dans l'affichage ci-dessus, la classe info et displayError est appliquée au div. C'est ainsi que nous pouvons appliquer plusieurs classes en fonction de conditions.

Nous pouvons également passer la classe en tant que tableau. Prenons un exemple pour comprendre cela.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         });
      </script>
   </body>
</html>

Production

Comme nous pouvons le voir ci-dessus, les deux classes sont appliquées au div. Utilisons une variable et en fonction de la valeur de la variable, affectons la classe.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : true,
               haserror : false
            }
         });
      </script>
   </body>
</html>

Nous avons utilisé deux variables isActive et haserror et la même chose est utilisée pour le div pendant la liaison de classe, comme indiqué dans la balise div suivante.

<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>

Si isActive est vrai, alors l'infoclasse lui sera assignée. Il en va de même pour haserror, si c'est vrai, alors seule errorClass lui sera appliquée.

Maintenant, faisons de la variable haserror la valeur true et la variable isActive la valeur false.

Nous allons maintenant ajouter v-bind pour les classes dans les composants. Dans l'exemple suivant, nous avons ajouté une classe au modèle de composant et également au composant.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component class = "active"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Voici la sortie dans le navigateur. Il applique les deux classes à la div finale.

<div class = ”info active”></div>

Ajoutez une variable dans la section des composants à afficher, basée sur vrai / faux.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component v-bind:class = "{active:isActive}"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Étant donné que la variable est fausse, la classe active n'est pas appliquée et la classe d'informations est appliquée comme indiqué dans la capture d'écran suivante.

Liaison des styles en ligne

Syntaxe d'objet

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               activeColor: 'red',
               fontSize :'30'
            }
         });
      </script>
   </body>
</html>

Output

Dans l'exemple ci-dessus, pour le div, le style est appliqué et les données sont extraites de l'objet de données.

<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
   title : "Inline style Binding",
   activeColor: 'red',
   fontSize :'30'
}

Nous pouvons également faire la même chose en affectant toutes les valeurs à une variable puis en affectant la variable au div.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               styleobj : {
                  color: 'red',
                  fontSize :'40px'
               }
            }
         });
      </script>
   </body>
</html>

La couleur et le fontSize sont affectés à l'objet appelé styleobj et le même est affecté au div.

<div v-bind:style = "styleobj">{{title}}</div>

Output

Liaisons d'entrée de formulaire

Jusqu'à présent, dans l'exemple que nous avons créé, nous avons vu v-model lier l'élément de texte d'entrée et la valeur liée à une variable affectée. Apprenons-en plus dans cette section.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>TEXTBOX</h3>
         <input  v-model = "name" placeholder = "Enter Name" />
         <h3>Name entered is : {{name}}</h3>
         <hr/>
         <h3>Textarea</h3>
         <textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
         <h1><p>{{textmessage}}</p></h1>
         <hr/>
         <h3>Checkbox</h3>
         <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               textmessage:'',
               checked : false
            }
         });
      </script>
   </body>
</html>

Tout ce que nous saisissons dans la texbox est affiché ci-dessous. v-model reçoit le nom de la valeur et le nom est affiché dans {{name}}, qui affiche tout ce qui est tapé dans la zone de texte.

Production

Voyons quelques exemples supplémentaires et comment l'utiliser.

Radio et sélectionnez

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>Radio</h3>
         <input type = "radio" id = "black" value = "Black" v-model = "picked">Black
         <input type = "radio" id = "white" value = "White" v-model = "picked">White
         <h3>Radio element clicked : {{picked}} </h3>
         <hr/>
         <h3>Select</h3>
         <select v-model = "languages">
            <option disabled value = "">Please select one</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
         </select>
         <h3>Languages Selected is : {{ languages }}</h3>
         <hr/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               picked : 'White',
               languages : "Java"
            }
         });
      </script>
   </body>
</html>

Output

Modificateurs

Nous avons utilisé trois modificateurs dans l'exemple: trim, number et paresseux.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
         <br/>
         <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
         <h3>Display Message : {{msg}}</h3>
         <br/>
         <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
         <h3>Display Message : {{message}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               age : 0,
               msg: '',
               message : ''
            }
         });
      </script>
   </body>
</html>

Output

Number modifierpermet de n'entrer que des nombres. Il ne prendra aucune autre entrée que les nombres.

<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">

Lazy modifier affichera le contenu présent dans la zone de texte une fois qu'il est entièrement entré et que l'utilisateur quitte la zone de texte.

<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">

Trim modifier supprimera tous les espaces entrés au début et à la fin.

<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved