VueJS - Hızlı Kılavuz

VueJSetkileşimli web arayüzleri geliştirmek için kullanılan açık kaynaklı bir aşamalı JavaScript çerçevesidir. Web geliştirmeyi basitleştirmek için kullanılan ünlü çerçevelerden biridir. VueJS, görünüm katmanına odaklanır. Herhangi bir sorun olmadan ön uç geliştirme için büyük projelere kolayca entegre edilebilir.

VueJS kurulumuna başlamak çok kolaydır. Herhangi bir geliştirici, etkileşimli web arayüzlerini zaman içinde kolayca anlayabilir ve oluşturabilir. VueJS, Google'ın eski bir çalışanı olan Evan You tarafından oluşturulmuştur. VueJS'nin ilk sürümü Şubat 2014'te yayınlandı. Kısa süre önce GitHub'da 64.828 yıldıza ulaştı ve bu onu çok popüler hale getirdi.

Özellikleri

Aşağıda VueJS ile kullanılabilen özellikler bulunmaktadır.

Sanal DOM

VueJS, React, Ember vb. Gibi diğer çerçeveler tarafından da kullanılan sanal DOM'u kullanır. Değişiklikler DOM'a yapılmaz, bunun yerine JavaScript veri yapıları biçiminde bulunan DOM'un bir kopyası oluşturulur . Herhangi bir değişiklik yapılacağı zaman, JavaScript veri yapılarında yapılır ve ikincisi, orijinal veri yapısıyla karşılaştırılır. Son değişiklikler daha sonra kullanıcının değiştiğini göreceği gerçek DOM'a güncellenir. Bu optimizasyon açısından iyidir, daha ucuzdur ve değişiklikler daha hızlı yapılabilir.

Bağlanma verileri

Veri bağlama özelliği, HTML niteliklerine değer atamaya veya değiştirmeye, stili değiştirmeye, adı verilen bağlama yönergesi yardımıyla sınıf atamaya yardımcı olur. v-bind VueJS ile mevcuttur.

Bileşenler

Bileşenler, VueJS'in HTML'de yeniden kullanılabilen özel öğeler oluşturmaya yardımcı olan önemli özelliklerinden biridir.

Olay işleme

v-on VueJS'deki olayları dinlemek için DOM öğelerine eklenen özelliktir.

Animasyon / Geçiş

VueJS, HTML öğelerine DOM'a eklendiğinde / güncellendiğinde veya DOM'dan kaldırıldığında geçiş uygulamak için çeşitli yollar sağlar. VueJS, geçiş efekti için öğenin etrafına sarılması gereken yerleşik bir geçiş bileşenine sahiptir. Üçüncü taraf animasyon kitaplıklarını kolayca ekleyebilir ve ayrıca arayüze daha fazla etkileşim ekleyebiliriz.

Hesaplanan Özellikler

Bu, VueJS'nin önemli özelliklerinden biridir. UI elemanlarında yapılan değişikliklerin dinlenmesine yardımcı olur ve gerekli hesaplamaları yapar. Bunun için ek kodlamaya gerek yoktur.

Şablonlar

VueJS, DOM'u Vue örnek verileriyle bağlayan HTML tabanlı şablonlar sağlar. Vue, şablonları sanal DOM Render işlevlerinde derler. Render işlevlerinin şablonunu kullanabiliriz ve bunu yapmak için şablonu render işlevi ile değiştirmeliyiz.

Direktifler

VueJS, ön uçta çeşitli eylemleri gerçekleştirmek için kullanılan v-if, v-else, v-show, v-on, v-bind ve v-model gibi yerleşik yönergelere sahiptir.

Gözlemciler

Gözlemciler değişen verilere uygulanır. Örneğin, girdi öğeleri oluşturun. Burada herhangi bir ek etkinlik eklememize gerek yoktur. Watcher, kodu basit ve hızlı hale getirerek herhangi bir veri değişikliğiyle ilgilenir.

Yönlendirme

Sayfalar arasında gezinme, vue-yönlendirici yardımıyla gerçekleştirilir.

Hafif

VueJS betiği çok hafiftir ve performansı da çok hızlıdır.

Vue-CLI

VueJS, vue-cli komut satırı arayüzü kullanılarak komut satırına kurulabilir. Projeyi vue-cli kullanarak kolayca oluşturmaya ve derlemeye yardımcı olur.

Diğer Çerçevelerle Karşılaştırma

Şimdi VueJS'yi React, Angular, Ember, Knockout ve Polymer gibi diğer çerçevelerle karşılaştıralım.

VueJS v / s Tepki

Virtual DOM

Sanal DOM, DOM ağacının sanal bir temsilidir. Sanal DOM ile, gerçek DOM ile aynı olan bir JavaScript nesnesi oluşturulur. DOM'de her değişiklik yapılması gerektiğinde, yeni bir JavaScript nesnesi oluşturulur ve değişiklikler yapılır. Daha sonra, hem JavaScript nesneleri karşılaştırılır ve son değişiklikler gerçek DOM'da güncellenir.

VueJS ve React'in her ikisi de sanal DOM kullanır, bu da onu daha hızlı yapar.

Template v/s JSX

VueJS, html, js ve css'yi ayrı ayrı kullanır. Yeni başlayanlar için VueJS stilini anlamak ve benimsemek çok kolaydır. VueJS için şablon tabanlı yaklaşım çok kolaydır.

React, jsx yaklaşımını kullanır. ReactJS için her şey JavaScript'tir. HTML ve CSS, JavaScript'in bir parçasıdır.

Installation Tools

React kullanımları create react app ve VueJS, vue-cli /CDN/npm. Her ikisinin de kullanımı çok kolaydır ve proje tüm temel gereksinimlerle oluşturulmuştur. React'in derleme için web paketine ihtiyacı vardır, oysa VueJS buna ihtiyaç duymaz. Cdn kitaplığını kullanarak jsfiddle veya codepen'in herhangi bir yerinde VueJS kodlamasıyla başlayabiliriz.

Popularity

React, VueJS'den daha popüler. React ile iş fırsatı VueJS'den daha fazlasıdır. React, yani Facebook'un arkasında onu daha popüler yapan büyük bir isim var. React, JavaScript'in temel kavramını kullandığından, JavaScript'in en iyi uygulamasını kullanır. React ile çalışan biri kesinlikle tüm JavaScript konseptlerinde çok iyi olacaktır.

VueJS gelişen bir çerçevedir. Şu anda, VueJS ile iş fırsatları React'e kıyasla daha az. Bir ankete göre, birçok insan VueJS'e uyum sağlıyor ve bu da onu React ve Angular'a kıyasla daha popüler hale getirebilir. VueJS'nin farklı özellikleri üzerinde çalışan iyi bir topluluk var. Vue yönlendirici, düzenli güncellemelerle bu topluluk tarafından korunur.

VueJS, Angular ve React'ten iyi parçaları aldı ve güçlü bir kitaplık oluşturdu. VueJS, hafif kütüphanesi nedeniyle React / Angular'a kıyasla çok daha hızlıdır.

VueJS v / s Açısal

Similarities

VueJS, Angular ile pek çok benzerliğe sahiptir. V-if, v-for gibi yönergeler, Angular'daki ngIf, ngFor'a neredeyse benzer. Her ikisinin de proje kurulumu ve onu inşa etmek için bir komut satırı arayüzü vardır. VueJS, Vue-cli kullanır ve Angular, açısal-cli kullanır. Her ikisi de iki yönlü veri bağlama, sunucu tarafı oluşturma vb. Sunar.

Complexity

Vuejs öğrenmek ve başlamak çok kolaydır. Daha önce tartışıldığı gibi, yeni başlayanlar VueJS'nin CDN kitaplığını alıp codepen ve jsfiddle ile başlayabilir.

Angular için, kurulum için bir dizi adımdan geçmemiz gerekiyor ve yeni başlayanlar için Angular'ı kullanmaya başlamak biraz zor. Temel JavaScript geçmişinden gelen kişiler için zor olan kodlama için TypeScript kullanır. Ancak Java ve C # arka planına sahip kullanıcılar için öğrenmesi daha kolaydır.

Performance

Performansa karar vermek kullanıcılara bağlıdır. VueJS dosya boyutu Angular'dan çok daha hafiftir. Aşağıdaki bağlantıda çerçeve performansının bir karşılaştırması sağlanmaktadır.http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Popularity

Şu anda Angular, VueJS'den daha popüler. Birçok kuruluş Angular'ı çok popüler kılan kullanıyor. Angular'da deneyimli adaylar için iş fırsatları da daha fazladır. Bununla birlikte, VueJS pazardaki yerini alıyor ve Angular ve React için iyi bir rakip olarak kabul edilebilir.

Dependencies

Angular, birçok yerleşik özellik sağlar. Gerekli modülleri içe aktarmalı ve buna başlamalıyız, örneğin, @ angular / animations, @ angular / form.

VueJS, Angular gibi tüm yerleşik özelliklere sahip değildir ve üzerinde çalışmak için üçüncü taraf kitaplıklara bağlı olması gerekir.

Flexibility

VueJS, herhangi bir sorun olmadan başka herhangi bir büyük projeyle kolayca birleştirilebilir. Angular, mevcut başka bir projeyle çalışmaya başlamak o kadar kolay olmayacak.

Backward Compatibility

AngularJS, Angular2 ve şimdi de Angular4 vardı. AngularJS ve Angular2 büyük farklara sahiptir. AngularJS'de geliştirilen proje uygulaması temel farklılıklar nedeniyle Angular2'ye dönüştürülemiyor.

VueJS'nin en son sürümü 2.0'dır ve geriye dönük uyumluluk ile iyidir. Anlaşılması çok kolay olan iyi belgeler sağlar.

Typescript

Angular, kodlaması için TypeScript kullanır. Angular'ı kullanmaya başlamak için kullanıcıların Typescript bilgisine sahip olmaları gerekir. Ancak, cdn kitaplığını kullanarak jsfiddle veya codepen'in herhangi bir yerinde VueJS kodlamasıyla başlayabiliriz. Başlaması çok kolay olan standart JavaScript ile çalışabiliriz.

VueJS v / s Kor

Similarities

Ember, Ember komut satırı aracı, yani Ember projeleri için kolay kurulum ve derleme için ember-cli sağlar.

VueJS ayrıca projeleri başlatmak ve oluşturmak için bir komut satırı aracı vue-cli'ye sahiptir.

Her ikisinin de yönlendirici, şablon ve bileşenler gibi özellikleri vardır, bu da onları UI çerçevesi olarak çok zengin yapar.

Performance

VueJS, Ember ile karşılaştırıldığında daha iyi performansa sahiptir. Ember, sanal DOM kullanan VueJS ve React ile benzer bir kavram olan yeniden oluşturma performansını iyileştirmek amacıyla bir parıltı oluşturma motoru ekledi. Ancak VueJS, Ember ile karşılaştırıldığında daha iyi bir performansa sahip.

VueJS v / s Nakavt

Nakavt, iyi bir tarayıcı desteği sağlar. IE'nin alt sürümünde desteklenirken VueJS, IE8 ve altında desteklenmez. Nakavt gelişimi zamanla yavaşladı. Son zamanlarda bunun için pek popülerlik yok.

