VueJS - Instanzen

Um mit VueJS zu beginnen, müssen wir die Instanz von Vue erstellen, die als root Vue Instance.

Syntax

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

Schauen wir uns ein Beispiel an, um zu verstehen, was Teil des Vue-Konstruktors sein muss.

<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;
      }
   }
})

Für Vue gibt es einen Parameter namens el. Es wird die ID des DOM-Elements verwendet. Im obigen Beispiel haben wir die ID#vue_det. Es ist die ID des div-Elements, die in .html vorhanden ist.

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

Was auch immer wir jetzt tun werden, wird das div-Element und nichts außerhalb davon beeinflussen.

Als nächstes haben wir das Datenobjekt definiert. Es hat den Wert Vorname, Nachname und Adresse.

Das gleiche wird innerhalb der div zugewiesen. Zum Beispiel,

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

Der Wert Vorname: {{Vorname}} wird innerhalb der Interpolation ersetzt, dh {{}} durch den im Datenobjekt zugewiesenen Wert, dh Ria. Gleiches gilt für den Nachnamen.

Als nächstes haben wir Methoden, bei denen wir eine Funktion mydetails und einen Rückgabewert definiert haben. Es wird innerhalb der div als zugewiesen

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

Daher wird in {{}} die Funktion mydetails aufgerufen. Der in der Vue-Instanz zurückgegebene Wert wird in {{}} gedruckt. Überprüfen Sie die Ausgabe als Referenz.

Ausgabe

Jetzt müssen wir Optionen an den Vue-Konstruktor übergeben, bei denen es sich hauptsächlich um Daten, Vorlagen, Elemente zum Mounten, Methoden, Rückrufe usw. handelt.

Werfen wir einen Blick auf die Optionen, die an den Vue übergeben werden sollen.

#data- Diese Art von Daten kann ein Objekt oder eine Funktion sein. Vue wandelt seine Eigenschaften in Getter / Setter um, um es reaktiv zu machen.

Lassen Sie uns einen Blick darauf werfen, wie die Daten in den Optionen übergeben werden.

Beispiel

<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>

Ausgabe

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

console.log(vm.$data); druckt das vollständige Objekt wie oben gezeigt

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

Wenn es eine Komponente gibt, muss das Datenobjekt von einer Funktion referenziert werden, wie im folgenden Code gezeigt.

<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>

Im Falle einer Komponente sind die Daten eine Funktion, die mit Vue.extend wie oben gezeigt verwendet wird. Die Daten sind eine Funktion. Zum Beispiel,

data: function () {
   return _obj
}

Um auf die Daten aus der Komponente zu verweisen, müssen wir eine Instanz davon erstellen. Zum Beispiel,

var myComponentInstance = new Component();

Um die Details aus den Daten abzurufen, müssen wir dasselbe tun wie mit der übergeordneten Komponente oben. Zum Beispiel.

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

Im Folgenden werden die Details angezeigt, die im Browser angezeigt werden.

Props- Typ für Requisiten ist ein Array von Zeichenfolgen oder Objekten. Es wird eine Array-basierte oder objektbasierte Syntax verwendet. Sie sollen Attribute sein, mit denen Daten von der übergeordneten Komponente akzeptiert werden.

Beispiel 1

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

Beispiel 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 - Dies wird für Unit-Tests verwendet.

Type- Array von Zeichenfolgen. Zum Beispiel {[key: string]: any}. Es muss während der Erstellung der Vue-Instanz übergeben werden.

Beispiel

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

Computed- Typ: {[Schlüssel: Zeichenfolge]: Funktion | {get: Function, set: Function}}

Beispiel

<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>

Berechnet hat zwei Funktionen aSum und aSquare.

Die Funktion aSum kehrt gerade zurück this.a+2. Funktion aSquare erneut zwei Funktionenget und set.

Die Variable vm ist eine Instanz von Vue und ruft aSquare und aSum auf. Auch vm.aSquare = 3 ruft die set-Funktion von aSquare auf und vm.aSquare ruft die get-Funktion auf. Wir können die Ausgabe im Browser überprüfen, der wie im folgenden Screenshot aussieht.

Methods- Der Vue-Instanz sind Methoden beizufügen, wie im folgenden Code gezeigt. Wir können über das Vue-Objekt auf die Funktion zugreifen.

<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>

Methoden sind Teil des Vue-Konstruktors. Rufen wir die Methode mit dem Vue-Objekt aufvm.asquare (), der Wert der Eigenschaft a wird in der aktualisiert asquareFunktion. Der Wert von a wird von 1 auf 25 geändert, und dies wird in der folgenden Browserkonsole angezeigt.