VueJS - Örnekler

VueJS ile başlamak için, Vue örneğini oluşturmamız gerekiyor. root Vue Instance.

Sözdizimi

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

Vue kurucusunun parçası olması gerekenleri anlamak için bir örneğe bakalım.

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

Vue için adında bir parametre var el. DOM öğesinin kimliğini alır. Yukarıdaki örnekte, kimliğimiz var#vue_det. Bu, .html'de bulunan div öğesinin kimliğidir.

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

Şimdi, yapacağımız her şey div öğesini etkileyecek ve dışındaki hiçbir şey olmayacaktır.

Sonra, veri nesnesini tanımladık. Adı, soyadı ve adresi değerine sahiptir.

Aynısı div içinde atanır. Örneğin,

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

Ad: {{firstname}} değeri, enterpolasyon içinde değiştirilecektir, yani {{}} veri nesnesinde atanan değerle, yani Ria ile değiştirilecektir. Aynı şey soyadı için de geçerli.

Daha sonra, bir fonksiyon mydetails ve dönen bir değer tanımladığımız yöntemlerimiz var. Div içinde şu şekilde atanır:

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

Bu nedenle, {{}} içinde mydetails işlevi çağrılır. Vue örneğinde döndürülen değer, {{}} içinde yazdırılacaktır. Referans için çıkışı kontrol edin.

Çıktı

Şimdi, Vue yapıcısına temel olarak veri, şablon, monte edilecek öğe, yöntemler, geri aramalar vb. Seçenekler iletmemiz gerekiyor.

Vue'ya iletilecek seçeneklere bir göz atalım.

#data- Bu tür veriler bir nesne veya işlev olabilir. Vue, özelliklerini reaktif hale getirmek için alıcılara / ayarlayıcılara dönüştürür.

Seçeneklerde verilerin nasıl aktarıldığına bir göz atalım.

Misal

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

Çıktı

console.log(vm.fname); // Raj yazdırır

console.log(vm.$data); tam nesneyi yukarıda gösterildiği gibi yazdırır

console.log(vm.$data.fname); // Raj yazdırır

Bir bileşen varsa, veri nesnesine aşağıdaki kodda gösterildiği gibi bir işlevden başvurulmalıdır.

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

Bir bileşen durumunda, veriler yukarıda gösterildiği gibi Vue.extend ile kullanılan bir işlevdir. Veriler bir işlevdir. Örneğin,

data: function () {
   return _obj
}

Bileşendeki verilere başvurmak için bunun bir örneğini oluşturmamız gerekir. Örneğin,

var myComponentInstance = new Component();

Ayrıntıları verilerden almak için yukarıdaki ana bileşende yaptığımızın aynısını yapmamız gerekir. Örneğin.

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

Tarayıcıda görüntülenen ayrıntılar aşağıdadır.

Props- Props için tür bir dizi veya nesne dizisidir. Dizi tabanlı veya nesne tabanlı bir sözdizimi alır. Ana bileşenden gelen verileri kabul etmek için kullanılan öznitelikler oldukları söylenir.

örnek 1

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

Örnek 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 - Bu, birim testi için kullanılır.

Type- dizi dizisi. Örneğin, {[key: string]: any}. Vue örneğinin oluşturulması sırasında geçilmesi gerekir.

Misal

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

Computed- Tür: {[key: string]: İşlev | {get: Function, set: Function}}

Misal

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

Hesaplanan iki işleve sahiptir aSum ve aSquare.

ASum işlevi yalnızca döndürür this.a+2. ASquare işlevi yine iki işlevget ve set.

Değişken vm bir Vue örneğidir ve aSquare ve aSum'u çağırır. Ayrıca vm.aSquare = 3, aSquare'den set işlevini çağırır ve vm.aSquare get işlevini çağırır. Aşağıdaki ekran görüntüsüne benzeyen tarayıcıda çıktıyı kontrol edebiliriz.

Methods- Yöntemler, aşağıdaki kodda gösterildiği gibi Vue örneğine dahil edilecektir. İşleve Vue nesnesini kullanarak erişebiliriz.

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

Yöntemler, Vue yapıcısının bir parçasıdır. Vue nesnesini kullanarak yönteme bir çağrı yapalımvm.asquare ()mülkün değeri a güncellendi asquareişlevi. A'nın değeri 1'den 25'e değiştirilir ve aynısı aşağıdaki tarayıcı konsolunda da görülür.