Öte yandan, VueJS düzenli güncellemeler sağlayan Vue ekibiyle popülerlik kazanmaya başladı.

VueJS v / s Polimer

Polimer kütüphanesi Google tarafından geliştirilmiştir. Google I / O, Google Earth, Google Play Müzik gibi birçok Google projesinde kullanılır. VueJS'ye benzer veri bağlama ve hesaplanmış özellikler sunar.

Polimer özel öğe tanımı, düz JavaScript / CSS, öğe özellikleri, yaşam döngüsü geri çağırmaları ve JavaScript yöntemlerinden oluşur. Buna karşılık, VueJS kolayca JavaScript / html ve CSS kullanımına izin verir.

Polymer, web bileşeni özelliklerini kullanır ve tarayıcılar için bu özellikleri desteklemeyen çoklu dolgular gerektirir. VueJS'nin bu tür bağımlılıkları yoktur ve IE9 + 'daki tüm tarayıcılarda sorunsuz çalışır.

VueJS'yi kurmanın birçok yolu vardır. Kurulumun nasıl yapılacağına dair bazı yollar aşağıda tartışılacaktır.

<script> etiketini doğrudan HTML dosyasında kullanma

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

Ana siteye git https://vuejs.org/v2/guide/installation.htmlVueJS ve vue.js'yi ihtiyaca göre indirin. Kullanım için iki versiyon vardır - üretim versiyonu ve geliştirme versiyonu. Geliştirme sürümü küçültülmemiş, üretim sürümü ise aşağıdaki ekran görüntüsünde gösterildiği gibi küçültülmüştür. Geliştirme sürümü, projenin geliştirilmesi sırasında uyarılara ve hata ayıklama moduna yardımcı olacaktır.

CDN kullanma

CDN kütüphanesinden de VueJS dosyasını kullanmaya başlayabiliriz. Bağlantıhttps://unpkg.com/vueVueJS'nin en son sürümünü verecektir. VueJS, jsDelivr'de de mevcuttur (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) ve cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).

Gerekirse dosyaları kendi tarafımızda barındırabilir ve VueJS geliştirmeye başlayabiliriz.

NPM'yi kullanma

VueJS ile büyük ölçekli uygulamalar için npm paketini kullanarak kurmanız önerilir. Browserify ve Webpack ile birlikte geliştirmeye yardımcı olan diğer gerekli araçlarla birlikte gelir. Aşağıda npm kullanarak kurulum komutu verilmiştir.

npm  install vue

CLI Komut Satırını Kullanma

VueJS ayrıca, CLI'nin vue'yu kurmasını ve sunucu aktivasyonunu başlatmasını sağlar. CLI kullanarak kurmak için, aşağıdaki komut kullanılarak yapılan CLI'nın kurulu olması gerekir.

npm install --global vue-cli

Tamamlandığında, VueJS için CLI sürümünü gösterir. Kurulum için birkaç dakika sürer.

+ [email protected]
added 965 packages in 355.414s

Aşağıda, Webpack kullanarak proje oluşturma komutu verilmiştir.

vue init webpack myproject

Başlamak için aşağıdaki komutu kullanın.

cd myproject
npm install
npm run dev

Npm run dev komutunu çalıştırdığımızda, sunucuyu başlatır ve aşağıdaki ekran görüntüsünde gösterildiği gibi tarayıcıda görüntülenecek url'yi sağlar.

CLI kullanan proje yapısı aşağıdaki gibi görünür.

Vuekullanıcı arayüzleri oluşturmak için bir JavaScript çerçevesidir. Çekirdek kısmı esas olarak görünüm katmanına odaklanmıştır ve anlaşılması çok kolaydır. Bu eğitimde kullanacağımız Vue sürümü 2.0'dır.

Vue temelde ön uç geliştirme için tasarlandığından, önümüzdeki bölümlerde çok sayıda HTML, JavaScript ve CSS dosyasıyla ilgileneceğiz. Ayrıntıları anlamak için basit bir örnekle başlayalım.

Bu örnekte, vuej'lerin geliştirme versiyonunu kullanacağız.

Misal

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

Çıktı

Bu, VueJS kullanarak oluşturduğumuz ilk uygulama. Yukarıdaki kodda görüldüğü gibi, .html dosyasının başına vue.js ekledik.

<script type = "text/javascript" src = "js/vue.js"></script>

Gövdede eklenmiş bir div var. “My first VueJS Task” tarayıcıda.

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

Ayrıca enterpolasyona bir mesaj ekledik, örn. {{}}. Bu, VueJS ile etkileşime girer ve verileri tarayıcıda yazdırır. DOM'daki mesajın değerini elde etmek için aşağıdaki gibi bir vuejs örneği oluşturuyoruz -

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

Yukarıdaki kod parçacığında, DOM öğesinin kimliğini, yani e1: '# intro' alan, div'in kimliğini alan Vue örneğini çağırıyoruz. Değer atanmış mesajla birlikte veri var‘My first VueJS Task’. VueJS, DOM ile etkileşime girer ve DOM {{message}} içindeki değeri değiştirir’My first VueJS Task’.

Konsolda mesajın değerini değiştirirsek, aynısı tarayıcıya da yansıtılacaktır. Örneğin -

Konsol Ayrıntıları

Yukarıdaki konsolda, bir Vue örneği olan vue_det nesnesini yazdırdık. Mesajı ile güncelliyoruz“VueJs is interesting” ve aynısı yukarıdaki ekran görüntüsünde görüldüğü gibi tarayıcıda hemen değiştirilir.

Bu, VueJS'nin DOM ile bağlantısını ve onu nasıl değiştirebileceğimizi gösteren basit bir örnektir. Önümüzdeki birkaç bölümde yönergeler, bileşenler, koşullu döngüler vb. Hakkında bilgi edineceğiz.

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 nesnesine atanan değerle, yani Ria. Aynısı 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 çağırmalar vb. Seçenekler aktarmamız 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.

Daha önceki bölümlerde, ekranda metin içeriği biçiminde bir çıktının nasıl alınacağını öğrendik. Bu bölümde, ekranda HTML şablonu biçiminde bir çıktı almayı öğreneceğiz.

Bunu anlamak için bir örnek ele alalım ve çıktıyı tarayıcıda görelim.

<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>
         <div>{{htmlcontent}}</div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

vue_template.js

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

Şimdi, html içeriğini sayfada göstermek istediğimizi varsayalım. Bunu enterpolasyonla kullanırsak, yani çift küme paranteziyle kullanırsak, tarayıcıda bunu elde ederiz.

Html içeriğinin htmlcontent değişkeninde verdiğimiz şekilde görüntülendiğini görürsek, istediğimiz bu değil, tarayıcıda uygun bir HTML içeriğinde görüntülenmesini istiyoruz.

Bunun için kullanmamız gerekecek v-htmldirektif. Html öğesine v-html yönergesi atadığımız anda, VueJS bunu HTML içeriği olarak çıkarması gerektiğini bilir. V-html direktifini.html dosya ve farkı görün.

<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>
         <div v-html = "htmlcontent"></div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

Şimdi, HTML içeriğini göstermek için çift kıvrımlı parantezlere ihtiyacımız yok, bunun yerine htmlcontent'in içinde tanımlandığı v-html = ”htmlcontent” kullandık js aşağıdaki gibi dosya -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

Tarayıcıdaki çıktı aşağıdaki gibidir -

Tarayıcıyı incelersek, içeriğin aynı şekilde eklendiğini göreceğiz. .js değişkene dosya htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Tarayıcıdaki inspect öğesine bir göz atalım.

DOM'a HTML şablonunun nasıl ekleneceğini gördük. Şimdi, mevcut HTML öğelerine nasıl nitelik ekleyeceğimizi göreceğiz.

HTML dosyasında bir resim etiketimiz olduğunu ve Vue'nun bir parçası olan src'yi atamak istediğimizi düşünün.

Misal

<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>
         <div v-html = "htmlcontent"></div>
         <img src = "" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

Yukarıdaki img etiketine bakın, src boştur. Src'yi ona vue js'den eklememiz gerekiyor. Nasıl yapılacağına bir göz atalım. İmg src'yi veri nesnesinde saklayacağız..js aşağıdaki gibi dosya -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

Src'yi aşağıdaki gibi atarsak, tarayıcıdaki çıktı aşağıdaki ekran görüntüsünde gösterildiği gibi olacaktır.

<img src = "{{imgsrc}}" width = "300" height = "250" />

Kırık bir görüntü elde ederiz. HMTL etiketine herhangi bir öznitelik atamak için kullanmamız gerekirv-binddirektif. Src'yi v-bind yönergesi ile görüntüye ekleyelim.

Bu nasıl atanır .html dosya.

<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>
         <div v-html = "htmlcontent"></div>
         <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

Src'nin önekini almalıyız v-bind:src = ”imgsrc” ve src ile değişkenin adı.

Tarayıcıdaki çıktı aşağıdadır.

Src'nin v-bind ile nasıl göründüğünü inceleyelim ve kontrol edelim.

Yukarıdaki ekran görüntüsünde görüldüğü gibi src, herhangi bir vuejs özelliği olmadan atanır.

Vue Components HTML'de yeniden kullanılabilen özel öğeler oluşturan VueJS'nin önemli özelliklerinden biridir.

Bir örnekle çalışalım ve bileşenlerin VueJS ile nasıl çalıştığını daha iyi anlayacak bir bileşen oluşturalım.

Misal

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

.Html dosyasında id ile iki div oluşturduk component_test ve component_test1. İçinde.jsyukarıda gösterilen dosyalar, div kimlikleriyle iki Vue örneği oluşturulur. Her iki görünüm örneğiyle kullanılacak ortak bir bileşen oluşturduk.

Bir bileşen oluşturmak için sözdizimi aşağıdadır.

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

Bir bileşen oluşturulduktan sonra, bileşenin adı özel öğe olur ve aynı şey oluşturulan Vue örnek öğesinde, yani kimlikleri olan div içinde kullanılabilir component_test ve component_test1.

İçinde .js dosyasında, bileşenin adı olarak bir test bileşeni kullandık ve div'lerin içindeki özel öğe olarak aynı ad kullanıldı.

Misal

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

Oluşturulan bileşende .jsdosyasına bir HTML kodu atadığımız bir şablon ekledik. Bu bir yolregistering a global component, aşağıdaki komut dosyasında gösterildiği gibi herhangi bir vue örneğinin parçası yapılabilir.

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

Yürütme sırasında aynısı tarayıcıya da yansıtılacaktır.

Bileşenlere özel öğe etiketi verilir, yani <testcomponent></testcomponent>. Ancak, tarayıcıda aynısını incelediğimizde, aşağıdaki ekran görüntüsünde gösterildiği gibi şablonda bulunan düz HTML'deki özel etiketi fark etmeyeceğiz.

Ayrıca aşağıdaki komut dosyasında gösterildiği gibi bileşenleri doğrudan vue örneğinin bir parçası yaptık.

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

Bu denir local registration ve bileşenler yalnızca oluşturulan vue örneğinin bir parçası olacaktır.

