VueJS - Etkinlikler

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 fareyle çekildiğinde 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 çağrılır 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. Aşağıdakiler mevcut değiştiricilerdir -

.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ıklatıldığında atanan herhangi bir eylem öğesini yürütmesini veya gerçekleştirmesini engellediği için 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 adını 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ğrı yapan 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.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved