VueJS - Istanze

Per iniziare con VueJS, dobbiamo creare l'istanza di Vue, che si chiama root Vue Instance.

Sintassi

var app = new Vue({
   // options
})

Vediamo un esempio per capire cosa deve essere parte del costruttore Vue.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <h1>{{mydetails()}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_instance.js"></script>
   </body>
</html>

vue_instance.js

var  vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      address    : "Mumbai"
   },
   methods: {
      mydetails : function() {
         return "I am "+this.firstname +" "+ this.lastname;
      }
   }
})

Per Vue, c'è un parametro chiamato el. Prende l'id dell'elemento DOM. Nell'esempio sopra, abbiamo l'id#vue_det. È l'id dell'elemento div, che è presente in .html.

<div id = "vue_det"></div>

Ora, qualunque cosa faremo influenzerà l'elemento div e nulla al di fuori di esso.

Successivamente, abbiamo definito l'oggetto dati. Ha valore firstname, lastname e address.

Lo stesso viene assegnato all'interno del div. Per esempio,

<div id = "vue_det">
   <h1>Firstname : {{firstname}}</h1>
   <h1>Lastname : {{lastname}}</h1>
</div>

Il valore Firstname: {{firstname}} verrà sostituito all'interno dell'interpolazione, cioè {{}} con il valore assegnato nell'oggetto dati, cioè Ria. Lo stesso vale per il cognome.

Successivamente, abbiamo metodi in cui abbiamo definito una funzione mydetails e un valore restituito. Viene assegnato all'interno del div come

<h1>{{mydetails()}}</h1>

Quindi, all'interno di {{}} viene chiamata la funzione mydetails. Il valore restituito nell'istanza di Vue verrà stampato all'interno di {{}}. Controllare l'output per riferimento.

Produzione

Ora, dobbiamo passare le opzioni al costruttore Vue che sono principalmente dati, modello, elemento su cui montare, metodi, callback, ecc.

Diamo uno sguardo alle opzioni da passare a Vue.

#data- Questo tipo di dati può essere un oggetto o una funzione. Vue converte le sue proprietà in getter / setter per renderlo reattivo.

Diamo un'occhiata a come vengono passati i dati nelle opzioni.

Esempio

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { fname: "Raj", lname: "Singh"}
         
         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.fname);
         console.log(vm.$data);
         console.log(vm.$data.fname);
      </script>
   </body>
</html>

Produzione

console.log(vm.fname); // stampa Raj

console.log(vm.$data); stampa l'intero oggetto come mostrato sopra

console.log(vm.$data.fname); // stampa Raj

Se è presente un componente, è necessario fare riferimento all'oggetto dati da una funzione come mostrato nel codice seguente.

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { fname: "Raj", lname: "Singh"};
         
         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.fname);
         console.log(vm.$data);
         console.log(vm.$data.fname);
         
         // must use function when in Vue.extend()
         var Component = Vue.extend({
            data: function () {
               return _obj
            }
         });
         var myComponentInstance = new Component();
         console.log(myComponentInstance.lname);
         console.log(myComponentInstance.$data);
      </script>
   </body>
</html>

Nel caso di un componente, i dati sono una funzione, che viene utilizzata con Vue.extend come mostrato sopra. I dati sono una funzione. Per esempio,

data: function () {
   return _obj
}

Per fare riferimento ai dati del componente, è necessario crearne un'istanza. Per esempio,

var myComponentInstance = new Component();

Per recuperare i dettagli dai dati, dobbiamo fare la stessa cosa che abbiamo fatto con il componente principale sopra. Per esempio.

console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);

Di seguito sono riportati i dettagli visualizzati nel browser.

Props- Il tipo di oggetti di scena è un array di stringhe o oggetti. Richiede una sintassi basata su array o su oggetti. Si dice che siano attributi utilizzati per accettare dati dal componente genitore.

Esempio 1

Vue.component('props-demo-simple', {
   props: ['size', 'myMessage']
})

Esempio 2

Vue.component('props-demo-advanced', {
   props: {
      // just type check
      height: Number,
      
      // type check plus other validations
      age: {
         type: Number,
         default: 0,
         required: true,
         validator: function (value) {
            return value >= 0
         }
      }
   }
})

propsData - Viene utilizzato per i test unitari.

Type- array di stringhe. Ad esempio, {[key: string]: any}. Deve essere passato durante la creazione dell'istanza di Vue.

Esempio

var Comp = Vue.extend({
   props: ['msg'],
   template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
   propsData: {
      msg: 'hello'
   }
})

Computed- Tipo: {[key: string]: Function | {get: Function, set: Function}}

Esempio

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 2 },
            computed: {
            
               // get only, just need a function
               aSum: function () {
                  return this.a + 2;
               },
               
               // both get and set
               aSquare: {
                  get: function () {
                     return this.a*this.a;
                  },
                  set: function (v) {
                     this.a = v*2;
                  }
               }
            }
         })
         console.log(vm.aSquare);  // -> 4
         vm.aSquare = 3;
         console.log(vm.a);       // -> 6
         console.log(vm.aSum); // -> 8
      </script>
   </body>
</html>

Calcolato ha due funzioni aSum e aSquare.

La funzione aSum restituisce solo this.a+2. Funzione aSquare ancora due funzioniget e set.

La variabile vm è un'istanza di Vue e chiama aSquare e aSum. Anche vm.aSquare = 3 chiama la funzione set da aSquare e vm.aSquare chiama la funzione get. Possiamo controllare l'output nel browser che assomiglia allo screenshot seguente.

Methods- I metodi devono essere inclusi con l'istanza di Vue come mostrato nel codice seguente. Possiamo accedere alla funzione utilizzando l'oggetto Vue.

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 5 },
            methods: {
               asquare: function () {
                  this.a *= this.a;
               }
            }
         })
         vm.asquare();
         console.log(vm.a); // 25
      </script>
   </body>
</html>

I metodi fanno parte del costruttore Vue. Facciamo una chiamata al metodo utilizzando l'oggetto Vuevm.asquare (), Il valore della proprietà a è aggiornato nel asquarefunzione. Il valore di a viene modificato da 1 a 25 e lo stesso si vede riflesso nella seguente console del browser.