Şimdiye kadar temel seçeneklerle birlikte temel bileşeni gördük. Şimdi buna veri ve yöntem gibi birkaç seçenek daha ekleyelim. Vue örneğinin verileri ve yöntemleri olduğu gibi, bileşen de aynı şeyi paylaşır. Dolayısıyla daha önce gördüğümüz kodu veri ve yöntemlerle genişleteceğiz.

Misal

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

İçinde .jsYukarıdaki dosyaya, bir nesne döndüren bir işlev olan verileri ekledik. Nesne, 'Ria' değeri atanmış bir ad özelliğine sahiptir. Bu, aşağıdaki şablonda kullanılır.

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

Bileşenlerde bir işlev olarak veri bulunmasına rağmen, özelliklerini doğrudan Vue örneğiyle kullandığımız gibi kullanabiliriz. Ayrıca, değişiklik adı ve orijinal ad olmak üzere iki yöntem eklendi. Changename'de name özelliğini değiştiriyoruz ve originalname'de onu orijinal isme geri döndürüyoruz.

Ayrıca div üzerine mouseover ve mouseout olmak üzere iki olay ekledik. Olayların ayrıntıları Olaylar bölümünde tartışılacaktır. Şimdilik fareyle üzerine gelindiğindechangename yöntem ve mouseout çağrıları originalname yöntem.

Aynı ekran aşağıdaki tarayıcıda gösterilmektedir.

Yukarıdaki tarayıcıda görüldüğü gibi, aynı ad olan data özelliğinde atanan adı görüntüler. Ayrıca div üzerinde bir mouseover olayı ve ayrıca bir mouseout atadık. Fareyle üzerine geldiğimizde ve fareyi çektiğimizde ne olacağını görelim.

Fareyle üzerine gelindiğinde, ilk bileşenin adının Ben olarak değiştirildiğini görüyoruz, ancak ikincisi olduğu gibi kalıyor. Bunun nedeni, veri bileşeninin bir işlev olması ve bir nesne döndürmesidir. Böylece, bir yerde değiştirildiğinde, diğer durumlarda aynı şeyin üzerine yazılmaz.

Dinamik Bileşenler

Dinamik bileşenler anahtar kelime kullanılarak oluşturulur <component></component> ve aşağıdaki örnekte gösterildiği gibi bir özellik kullanılarak bağlanır.

Misal

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

Çıktı

Dinamik bileşen, aşağıdaki sözdizimi kullanılarak oluşturulur.

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

V-bind: is = ”view” a sahiptir ve ona bir değer görünümü atanmıştır. Görünüm, Vue örneğinde aşağıdaki gibi tanımlanır.

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

Şablon çalıştırıldığında Dynamic Component tarayıcıda görüntülenir.

Daha önce Vue örneği ve bileşenleri için yöntemler gördük. Hesaplanan özellikler yöntemler gibidir, ancak bu bölümde tartışacağımız yöntemlerle karşılaştırıldığında bazı farklılıklar vardır.

Bu bölümün sonunda, yöntemlerin ne zaman kullanılacağına ve hesaplanan özelliklerin ne zaman kullanılacağına karar verebileceğiz.

Bir örnek kullanarak hesaplanmış özellikleri anlayalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
         LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
         <h1>My name is {{firstname}} {{lastname}}</h1>
         <h1>Using computed method : {{getfullname}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_computedprops.js"></script>
   </body>
</html>

vue_computeprops.js

var vm = new Vue({
   el: '#computed_props',
   data: {
      firstname :"",
      lastname :"",
      birthyear : ""
   },
   computed :{
      getfullname : function(){
         return this.firstname +" "+ this.lastname;
      }
   }
})

Burada yarattık .htmlad ve soyad ile dosya. Ad ve Soyad, ad ve soyad özellikleri kullanılarak bağlanan bir metin kutusudur.

Girilen ilk adı ve soyadı döndüren hesaplanan getfullname yöntemini çağırıyoruz.

computed :{
   getfullname : function(){
      return this.firstname +" "+ this.lastname;
   }
}

Metin kutusuna yazdığımızda, özelliklerin adı veya soyadı değiştiğinde aynı şey işlev tarafından döndürülür. Bu nedenle, hesaplananların yardımıyla, bir işlevi çağırmayı hatırlamak gibi belirli bir şey yapmak zorunda değiliz. Hesaplandığında, ad ve soyad gibi özellikler değiştikçe kendi kendine çağrılır.

Aynısı aşağıdaki tarayıcıda görüntülenir. Metin kutusuna yazın, aynısı hesaplanan işlev kullanılarak güncellenecektir.

Şimdi, bir yöntem ile hesaplanmış bir özellik arasındaki farkı anlamaya çalışalım. Her ikisi de nesnedir. İçinde bir değer döndüren tanımlanmış işlevler vardır.

Yöntem durumunda, onu bir işlev olarak ve bir özellik olarak hesaplanmış olarak adlandırıyoruz. Aşağıdaki örneği kullanarak, yöntem ve hesaplanan özellik arasındaki farkı anlayalım.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method : {{getrandomno1()}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed
            property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "helloworld"
            },
            methods: {
               getrandomno1 : function() {
                  return Math.random();
               }
            },
            computed :{
               getrandomno : function(){
                  return Math.random();
               }
            }
         });
      </script>
   </body>
</html>

Yukarıdaki kodda, adında bir yöntem oluşturduk getrandomno1 ve bir işleve sahip hesaplanmış bir özellik getrandomno. Her ikisi de Math.random () kullanarak rastgele sayılar veriyor.

Aşağıda gösterildiği gibi tarayıcıda görüntülenir. Yöntem ve hesaplanan özellik, farkı göstermek için birçok kez çağrılır.

Yukarıdaki değerlere bakarsak, hesaplanan özellikten döndürülen rastgele sayıların, çağrılma sayısına bakılmaksızın aynı kaldığını göreceğiz. Bu, her çağrıldığında, son değerin herkes için güncellendiği anlamına gelir. Oysa bir yöntem için bu bir işlevdir, dolayısıyla her çağrıldığında farklı bir değer döndürür.

Hesaplanan Özelliklerde Al / Ayarla

Bu bölümde, bir örnek kullanarak hesaplanan özelliklerdeki get / set fonksiyonlarını öğreneceğiz.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  }
               }
            }
         });
      </script>
   </body>
</html>

Bağlı olan bir giriş kutusu tanımladık fullname, hesaplanmış bir özelliktir. Adlı bir işlevi döndürürget, tam adı, yani ad ve soyadı verir. Ayrıca, adı ve soyadı şu şekilde görüntüledik -

<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>

Aynısını tarayıcıda kontrol edelim.

Şimdi, metin kutusundaki adı değiştirirsek, aynı şeyin aşağıdaki ekran görüntüsünde görüntülenen adda yansıtılmadığını göreceğiz.

Tam ad hesaplanan özelliğe ayarlayıcı işlevini ekleyelim.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.firstName = fname[0];
                     this.lastName = fname[1]
                  }
               }
            }
         });
      </script>
   </body>
</html>

Tam ad hesaplanan özelliğe set işlevini ekledik.

computed :{
   fullname : {
      get : function() {
         return this.firstName+" "+this.lastName;
      },
      set : function(name) {
         var fname = name.split(" ");
         this.firstName = fname[0];
         this.lastName = fname[1]
      }
   }
}

Parametre olarak ada sahiptir ve metin kutusundaki tam addan başka bir şey değildir. Daha sonra uzaya bölünür ve ad ve soyad güncellenir. Şimdi, kodu çalıştırdığımızda ve metin kutusunu düzenlediğimizde, aynı şey tarayıcıda görüntülenecektir. Ad ve soyad, set işlevi nedeniyle güncellenecektir. Get işlevi ilk adı ve soyadı döndürürken, set işlevi herhangi bir şey düzenlendiğinde onu günceller.

Şimdi, metin kutusuna yazılanlar, yukarıdaki ekran görüntüsünde görüldüğü gibi görüntülenenlerle eşleşiyor.

Bu bölümde Watch özelliği hakkında bilgi edineceğiz. Bir örnek kullanarak, Watch özelliğini VueJS'de kullanabileceğimizi göreceğiz.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         Kilometers : <input type = "text" v-model = "kilometers">
         Meters : <input type = "text" v-model = "meters">
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
      </script>
   </body>
</html>

Yukarıdaki kodda, biri ile iki metin kutusu oluşturduk. kilometers ve bir başkasıyla meters. Veri özelliğinde kilometre ve metre sıfırlanır. İki işlevle oluşturulmuş bir izleme nesnesi vardır.kilometers ve meters. Her iki fonksiyonda da kilometreden metreye ve metreden kilometreye dönüşüm yapılır.

Herhangi bir metin kutusunun içine değer girerken, hangisi değiştirilirse değiştirilsin, Watch her iki metin kutusunu da günceller. Herhangi bir olayı özel olarak atamamamız ve değişmesini beklememiz ve ek doğrulama işini yapmamız gerekmiyor. Watch, ilgili işlevlerde yapılan hesaplama ile metin kutularını güncellemeye özen gösterir.

Tarayıcıdaki çıktıya bir göz atalım.

Kilometre metin kutusuna bazı değerler girelim ve metre metin kutusunda değiştiğini görelim ve bunun tersi de geçerlidir.

Şimdi metre metin kutusuna girelim ve kilometre metin kutusunda değiştiğini görelim. Bu, tarayıcıda görülen ekrandır.

Bu bölümde, HTML niteliklerinin nasıl değiştirileceğini veya atanacağını, stili değiştirmeyi ve adı verilen bağlama yönergesi yardımıyla sınıfları atamayı öğreneceğiz. v-bind VueJS ile mevcuttur.

Veri bağlama için neden ve ne zaman v-bind direktifini kullanmamız gerektiğini anlamak için bir örnek ele alalım.

Misal

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

Yukarıdaki örnekte, bir başlık değişkeni ve üç bağlantı bağlantısı görüntüledik. Veri nesnesinden href'e de bir değer atadık.

Şimdi, tarayıcıdaki çıktıyı kontrol edip incelersek, aşağıdaki ekran görüntüsünde gösterildiği gibi ilk iki bağlantı bağlantısının href'e doğru şekilde sahip olmadığını göreceğiz.

İlk tıklama href'i hreflink olarak gösterirken, ikincisi bunu {{hreflink}} içinde gösterirken sonuncusu ihtiyacımız olan doğru url'yi görüntüler.

Bu nedenle, HTML özniteliklerine değer atamak için, onu aşağıdaki gibi v-bind yönergesi ile bağlamamız gerekir.

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

VueJS ayrıca aşağıdaki gibi v-bind için bir kısaltma sağlar.

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

Tarayıcıda inspect öğesini görürsek, bağlantı etiketi v-bind niteliğini göstermez, ancak düz HTML'yi görüntüler. DOM'u incelediğimizde VueJS özelliklerinin hiçbiri görülmez.

HTML Sınıflarını Bağlama

HTML sınıfını bağlamak için kullanmamız gerekir v-bind: class. Bir örnek düşünelim ve içindeki sınıfları bağlayalım.

Misal

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

V-bind: class = ”{active: isactive}” ile oluşturulmuş bir div var.

