VueJS - Componenti

Vue Components sono una delle caratteristiche importanti di VueJS che crea elementi personalizzati, che possono essere riutilizzati in HTML.

Lavoriamo con un esempio e creiamo un componente, che fornirà una migliore comprensione del funzionamento dei componenti con VueJS.

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

Nel file .html, abbiamo creato due div con id component_test e component_test1. Nel.jsfile mostrati sopra, vengono create due istanze Vue con gli id div. Abbiamo creato un componente comune da utilizzare con entrambe le istanze di visualizzazione.

Per creare un componente, la seguente è la sintassi.

Vue.component('nameofthecomponent',{ // options});

Una volta creato un componente, il nome del componente diventa l'elemento personalizzato e lo stesso può essere utilizzato nell'elemento dell'istanza Vue creato, cioè all'interno del div con id component_test e component_test1.

Nel .js file, abbiamo utilizzato un componente di test come nome del componente e lo stesso nome viene utilizzato come elemento personalizzato all'interno dei div.

Esempio

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

Nel componente creato in .jsfile, abbiamo aggiunto un template a cui abbiamo assegnato un codice HTML. Questo è un modo diregistering a global component, che può essere parte di qualsiasi istanza di vue come mostrato nello script seguente.

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

All'esecuzione, lo stesso si rifletterà nel browser.

Ai componenti viene assegnato il tag dell'elemento personalizzato, ad es <testcomponent></testcomponent>. Tuttavia, quando ispezioniamo lo stesso nel browser, non noteremo il tag personalizzato in HTML semplice presente nel modello come mostrato nello screenshot seguente.

Abbiamo anche reso direttamente i componenti una parte dell'istanza di vue, come mostrato nello script seguente.

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

Questo è chiamato local registration e i componenti faranno parte solo dell'istanza vue creata.

Finora abbiamo visto il componente di base con le opzioni di base. Ora, aggiungiamo altre opzioni come dati e metodi ad esso. Proprio come l'istanza Vue ha dati e metodi, anche il componente condivide gli stessi. Quindi, estenderemo il codice, che abbiamo già visto con dati e metodi.

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

Nel .jsfile sopra, abbiamo aggiunto dati che sono una funzione, che restituisce un oggetto. L'oggetto ha una proprietà name, a cui viene assegnato il valore "Ria". Viene utilizzato nel seguente modello.

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

Nonostante i dati come funzione nei componenti, possiamo usare le sue proprietà nello stesso modo in cui usiamo con l'istanza diretta di Vue. Inoltre, sono stati aggiunti due metodi, changename e originalname. In changename, stiamo cambiando la proprietà name, e in originalname la stiamo resettando al nome originale.

Abbiamo anche aggiunto due eventi sul div, mouseover e mouseout. I dettagli degli eventi saranno discussi nel capitolo Eventi. Quindi per ora, chiamate al passaggio del mousechangename chiamate al metodo e al mouseout originalname metodo.

La visualizzazione degli stessi è mostrata nel seguente browser.

Come si vede nel browser sopra, mostra il nome assegnato nella proprietà data, che è lo stesso nome. Abbiamo anche assegnato un evento mouseover sul div e anche un mouseout. Vediamo cosa succede quando si passa il mouse e si esce dal mouse.

Al passaggio del mouse, vediamo che il nome del primo componente è cambiato in Ben, tuttavia, il secondo rimane così com'è. Questo perché il componente dati è una funzione e restituisce un oggetto. Pertanto, quando viene modificato in un punto, lo stesso non viene sovrascritto in altri casi.

Componenti dinamici

I componenti dinamici vengono creati utilizzando la parola chiave <component></component> ed è associato utilizzando una proprietà come mostrato nell'esempio seguente.

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Produzione

Il componente dinamico viene creato utilizzando la seguente sintassi.

<component v-bind:is = "view"></component>

Ha v-bind: is = "view", e ad esso è assegnata una vista valore. La vista è definita nell'istanza di Vue come segue.

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});

Quando viene eseguito, il modello Dynamic Component viene visualizzato nel browser.