Buraya, isactivedoğru veya yanlışa dayalı bir değişkendir. Etkin sınıfı div'e uygulayacaktır. Veri nesnesinde, isactive değişkenini true olarak atadık. Tarzda tanımlanmış bir sınıf var.active arka plan rengi kırmızıdır.

Değişken etkinse, renk aksi takdirde uygulanmayacaktır. Aşağıdaki tarayıcıda çıktı olacaktır.

Yukarıdaki ekranda arka plan renginin kırmızı olduğunu görebiliriz. Div öğesine sınıf = "aktif" uygulanır.

Şimdi değişkenin değerini false olarak değiştirelim ve çıktıyı görelim. İsactive değişkeni, aşağıdaki kodda gösterildiği gibi false olarak değiştirilir.

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

Yukarıdaki ekranda, aktif sınıfın div'e uygulanmadığını görebiliriz.

Ayrıca, v-bind özelliğini kullanarak HTML etiketlerine birden çok sınıf atayabiliriz.

Misal

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

Yukarıdaki koddaki div için normal bir sınıf uyguladık, örnek class = ”info”. İsActive ve hasError değişkenine bağlı olarak, diğer sınıflar div'e uygulanır.

Çıktı

Bu, uygulanan normal bir sınıftır. Şu anda her iki değişken de yanlış. Hadi yapalımisActive değişkeni true olarak ayarlayın ve çıktıyı görün.

Yukarıdaki ekranda, DOM'da div, info ve active'e atanmış iki sınıfı görebiliriz. HasError değişkenini true ve isActive'ı false yapalım.

Şimdi, yukarıdaki ekranda gördüğümüzde, info ve displayError sınıfı div'e uygulanıyor. Koşullara göre birden çok sınıfı bu şekilde uygulayabiliriz.

Sınıfı bir dizi olarak da geçirebiliriz. Bunu anlamak için bir örnek alalım.

Misal

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

Çıktı

Yukarıda gördüğümüz gibi, her iki sınıf da div'e uygulanır. Bir değişken kullanalım ve değişkenin değerine göre sınıfı atayalım.

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

İki değişken kullandık isActive ve haserror ve aynısı, aşağıdaki div etiketinde gösterildiği gibi div while sınıf bağlama için de kullanılır.

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

İsActive doğruysa, infoclass ona atanacaktır. Aynı durum haserror için de geçerli, eğer doğruysa, o zaman ona sadece errorClass uygulanacaktır.

Şimdi haserror değişkenini true ve isActive değişkenini false yapalım.

Şimdi bileşenlerdeki sınıflar için v-bind ekleyeceğiz. Aşağıdaki örnekte, bileşen şablonuna ve ayrıca bileşene bir sınıf ekledik.

Misal

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

Tarayıcıdaki çıktı aşağıdadır. Her iki sınıfı da final div'e uygular.

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

Doğru / yanlışa dayalı olarak görüntülenecek bileşen bölümüne bir değişken ekleyin.

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

Değişken yanlış olduğundan, aktif sınıf uygulanmaz ve aşağıdaki ekran görüntüsünde gösterildiği gibi bilgi sınıfı uygulanır.

Satır İçi Stilleri Bağlama

Nesne Sözdizimi

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

Yukarıdaki örnekte, div için stil uygulanır ve veriler, veri nesnesinden getirilir.

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

Tüm değerleri bir değişkene atayarak ve ardından değişkeni div'e atayarak da aynı şeyi yapabiliriz.

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>

Color ve fontSize, styleobj adlı nesneye atanır ve aynısı div'e atanır.

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

Output

Form Giriş Bağlamaları

Şimdiye kadar oluşturduğumuz örnekte, giriş metin öğesini ve atanan bir değişkene bağlı değeri bağlayan v-modelini gördük. Bu bölümde daha fazlasını öğrenelim.

Misal

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

Metin kutusuna ne yazarsak yazalım aşağıda gösterilmektedir. v-modeline değer adı atanır ve ad, metin kutusuna ne yazılırsa yazılanları görüntüleyen {{ad}} 'da görüntülenir.

Çıktı

Biraz daha örnek ve nasıl kullanılacağını inceleyelim.

Radyo ve Seç

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

Değiştiriciler

Örnekte üç değiştirici kullandık - trim, number ve lazy.

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 modifieryalnızca sayı girilmesine izin verir. Rakamlardan başka herhangi bir girdi almayacaktır.

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

Lazy modifier tam olarak girildiğinde metin kutusunda bulunan içeriği görüntüler ve kullanıcı metin kutusunu terk eder.

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

Trim modifier başında ve sonunda girilen boşlukları kaldırır.

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

v-on VueJS'deki olayları dinlemek için DOM öğelerine eklenen özelliktir.

Olayı tıklayın

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total =  this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

Çıktı

Aşağıdaki kod, DOM öğesine bir tıklama etkinliği atamak için kullanılır.

<button v-on:click = "displaynumbers">Click ME</button>

V-on için bir kısaltma var, bu da olayı şu şekilde de adlandırabileceğimiz anlamına geliyor -

<button @click = "displaynumbers">Click ME</button>

Düğmeye tıklandığında, olayı alan ve yukarıda gösterildiği gibi tarayıcıda aynısını teselli eden 'displaynumbers' yöntemini çağıracak.

Şimdi fareyle üzerine gelindiğinde bir etkinlik daha kontrol edeceğiz.

Misal

<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" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : '',
               styleobj : {
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
               }
            },
            methods : {
               changebgcolor : function() {
                  this.styleobj.backgroundColor = "green";
               },
               originalcolor : function() {
                  this.styleobj.backgroundColor = "red";
               }
            },
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, genişliği ve yüksekliği 100px olan bir div oluşturduk. Kırmızı bir arka plan rengi verilmiştir. Fareyle üzerine gelindiğinde rengi yeşile değiştiriyoruz ve fareyi çektiğimizde rengi tekrar kırmızıya çeviriyoruz.

Bu nedenle, fareyle üzerine gelme sırasında bir yöntem changebgcolor ve fareyi div'in dışına çıkardığımızda, bir yöntem denir originalcolor.

Bu şu şekilde yapılır -

<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>

Bölmeye yukarıda gösterildiği gibi iki olay (mouseover ve mouseout) atanır. Bir styleobj değişkeni oluşturduk ve div'e atanacak gerekli stili verdik. Aynı değişken, v-bind: style = ”styleobj” kullanılarak div'e bağlanır

Changebgcolor'da aşağıdaki kodu kullanarak rengi yeşile değiştiriyoruz.

changebgcolor : function() {
   this.styleobj.backgroundColor = "green";
}

Stylobj değişkenini kullanarak rengi yeşile değiştiriyoruz.

Benzer şekilde, orijinal renge geri döndürmek için aşağıdaki kod kullanılır.

originalcolor : function() {
   this.styleobj.backgroundColor = "red";
}

Tarayıcıda gördüğümüz bu.

Fareyle üzerine geldiğimizde, aşağıdaki ekran görüntüsünde gösterildiği gibi renk yeşile dönecektir.

Olay Değiştiriciler

Vue, v-on özniteliğinde kullanılabilen olay değiştiricilere sahiptir. Mevcut değiştiriciler aşağıdadır -

.bir Zamanlar

Olayın yalnızca bir kez yürütülmesine izin verir.

Sözdizimi

<button v-on:click.once = "buttonclicked">Click Once</button>

Yukarıdaki sözdiziminde gösterildiği gibi değiştiricileri çağırırken nokta operatörü eklememiz gerekir. Bunu bir örnekte kullanalım ve bir zamanlar değiştiricinin çalışmasını anlayalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
         Output:{{clicknum}}
         <br/><br/>
         <button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>
         Output:{{clicknum1}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               buttonclickedonce : function() {
                  this.clicknum++;
               },
               buttonclicked : function() {
                  this.clicknum1++;
               }
            }
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki örnekte, iki buttton oluşturduk. Bir Kez Tıkla etiketli düğme bir kez değiştiriciyi eklemiştir ve diğer düğme herhangi bir değiştirici içermez. Düğmeler bu şekilde tanımlanır.

<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
<button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>

İlk düğme, "düğmeye bir kez tıklandı" yöntemini çağırır ve ikinci düğme "düğme tıklandı" yöntemini çağırır.

buttonclickedonce : function() {
   this.clicknum++;
},
buttonclicked : function() {
   this.clicknum1++;
}

Clicknum ve clicknum1'de tanımlanmış iki değişken vardır. Düğmeye tıklandığında her ikisi de artırılır. Her iki değişken de 0 olarak başlatılır ve ekran yukarıdaki çıktıda görülür.

İlk düğmeye tıklandığında, değişken tıklama sayısı 1 artar. İkinci tıklamada, değiştirici, düğme tıklandığında atanan herhangi bir eylem öğesini yürütmesini veya gerçekleştirmesini engellediğinden, sayı artırılmaz.

İkinci butona tıklandığında aynı işlem gerçekleştirilir, yani değişken arttırılır. Her tıklamada, değer artırılır ve görüntülenir.

Tarayıcıda aldığımız çıktı aşağıdadır.

.önlemek

Syntax

<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

Clickme bağlantısını tıklarsak, "Çapa etiketi tıklandı" şeklinde bir uyarı gönderecek ve bağlantıyı açacaktır. https://www.google.com aşağıdaki ekran görüntülerinde gösterildiği gibi yeni bir sekmede.

Şimdi bu normal bir şekilde çalışıyor, yani bağlantı istediğimiz gibi açılıyor. Bağlantının açılmasını istemiyorsak, aşağıdaki kodda gösterildiği gibi olaya bir 'engelleme' değiştiricisi eklememiz gerekir.

<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>

Eklendikten sonra, butona tıklarsak, bir uyarı mesajı gönderir ve artık bağlantıyı açmaz. Önleme değiştiricisi, bağlantının açılmasını engeller ve yalnızca etikete atanan yöntemi çalıştırır.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

Bağlantıya tıklandığında, uyarı mesajını gösterecek ve artık url'yi açmayacaktır.

Etkinlik - Anahtar Değiştiriciler

VueJS, olay işlemeyi kontrol edebildiğimiz temel değiştiriciler sunar. Bir metin kutumuz olduğunu ve yöntemin yalnızca Enter tuşuna bastığımızda çağrılmasını istediğimizi düşünün. Bunu olaylara aşağıdaki gibi anahtar değiştiriciler ekleyerek yapabiliriz.

Sözdizimi

<input type = "text"  v-on:keyup.enter = "showinputvalue"/>

Etkinliğimize uygulamak istediğimiz anahtar V-on.eventname.keyname (Yukarıda gösterildiği gibi)

Birden çok anahtar ismini kullanabiliriz. Örneğin,V-on.keyup.ctrl.enter

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
         <h3> {{name}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.name=event.target.value;
               }
            }
         });
      </script>
   </body>
</html>

Çıktı

Metin kutusuna bir şey yazın ve yalnızca Enter tuşuna bastığımızda görüntüleneceğini göreceğiz.

Özel Etkinlikler

Üst öğe, prop özniteliğini kullanarak kendi bileşenine veri iletebilir, ancak alt bileşende değişiklikler olduğunda üst öğeye bunu söylememiz gerekir. Bunun için özel etkinlikler kullanabiliriz.

Üst bileşen, alt bileşen olayını kullanarak dinleyebilir v-on öznitelik.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div id = "counter-event-example">
            <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter
            v-for = "(item, index) in languages"
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:showlanguage = "languagedisp"></button-counter>
         </div>
      </div>
      <script type = "text/javascript">
         Vue.component('button-counter', {
            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
               return {
                  counter: 0
               }
            },
            props:['item'],
            methods: {
               displayLanguage: function (lng) {
                  console.log(lng);
                  this.$emit('showlanguage', lng);
               }
            },
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
               languageclicked: "",
               languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
               languagedisp: function (a) {
                  this.languageclicked = a;
               }
            }
         })
      </script>
   </body>
</html>

Çıktı

Yukarıdaki kod, üst bileşen ile alt bileşen arasındaki veri aktarımını gösterir.

Bileşen, aşağıdaki kod kullanılarak oluşturulur.

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

Var v-fordil dizisi ile döngü oluşturacak öznitelik. Dizinin içinde bir dil listesi vardır. Ayrıntıları alt bileşene göndermemiz gerekiyor. Dizinin değerleri öğe ve dizinde saklanır.

v-bind:item = "item"
v-bind:index = "index"

Dizinin değerlerine atıfta bulunmak için, onu önce bir değişkene bağlamamız gerekir ve değişkene aşağıdaki gibi props özelliği kullanılarak başvurulur.

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

Props özelliği, öğeyi bir dizi biçiminde içerir. Ayrıca dizine şu şekilde de başvurabiliriz -

props:[‘item’, ‘index’]

Ayrıca bileşene aşağıdaki gibi bir olay eklenmiştir -

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

Etkinliğin adı showlanguage ve adı verilen bir yöntemi çağırır languagedisp bu, Vue örneğinde tanımlanır.

Bileşende, şablon şu şekilde tanımlanır -

template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',

Oluşturulan bir düğme var. Düğme, dil dizisinde olabildiğince çok sayı ile oluşturulacaktır. Düğmeye tıklandığında, displayLanguage adlı bir yöntem vardır ve tıklanan öğe, işleve bir parametre olarak aktarılır. Şimdi bileşenin tıklanan öğeyi görüntüleme için ana bileşene göndermesi gerekiyor; bu, aşağıdaki gibi yapılır -

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

Yöntem displayLanguage aramalar this.$emit(‘showlanguage’, lng);

$emitüst bileşen yöntemini çağırmak için kullanılır. Showlanguage yöntemi, v-on ile bileşende verilen olay adıdır.

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

Bir parametreyi, yani tıklanan dilin adını, aşağıdaki gibi tanımlanan ana Vue örneğinin yöntemine geçiriyoruz.

var vm = new Vue({
   el: '#databinding',
   data: {
      languageclicked: "",
      languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
   },
   methods: {
      languagedisp: function (a) {
         this.languageclicked = a;
      }
   }
})

Burada, yayma, sırayla çağıran showlanguage tetikleyicileri languagedispVue örnek yöntemlerinden. Değişkene dilin tıklandığı değeri atarlanguageclicked ve aynısı aşağıdaki ekran görüntüsünde gösterildiği gibi tarayıcıda görüntülenir.

<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>

Tarayıcıda aldığımız çıktı aşağıdadır.

Bu bölümde, koşullu oluşturma ve liste oluşturma hakkında bilgi edineceğiz. Koşullu oluşturmada, if, if-else, if-else-if, show, vb. Kullanımını tartışacağız. Liste oluşturmada, for döngüsünün nasıl kullanılacağını tartışacağız.

Koşullu Oluşturma

Koşullu işlemenin ayrıntılarını açıklamak için önce bir örnek üzerinde çalışalım. Koşullu oluşturma ile, yalnızca koşul karşılandığında çıktı almak istiyoruz ve koşullu kontrol if, if-else, if-else-if, show, vb. Yardımıyla yapılır.

v-eğer

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

Output

Yukarıdaki örnekte, mesajla bir düğme ve iki h1 etiketi oluşturduk.

Show adlı bir değişken bildirilir ve bir true değeriyle başlatılır. Düğmenin yakınında görüntülenir. Düğmeye tıklandığında, bir yöntem çağırıyoruzshowdatagöster değişkeninin değerini değiştirir. Bu, düğmeye tıklandığında show değişkeninin değerinin doğrudan yanlışa ve yanlıştan doğruya değişeceği anlamına gelir.

Aşağıdaki kod parçacığında gösterildiği gibi h1 etiketine if atadık.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

Şimdi yapacağı şey, show değişkeninin değerini kontrol edecek ve eğer doğruysa h1 etiketi görüntülenecektir. Show değişkeninin değeri false olarak değiştiğinden, düğmeyi tıklayın ve tarayıcıda görüntüleyin, h1 etiketi tarayıcıda görüntülenmez. Yalnızca show değişkeni true olduğunda görüntülenir.

Tarayıcıdaki görüntü aşağıdadır.

Tarayıcıda kontrol edersek, gösteri yanlış olduğunda elde ettiğimiz şey budur.

Show değişkeni false olarak ayarlandığında, h1 etiketi DOM'den kaldırılır.

Değişken doğru olduğunda gördüğümüz şey budur. Show değişkeni true olarak ayarlandığında h1 etiketi DOM'a geri eklenir.

v-başka

Aşağıdaki örnekte, ikinci h1 etiketine v-else ekledik.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-else, aşağıdaki kod parçacığı kullanılarak eklenir.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

Şimdi, eğer gösteri doğruysa “This is h1 tag” görüntülenecek ve yanlışsa “This is h2 tag”görüntülenecek. Tarayıcıda alacağımız şey bu.

Yukarıdaki ekran, show değişkeninin doğru olduğu zamandır. V-else'i eklediğimiz için ikinci ifade mevcut değil. Şimdi, butona tıkladığımızda show değişkeni yanlış olacak ve ikinci ifade aşağıdaki ekran görüntüsünde gösterildiği gibi görüntülenecektir.

v-şov

v-show, v-if ile aynı şekilde davranır. Ayrıca, kendisine atanan koşula göre öğeleri gösterir ve gizler. V-if ve v-show arasındaki fark, v-if'in koşul yanlışsa HTML öğesini DOM'dan kaldırması ve koşul doğruysa geri eklemesidir. V-show öğesi gizler, eğer koşul display ile yanlışsa: yok. Koşul doğruysa, öğeyi geri gösterir. Böylelikle element her zaman dom içinde mevcuttur.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show">
            <b>V-Show:</b>
            <img src = "images/img.jpg" width = "100" height = "100" />
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-show, aşağıdaki kod parçacığı kullanılarak HTML öğesine atanır.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

Aynı değişken show'u kullandık ve doğru / yanlış olmasına bağlı olarak görüntü tarayıcıda görüntülenir.

Şimdi, show değişkeni doğru olduğundan, görüntü yukarıdaki ekran görüntüsünde gösterildiği gibidir. Düğmeye tıklayıp ekranı görelim.

Show değişkeni yanlıştır, dolayısıyla görüntü gizlidir. Öğeyi inceler ve görürsek, görüntü ile birlikte div, stil özelliği gösterimine sahip DOM'un bir parçasıdır: yukarıdaki ekran görüntüsünde görüldüğü gibi yok.

Liste Oluşturma

v-için

Şimdi liste oluşturmayı v-for yönergesi ile tartışalım.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "a in items">{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

İtems adlı bir değişken, bir dizi olarak bildirilir. Yöntemlerde, adı verilen bir yöntem vardırshowinputvaluemeyvelerin adlarını alan giriş kutusuna atanan. Yöntemde, metin kutusuna girilen meyveler, aşağıdaki kod parçası kullanılarak diziye eklenir.

showinputvalue : function(event) {
   this.items.push(event.target.value);
}

Girilen meyveleri aşağıdaki kod parçasında gösterildiği gibi görüntülemek için v-for kullandık. V-for, dizide bulunan değerleri yinelemeye yardımcı olur.

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

For döngüsü ile dizi üzerinde yineleme yapmak için, a'nın dizideki değerleri tuttuğu ve tüm öğeler tamamlanana kadar görüntüleneceği v-for = ”a in items” kullanmalıyız.

Output

Tarayıcıdaki çıktı aşağıdadır.

Öğeleri incelerken, tarayıcıda gösterdiği şey budur. DOM'da, li öğesine herhangi bir v-for yönergesi görmüyoruz. DOM'u herhangi bir VueJS yönergesi olmadan görüntüler.

Dizinin indeksini görüntülemek istersek, aşağıdaki kod kullanılarak yapılır.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

İndeksi almak için, aşağıdaki kod parçasında gösterildiği gibi parantez içine bir değişken daha ekledik.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

(A, dizin) içinde, a değerdir ve indexAnahtar mı. Tarayıcı ekranı şimdi aşağıdaki ekran görüntüsünde gösterildiği gibi olacaktır. Böylece, indeks yardımı ile herhangi bir özel değer görüntülenebilir.

Bu bölümde, VueJS'de bulunan geçiş ve animasyon özelliklerini tartışacağız.

Geçiş

VueJS, DOM'a eklendiğinde / güncellendiğinde HTML öğelerine geçiş uygulamak için çeşitli yollar sağlar. VueJS, geçiş gerektiren öğenin etrafına sarılması gereken yerleşik bir geçiş bileşenine sahiptir.

Sözdizimi

<transition name = "nameoftransition">
   <div></div>
</transition>

Geçişin işleyişini anlamak için bir örnek ele alalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Show değişkeninin değerini yanlışa doğru ve tersi olarak değiştirebileceğimiz clickme adlı bir düğme oluşturulmuştur. Varp tagmetin öğesini yalnızca değişken doğruysa gösterir. Aşağıdaki kod parçasında gösterildiği gibi p etiketini geçiş öğesi ile sardık.

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

Geçişin adı fade. VueJS, geçiş için bazı standart sınıflar sağlar ve sınıfların önüne geçişin adı verilir.

Aşağıda, geçiş için bazı standart sınıflar verilmiştir -

• v-enter- Bu sınıf, öğe güncellenmeden / eklenmeden önce çağrılır. Başlangıç ​​durumu.

• v-enter-active- Bu sınıf, geçiş aşamasına girmek için gecikme, süre ve hareket hızı eğrisini tanımlamak için kullanılır. Bu, tüm için aktif durumdur ve sınıf, giriş aşamasının tamamı boyunca kullanılabilir.

• v-leave - Ayrılma geçişi tetiklendiğinde eklendi, kaldırıldı.

• v-leave-active- Ayrılma aşamasında uygulanır. Geçiş tamamlandığında kaldırılır. Bu sınıf, çıkış aşamasında gecikme, süre ve hareket hızı eğrisini uygulamak için kullanılır.

Yukarıdaki sınıfların her birine geçişin adı eklenecektir. Geçişin adını fade olarak verdik, dolayısıyla sınıfların adı.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

Aşağıdaki kodda tanımlanmıştır.

<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0
   }
</style>

.Fade_enter_active ve .fade_leave_active birlikte tanımlanır ve başlangıçta ve çıkış aşamasında bir geçiş uygular. Opaklık özelliği 2 saniyede 0 olarak değiştirilir.

Süre, .fade_enter_active ve .fade_leave_active'de tanımlanır. Son aşama .fade_enter, .fade_leave_to'da tanımlanır.

Tarayıcıdaki görüntü aşağıdaki gibidir.

Düğmeye tıklandığında metin iki saniye içinde kaybolur.

İki saniye sonra metin tamamen kaybolacaktır.

Bir görüntünün olduğu ve düğmeye tıklandığında x ekseninde kaydırıldığı başka bir örneği ele alalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Geçişin adı shiftx. Aşağıdaki kod parçası kullanılarak x eksenindeki görüntüyü 100 piksel kaydırmak için bir dönüştürme özelliği kullanılır.

<style>
   .shiftx-enter-active, .shiftx-leave-active {
      transition: all 2s ease-in-out;
   }
   .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
      transform :  translateX(100px);
   }
</style>

Aşağıdaki çıktıdır.

Düğmeye tıklandığında, resim aşağıdaki ekran görüntüsünde gösterildiği gibi 100px sağa doğru kayacaktır.

Animasyon

Animasyonlar, geçişte olduğu gibi uygulanır. Animasyonda, efektin gerçekleşmesi için bildirilmesi gereken sınıflar da vardır.

Animasyonun nasıl çalıştığını görmek için bir örnek ele alalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Animasyonu uygulamak için, geçişle aynı sınıflar vardır. Yukarıdaki kodda, aşağıdaki kod parçasında gösterildiği gibi p etiketi içine alınmış bir resmimiz var.

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>

Geçişin adı shiftx. Uygulanan sınıf aşağıdaki gibidir -

<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

Sınıfın önüne geçiş adı, yani shiftx-enter-active ve .shiftx-allow-active gelir. Animasyon,% 0 ile% 100 arasındaki anahtar karelerle tanımlanır. Aşağıdaki kod parçasında gösterildiği gibi anahtar karelerin her birinde tanımlanan bir dönüşüm vardır.

@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

Aşağıdaki çıktıdır.

Düğmeye tıklandığında 0'dan 360 dereceye döner ve kaybolur.

Özel Geçiş Sınıfları

VueJS, geçiş öğesine öznitelikler olarak eklenebilecek özel sınıfların bir listesini sağlar.

• enter-class
• enter-active-class
• leave-class
• leave-active-class

Animate.css gibi harici bir CSS kitaplığı kullanmak istediğimizde temelde özel sınıflar devreye girer.

Misal

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Example</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

Çıktı

Çıktı

Çıktı

Yukarıdaki kodda uygulanan iki animasyon vardır. Bir enter-aktif-sınıf = "hareketli salıncak" ve bir başka aktif-bırak-sınıf = "hareketli sıçramaIn". Üçüncü parti kütüphaneden uygulanacak animasyon için özel animasyon sınıfları kullanıyoruz.

Açık Geçiş Süresi

VueJS kullanarak element üzerine geçiş ve animasyon uygulayabiliriz. Vue, animasyonun veya geçişin yapılıp yapılmadığını algılamak için geçiş sonu ve animasyon sonu olayını bekler.

Bazen geçiş gecikmeye neden olabilir. Bu gibi durumlarda süreyi aşağıdaki şekilde açıkça uygulayabiliriz.

<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>

Süre özelliğini, yukarıda gösterildiği gibi geçiş öğesinde a: ile kullanabiliriz. Giriş ve çıkış süresinin ayrı ayrı belirtilmesi gerektiğinde yukarıdaki kod parçasında gösterildiği gibi yapılabilir.

JavaScript Kancaları

Geçiş sınıfları, JavaScript olaylarını kullanan yöntemler olarak adlandırılabilir. Daha iyi anlamak için bir örnek ele alalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki örnekte, geçiş elemanı üzerinde js yöntemlerini kullanarak animasyon gerçekleştiriyoruz.

Geçiş yöntemleri aşağıdaki şekilde uygulanır -

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

Eklenen bir önek var v-onve yöntemin çağrıldığı olayın adı. Yöntemler, Vue örneğinde aşağıdaki gibi tanımlanır -

methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

Bu yöntemlerin her birinde gerekli geçiş uygulanır. Düğmeye tıklandığında ve ayrıca animasyon tamamlandığında uygulanan bir opaklık animasyonu vardır. Animasyon için üçüncü taraf kitaplığı kullanılır.

Geçiş v-bind: css = "false" üzerine eklenen bir özellik vardır ve bu, Vue'nun bunun bir JavaScript geçişi olduğunu anlaması için yapılır.

İlk Görüntülemede Geçiş

Başlangıçta animasyon eklemek için, geçiş elemanına 'görünme' özelliğini eklememiz gerekir.

Daha iyi anlamak için bir örneğe bakalım.

Misal

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h1>Swing - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation Example</h1>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, animate.css kütüphanesinden üç farklı animasyon kullandık. Geçiş elemanına görünme ekledik.

Yukarıdaki kod çalıştırıldığında, tarayıcıda aşağıdaki çıktı alınacaktır.

Bileşenlerde Animasyon

Aşağıdaki kodu kullanarak bileşenler için geçişi sarmalayabiliriz. Burada dinamik bileşen kullandık.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id = "databinding" style = "text-align:center;">
         <transition  appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated wobble">
            <component v-bind:is = "view"></component>
         </transition>
      </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;">Animation on Components</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Çıktı

Yönergeler, VueJS'ye işleri belirli bir şekilde yapma talimatıdır. V-if, v-show, v-else, v-for, v-bind, v-model, v-on, vb. Gibi yönergeleri daha önce görmüştük.

Bu bölümde özel direktiflere bir göz atacağız. Bileşenler için yaptığımıza benzer küresel direktifler oluşturacağız.

Sözdizimi

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

Vue.directive kullanarak bir yönerge oluşturmamız gerekiyor. Direktifin adını yukarıda gösterildiği gibi alır. Direktiflerin işleyişinin ayrıntılarını göstermek için bir örnek ele alalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle>VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               e1.style.color = "red";
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

Bu örnekte, özel bir yönerge oluşturduk changestyle aşağıdaki kod parçasında gösterildiği gibi.

Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      e1.style.color = "red";
      e1.style.fontSize = "30px";
   }
});

Aşağıdaki değişim stilini bir div'e atıyoruz.

<div v-changestyle>VueJS Directive</div>

Tarayıcıda görürsek, VueJs Direktifi metnini kırmızı renkte gösterecek ve yazı tipi boyutu 30px'e yükseltilecektir.

Çıktı

Direktifin bir parçası olan bind yöntemini kullandık. Üç argüman alıre1, özel direktifin uygulanması gereken öğe. Bağlama, özel yönergeye aktarılan argümanlara benzer, örneğin v-changestyle = ”{color: 'green'}”, burada yeşil, bağlama argümanında okunacak ve vnode öğedir, yani düğüm adı.

Bir sonraki örnekte, tüm argümanları teselli ettik ve her birinin hangi ayrıntıları verdiğini gösteriyor.

Aşağıda, özel yönergeye iletilen bir değere sahip bir örnek verilmiştir.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle = "{color:'green'}">VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               console.log(binding.value.color);
               console.log(vnode);
               e1.style.color=binding.value.color;
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

Çıktı

Metnin rengi yeşile değiştirilir. Değer, aşağıdaki kod parçası kullanılarak iletilir.

<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      console.log(binding.value.color);
      console.log(vnode);
      e1.style.color=binding.value.color;
      e1.style.fontSize = "30px";
   }
});

Filtreler

VueJS, metin biçimlendirmeye yardımcı olan filtreleri destekler. V-bind ve enterpolasyonlarla ({{}}) birlikte kullanılır. Filtreler için JavaScript ifadesinin sonunda bir boru sembolüne ihtiyacımız var.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input  v-model = "name" placeholder = "Enter Name" /><br/>
         <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name : ""
            },
            filters : {
               countletters : function(value) {
                  return value.length;
               }
            }
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, basit bir filtre sayaçları oluşturduk. Sayaç filtresi, metin kutusuna girilen karakterlerin sayısını sayar. Filtrelerden yararlanmak için aşağıdaki kod parçasıyla filter özelliğini kullanmamız ve kullanılan filtreyi tanımlamamız gerekir.

filters : {
   countletters : function(value) {
      return value.length;
   }
}

Yöntemi tanımlıyoruz countletters ve girilen dizenin uzunluğunu döndürmek.

Ekranda filtreyi kullanmak için boru operatörünü ve filtrenin adını kullandık, yani countletters.

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>

Tarayıcıdaki görüntü aşağıdadır.

Aşağıdaki kod parçasını kullanarak filtreye argümanlar da iletebiliriz.

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>

Şimdi countletters üç parametresi olacak, yani message, a1, and a2.

Aşağıdaki kod parçasını kullanarak enterpolasyona birden çok filtre de iletebiliriz.

<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>

Filtre özelliğinde countlettersA ve countlettersB iki yöntem olacak ve countlettersA ayrıntıları aktaracak countlettersB.

VueJS'de yerleşik bir yönlendirici özelliği yoktur. Yüklemek için bazı ek adımlar izlememiz gerekiyor.

CDN'den Doğrudan İndirme

Vue-yönlendiricinin en son sürümü şu adreste mevcuttur: https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com, npm tabanlı cdn bağlantıları sağlar. Yukarıdaki bağlantı her zaman en son sürüme güncellenir. İndirip barındırabilir ve aşağıdaki gibi vue.js ile birlikte bir komut dosyası etiketi ile kullanabiliriz -

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

NPM'yi kullanma

Vue yönlendiriciyi kurmak için aşağıdaki komutu çalıştırın.

npm  install vue-router

GitHub'ı kullanma

Depoyu GitHub'dan aşağıdaki gibi klonlayabiliriz -

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

Vue-router.js kullanarak basit bir örnekle başlayalım.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Output

Yönlendirme ile başlamak için vue-router.js dosyasını eklememiz gerekir. Kodu buradan alhttps://unpkg.com/vue-router/dist/vue-router.js ve vue-router.js dosyasına kaydedin.

Komut dosyası, vue.js'den sonra şu şekilde eklenir -

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

Gövde bölümünde aşağıdaki gibi tanımlanan bir yönlendirici bağlantısı vardır -

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link>kullanıcıya görüntülenecek HTML içeriğine gitmek için kullanılan bir bileşendir. To özelliği hedeftir, yani görüntülenecek içeriklerin seçileceği kaynak dosyadır.

Yukarıdaki kod parçasında iki yönlendirici bağlantısı oluşturduk.

Yönlendiricinin başlatıldığı komut dosyası bölümüne bir göz atın. Aşağıdaki gibi oluşturulan iki sabit vardır -

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

Yönlendirici bağlantısı tıklandığında gösterilmesi gereken şablonları vardır.

Ardından, URL'de görüntülenecek yolu tanımlayan yollar sabitidir.

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

Rotalar, yolu ve bileşeni tanımlar. Yol ie/route1 kullanıcı yönlendirici bağlantısına tıkladığında URL'de görüntülenecektir.

Bileşen, görüntülenecek şablon adlarını alır. Yolların yolu, mülke yönlendirici bağlantısıyla eşleşmelidir.

Örneğin, <yönlendirici bağlantısı to = ”path here”> </router-link>

Ardından, örnek aşağıdaki kod parçası kullanılarak VueRouter'da oluşturulur.

const router = new VueRouter({
   routes // short for `routes: routes`
});

VueRouter yapıcısı yolları parametre olarak alır. Yönlendirici nesnesi, aşağıdaki kod parçası kullanılarak ana vue örneğine atanır.

var vm = new Vue({
   el: '#app',
   router
});

Örneği yürütün ve tarayıcıdaki ekranı görün. Yönlendirici bağlantısını incelerken ve kontrol ederken, aşağıdaki ekran görüntüsünde gösterildiği gibi aktif öğeye sınıf eklediğini göreceğiz.

Eklenen sınıf class = “router-link-exact-active router-link-active”. Aktif bağlantı, sınıfı yukarıdaki ekran görüntüsünde gösterildiği gibi alır. Dikkat edilmesi gereken bir diğer nokta da <yönlendirici bağlantısı> etiket olarak işleniyor.

Yönlendirici Bağlantısı için aksesuarlar

<router-link> 'e iletilecek daha fazla özellik görelim.

-e

Bu, <yönlendirici bağlantı> 'ya verilen hedef yoldur. Tıklandığında, to değeri dahili olarak router.push () öğesine iletilecektir. Değerin bir dize veya konum nesnesi olması gerekir. Bir nesneyi kullanırken, onu örneğin 2'de gösterildiği gibi bağlamamız gerekir.

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

Örnek 3'ün çıktısı aşağıdadır.

URL yolunda name = Tery, sorgu dizesinin bir parçasıdır. Örneğin: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery

yerine koymak

Yönlendirici bağlantısına değiştirme eklemek, router.replace() onun yerine router.push(). Değiştir ile, navigasyon geçmişi saklanmaz.

Example

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

eklemek

<Yönlendirici bağlantısı> <yönlendirici bağlantısı> öğesine ekleme eklemek, yolu göreli hale getirecektir.

Yol / rota1 ile yönlendirici bağlantısından yönlendirici bağlantı yolu / yol2'ye gitmek istersek, tarayıcıda yolu / route1 / route2 olarak gösterecektir.

Example

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

etiket

Şu anda <router-link> bir etiket olarak işler. Başka bir etiket olarak işlemek istersek, tag = ”tagname” kullanarak aynısını belirtmemiz gerekir;

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Etiketi span olarak belirledik ve bu tarayıcıda görüntülenen şeydir.

Şimdi görüntülenen etiket bir span etiketidir. Navigasyon için yönlendirici bağlantısına tıkladığımızda yine de tıklamayı göreceğiz.

aktif sınıf

Varsayılan olarak, yönlendirici bağlantısı etkin olduğunda eklenen etkin sınıf yönlendirici bağlantısı etkindir. Aşağıdaki kodda gösterildiği gibi ayarlayarak sınıfın üzerine yazabiliriz.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Kullanılan sınıf, active_class = ”_active” dir. Bu, tarayıcıda görüntülenen çıktıdır.

tam aktif sınıf

Uygulanan varsayılan tam etkin sınıf, yönlendirici-bağlantı-tam-etkin'dir. Tam aktif sınıf kullanarak bunun üzerine yazabiliriz.

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Tarayıcıda görüntülenen budur.

Etkinlik

Şu anda, yönlendirici bağlantısı için varsayılan olay tıklama olayıdır. Event özelliğini kullanarak aynısını değiştirebiliriz.

Example

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Şimdi, yönlendirici bağlantısının üzerine fareyle geldiğimizde, aşağıdaki tarayıcıda gösterildiği gibi gezinecektir. Yönlendirici bağlantısının üzerine gelin ve gezinmenin değiştiğini göreceğiz.

Karışımlar temelde bileşenlerle kullanılmalıdır. Yeniden kullanılabilir kodu bileşenler arasında paylaşırlar. Bir bileşen mixin kullandığında, tüm mixin seçenekleri bileşen seçeneklerinin bir parçası haline gelir.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
         var myMixin = {
            created: function () {
               this.startmixin()
            },
            methods: {
               startmixin: function () {
                  alert("Welcome  to mixin example");
               }
            }
         };
         var Component = Vue.extend({
            mixins: [myMixin]
         })
         var component = new Component();
      </script>
   </body>
</html>

Çıktı

Bir karışım ve bir bileşen örtüşen seçenekler içerdiğinde, aşağıdaki örnekte gösterildiği gibi birleştirilirler.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var mixin = {
            created: function () {
               console.log('mixin called')
            }
         }
         new Vue({
            mixins: [mixin],
            created: function () {
               console.log('component called')
            }
         });
      </script>
   </body>
</html>

Artık mixin ve vue örneği aynı yönteme sahip. Konsolda gördüğümüz çıktı budur. Görüldüğü gibi, vue ve mixin seçeneği birleştirilecek.

Yöntemlerde aynı işlev adına sahip olursak, ana vue örneği öncelik kazanır.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var mixin = {
            methods: {
               hellworld: function () {
                  console.log('In HelloWorld');
               },
               samemethod: function () {
                  console.log('Mixin:Same Method');
               }
            }
         };
         var vm = new Vue({
            mixins: [mixin],
            methods: {
               start: function () {
                  console.log('start method');
               },
               samemethod: function () {
                  console.log('Main: same method');
               }
            }
         });
         vm.hellworld();
         vm.start();
         vm.samemethod();
      </script>
   </body>
</html>

Mixin'in helloworld ve samemethod işlevlerinin tanımlandığı bir method özelliğine sahip olduğunu göreceğiz. Benzer şekilde, vue örneği, yine start ve samemethod iki yöntemin tanımlandığı bir method özelliğine sahiptir.

Aşağıdaki yöntemlerin her biri denir.

vm.hellworld(); // In HelloWorld
vm.start(); // start method
vm.samemethod(); // Main: same method

Yukarıda görüldüğü gibi helloworld, start ve samemethod işlevini adlandırdık. samemethod mixin'de de mevcuttur, ancak aşağıdaki konsolda görüldüğü gibi öncelik ana örneğe verilecektir.

Bileşenlerini ve kullanımını gördük. Örneğin, proje genelinde yeniden kullanılması gereken bir içeriğimiz var. Aynı şeyi bir bileşenle dönüştürebilir ve kullanabiliriz.

Basit bir bileşen örneğine göz atalım ve render fonksiyonunun bunun içinde ne yapması gerektiğini görelim.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1>Hello World</h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Aşağıdaki ekran görüntüsünde gösterildiği gibi Hello World yazdıran basit bir bileşen örneğini düşünün.

Şimdi, bileşeni yeniden kullanmak istersek, bunu tekrar yazdırarak yapabiliriz. Örneğin,

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

Ve çıktı aşağıdaki gibi olacaktır.

Ancak, şimdi bileşende bazı değişikliklere ihtiyacımız var. Aynı metnin basılmasını istemiyoruz. Nasıl değiştirebiliriz? Bileşenin içine bir şey yazmamız durumunda, dikkate alınacak mı?

Aşağıdaki örneği ele alalım ve ne olacağını görelim.

<div id = "component_test">
   <testcomponent>Hello Jai</testcomponent>
   <testcomponent>Hello Roy</testcomponent>
   <testcomponent>Hello Ria</testcomponent>
   <testcomponent>Hello Ben</testcomponent>
</div>

Çıktı, daha önce gördüğümüzle aynı kalır. Metni istediğimiz gibi değiştirmez.

Bileşen, slots. Kullanalım ve istediğimiz sonuçları alıp almayacağımızı görelim.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent>Hello Jai</testcomponent>
         <testcomponent>Hello Roy</testcomponent>
         <testcomponent>Hello Ria</testcomponent>
         <testcomponent>Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1><slot></slot></h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Yukarıdaki kodda görüldüğü gibi, şablona slot ekledik, bu nedenle artık aşağıdaki ekran görüntüsünde gösterildiği gibi bileşenin içine gönderilecek değeri alıyor.

Şimdi rengini ve boyutunu değiştirmek istediğimizi düşünelim. Örneğin, şu anda h1 etiketi kullanıyoruz ve HTML etiketini aynı bileşen için p etiketi veya div etiketi olarak değiştirmek istiyoruz. Bu kadar çok değişikliği gerçekleştirme esnekliğine nasıl sahip olabiliriz?

Bunu render fonksiyonu yardımıyla yapabiliriz. Oluşturma işlevi, bileşeni dinamik hale getirmeye ve onu ortak kılarak ve aynı bileşeni kullanarak bağımsız değişkenleri geçmeye yardımcı olarak gerektiği şekilde kullanmaya yardımcı olur.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
         <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
         <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
         <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },
            props:{
               elementtype:{
                  attributes:String,
                  required:true
               }
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Yukarıdaki kodda, bileşeni değiştirdik ve aşağıdaki kod parçasını kullanarak props özelliği ile render işlevini ekledik.

Vue.component('testcomponent',{
   render :function(createElement){
      var a = this.elementtype.split(",");
      return createElement(a[0],{
         attrs:{
            id:a[3],
            style:"color:"+a[1]+";font-size:"+a[2]+";"
         }
      },
      this.$slots.default
      )
   },
   props:{
      elementtype:{
         attributes:String,
         required:true
      }
   }
});

Sahne şuna benzer.

props:{
   elementtype:{
      attributes:String,
      required:true
   }
}

String türünün öznitelik alanını alan elementtype adında bir özellik tanımladık. Alanın zorunlu olduğunu belirten başka bir zorunlu alan.

Render işlevinde, aşağıdaki kod parçasında görüldüğü gibi elementtype özelliğini kullandık.

render :function(createElement){
   var a = this.elementtype.split(",");
   return createElement(a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
   )
}

Oluşturma işlevi, bağımsız değişken olarak createElement öğesini alır ve aynı şeyi döndürür. CreateElement, DOM öğesini JavaScript'tekiyle aynı şekilde oluşturur. Ayrıca, attrs alanındaki değerleri kullanarak elementtype'ı virgülle böldük.

CreateElement, oluşturulacak elementtag olarak ilk parametreyi alıyor. Aşağıdaki kod parçası kullanılarak bileşene aktarılır.

<testcomponent  :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

Bileşenin, yukarıda gösterildiği gibi sahne alanını alması gerekir. Şununla başlar: ve sahne donanımının adı. Burada element etiketini, rengini, yazı tipi boyutunu ve elementin kimliğini aktarıyoruz.

Render işlevinde, createElement'te virgülle bölüyoruz, bu nedenle, aşağıdaki kod parçasında gösterildiği gibi createElemet'e verilen ilk öğe elementtag'dir.

return createElement(
   a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
)

a[0]html öğe etiketidir. Sonraki parametre, öğe etiketinin nitelikleridir. Aşağıdaki kod parçasındaki attr alanında tanımlanırlar.

attrs:{
   id:a[3],
   style:"color:"+a[1]+";font-size:"+a[2]+";"
}

Element etiketi için iki nitelik tanımladık - id ve style. İd'ye virgülle ayırdıktan sonra sahip olduğumuz değer olan [3] 'ü geçiyoruz. Stil kullanarak renk ve yazı tipi boyutunu tanımladık.

Sonuncusu yuvadır, bu, aşağıdaki kod parçasında bileşende verdiğimiz mesajdır.

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

Aşağıdaki kod parçasını kullanarak createElement içinde yazdırılacak metni tanımladık.

this.$slots.default

Bileşen alanında atanan varsayılanı alır.

Tarayıcıda aldığımız çıktı aşağıdadır.

Elemanlar ayrıca yapıyı gösterir. Bunlar tanımladığımız bileşenler -

<div id = "component_test">
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
   <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>

VueJS, dinamik olarak eklenen özelliklere reaktivite eklemek için seçenekler sunar. Zaten vue örneğini oluşturduğumuzu ve watch özelliğini eklememiz gerektiğini düşünün. Aşağıdaki gibi yapılabilir -

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

Veri nesnesinde 1 olarak tanımlanan bir özellik sayacı var. Düğmeye tıkladığımızda sayaç artar.

Vue örneği zaten oluşturuldu. Ona saat eklemek için aşağıdaki gibi yapmamız gerekiyor -

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

Vue örneğinin dışına saat eklemek için $ watch kullanmamız gerekiyor. Counter özelliği için değer değişikliğini gösteren bir uyarı eklendi. Sayaç değerini 20'ye ayarlayan setTimeout gibi bir zamanlayıcı işlevi de eklenmiştir.

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

Sayaç her değiştirildiğinde, izleme yönteminden gelen uyarı aşağıdaki ekran görüntüsünde gösterildiği gibi tetiklenecektir.

VueJS, özellik eklemeyi ve silmeyi algılayamaz. En iyi yol, her zaman Vue örneğinde reaktif olması gereken özellikleri bildirmektir. Çalışma zamanında özellikler eklememiz gerektiğinde, Vue global, Vue.set ve Vue.delete yöntemlerini kullanabiliriz.

Vue.set

Bu yöntem, bir nesne üzerinde bir özellik ayarlamaya yardımcı olur. Vue'nun özellik eklemelerini tespit edemediği sınırlamasını aşmak için kullanılır.

Sözdizimi

Vue.set( target, key, value )

Nerede,

hedef: Bir nesne veya dizi olabilir

anahtar: Bir dizi veya sayı olabilir

değer: Herhangi bir tür olabilir

Bir örneğe bakalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, başlangıçta aşağıdaki kod parçası kullanılarak oluşturulan bir değişken myproduct vardır.

var myproduct = {"id":1, name:"book", "price":"20.00"};

Vue örneğindeki veri nesnesine aşağıdaki gibi verilir -

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

Vue örneği oluşturulduktan sonra myproduct dizisine bir özellik daha eklemek istiyoruz. Aşağıdaki gibi yapılabilir -

vm.products.qty = "1";

Çıktıyı konsolda görelim.

Yukarıda görüldüğü gibi ürünlerde miktar eklenir. Temel olarak reaktivite ekleyen get / set yöntemleri id, isim ve fiyat için mevcuttur ve qty için mevcut değildir.

Sadece vue nesnesi ekleyerek reaktiviteye ulaşamayız. VueJS çoğunlukla tüm özelliklerinin başlangıçta oluşturulmasını ister. Ancak daha sonra eklememiz gerekirse Vue.set'i kullanabiliriz. Bunun için vue global yani Vue.set kullanarak ayarlamamız gerekiyor.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Aşağıdaki kod parçasını kullanarak qty'yi diziye eklemek için Vue.set'i kullandık.

Vue.set(myproduct, 'qty', 1);

Vue nesnesini teselli ettik ve aşağıdaki çıktı.

Şimdi, Vue.set kullanılarak eklenen qty için get / set'i görebiliriz.

Vue.delete

Bu işlev özelliği dinamik olarak silmek için kullanılır.

Misal

Vue.delete( target, key )

Nerede,

hedef: Bir nesne veya dizi olabilir

anahtar: Bir dize veya sayı olabilir

Herhangi bir özelliği silmek için aşağıdaki kodda olduğu gibi Vue.delete kullanabiliriz.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, aşağıdaki kod parçasını kullanarak fiyatı diziden silmek için Vue.delete'yi kullandık.

Vue.delete(myproduct, 'price');

Aşağıdaki çıktı, konsolda görüyoruz.

Silme işleminden sonra fiyat silindiği için sadece id ve adı görebiliriz. Ayrıca get / set yöntemlerinin silindiğini de fark edebiliriz.

Örnek 1: Para Birimi Dönüştürücü

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         #databinding{
            padding: 20px 15px 15px 15px;
            margin: 0 0 25px 0;
            width: auto;
            background-color: #e7e7e7;
         }
         span, option, input {
            font-size:25px;
         }
      </style>
      
      <div id = "databinding" style = "">
         <h1>Currency Converter</h1>
         <span>Enter Amount:</span><input type = "number" v-model.number = "amount" placeholder = "Enter Amount" /><br/><br/>
         <span>Convert From:</span>
         <select v-model = "convertfrom" style = "width:300px;font-size:25px;">
            <option v-for = "(a, index) in currencyfrom"  v-bind:value = "a.name">{{a.desc}}</option>
         </select>
         <span>Convert To:</span>
         <select v-model = "convertto" style = "width:300px;font-size:25px;">
            <option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
         </select><br/><br/>
         <span> {{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}</span>
      </div>
      
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               currencyfrom : [
                  {name : "USD", desc:"US Dollar"},
                  {name:"EUR", desc:"Euro"},
                  {name:"INR", desc:"Indian Rupee"},
                  {name:"BHD", desc:"Bahraini Dinar"}
               ],
               convertfrom: "INR",
               convertto:"USD",
               amount :""
            },
            computed :{
               finalamount:function() {
                  var to = this.convertto;
                  var from = this.convertfrom;
                  var final;
                  switch(from) {
                     case "INR":
                     if (to == "USD") {
                        final = this.amount * 0.016;
                     }
                     if (to == "EUR") {
                        final = this.amount * 0.013;
                     }
                     if (to == "INR") {
                        final = this.amount;
                     }
                     if (to == "BHD") {
                        final = this.amount * 0.0059;
                     }
                     break;
                     case "USD":
                     if (to == "INR") {
                        final = this.amount * 63.88;
                     }
                     if (to == "EUR") {
                        final = this.amount * 0.84;
                     }
                     if (to == "USD") {
                        final = this.amount;
                     }
                     if (to == "BHD") {
                        final = this.amount * 0.38;
                     }
                     break;
                     case "EUR":
                     if (to == "INR") {
                        final = this.amount * 76.22;
                     }
                     if (to == "USD") {
                        final = this.amount * 1.19;
                     }
                     if (to == "EUR") {
                        final = this.amount;
                     }
                     if (to == "BHD") {
                        final = this.amount * 0.45;
                     }
                     break;
                     case "BHD":
                     if (to == "INR") {
                        final = this.amount *169.44;
                     }
                     if (to == "USD") {
                        final = this.amount * 2.65;
                     }
                     if (to == "EUR") {
                        final = this.amount * 2.22;
                     }
                     if (to == "BHD") {
                        final = this.amount;
                     }
                     break
                  }
                  return final;
               }
            }
         });
      </script>
   </body>
</html>

Çıktı (USD'ye Dönüştürme)

Çıktı: BHD'ye Dönüştürme

Explanation- Yukarıdaki örnekte, bir para biriminin değerini diğer para biriminin seçilen değerine dönüştüren bir para birimi dönüştürücü oluşturduk. İki para birimi açılır menüsü oluşturduk. Metin kutusuna dönüştürülecek miktarı girdiğimizde, aynı şey dönüşümden sonra aşağıda görüntülenir. Para birimi dönüştürme için gerekli hesaplamayı yapmak için hesaplanan özelliği kullanıyoruz.

Örnek 2: Müşteri Ayrıntıları

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         #databinding{
            padding: 20px 15px 15px 15px;
            margin: 0 0 25px 0;
            width: auto;
         }
         span, option, input {
            font-size:20px;
         }
         .Table{
            display: table;
            width:80%;
         }
         .Title{
            display: table-caption;
            text-align: center;
            font-weight: bold;
            font-size: larger;
         }
         .Heading{
            display: table-row;
            font-weight: bold;
            text-align: center;
         }
         .Row{
            display: table-row;
         }
         .Cell{
            display: table-cell;
            border: solid;
            border-width: thin;
            padding-left: 5px;
            padding-right: 5px;
            width:30%;
         }
      </style>
      
      <div id = "databinding" style = "">
         <h1>Customer Details</h1>
         <span>First Name</span>
         <input type = "text" placeholder = "Enter First Name" v-model = "fname"/>
         <span>Last Name</span>
         <input type = "text" placeholder = "Enter Last Name" v-model = "lname"/>
         <span>Address</span>
         <input type = "text" placeholder = "Enter Address" v-model = "addr"/>
         <button v-on:click = "showdata" v-bind:style = "styleobj">Add</button>
         <br/>
         <br/>
         <customercomponent
            v-for = "(item, index) in custdet"
            v-bind:item = "item"
            v-bind:index = "index"
            v-bind:itr = "item"
            v-bind:key = "item.fname"
            v-on:removeelement = "custdet.splice(index, 1)">
         </customercomponent>
      </div>
      
      <script type = "text/javascript">
         Vue.component('customercomponent',{
            template : '<div class = "Table"><div class = "Row"  v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.lname}}</p></div><div class = "Cell"><p>{{itr.addr}}</p></div><div class = "Cell"><p><button v-on:click = "$emit(\'removeelement\')">X</button></p></div></div></div>',
            props: ['itr', 'index'],
            data: function() {
               return {
                  styleobj : {
                     backgroundColor:this.getcolor(),
                     fontSize : 20
                  }
               }
            },
            methods:{
               getcolor : function() {
                  if (this.index % 2) {
                     return "#FFE633";
                  } else {
                     return "#D4CA87";
                  }
               }
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
               fname:'',
               lname:'',
               addr : '',
               custdet:[],
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods :{
               showdata : function() {
                  this.custdet.push({
                     fname: this.fname,
                     lname: this.lname,
                     addr : this.addr
                  });
                  this.fname = "";
                  this.lname = "";
                  this.addr = "";
               }
            }
         });
      </script>
   </body>
</html>

Çıktı

Silme sonrası çıktı

Explanation- Yukarıdaki örnekte, girilecek üç metin kutumuz var - Ad, Soyad ve Adres. Metin kutularına girilen değerleri bir tablo formatında silme düğmesi ile ekleyen bir ekle düğmesi vardır.

Tablo formatı bileşenler kullanılarak oluşturulur. Tıklama düğmesi, elemeti diziden silmek için emit olayını kullanarak üst bileşenle etkileşime girer. Girilen değerler dizide saklanır ve aynısı, alt bileşen ile paylaşılır.prop Emlak.