[ Laravel & Vue.JS ] 9.Video: “v-on direktifi ve events handling hadisesi, metod oluşturma, keyboard olay dinleyicisi ve dahası... ”



2 dakikalık okuma
April 3, 2019

Bu video’da v-on direktifini ve onunla ilişkili konuları detaylı bir şekilde ele aldım. Bunlar:

  • Vue.js içerisinde olay yönetimi(event handling) meselesi,
  • “v-on” ile DOM’daki olayları yakalama,
  • Belli başlı v-on olayları,
  • “v-on” direktifinin kısayolu ve kullanımı,
  • Vue.js’te metod oluşturma,
  • event modifiers(olay değiştiricileri) “.prevent” Javascript’teki karşılığı event.preventDefault(),
  • Keyboard olay dinleyicisi direktifi ve kullanımı,

10 dakika sınırı olmasaydı “computed properties” meselesine de girecektim. Artık bir sonraki videonun konusu olacak…

Buyrun videomuz da burada:


Video Özeti

“v-on” direktifi hakkında:

Artık Vue.js içerisinde olay yönetimi(event-handling) hadisesine bu direktif ile girmiş olacağız. Kısaca v-on direktifi DOM’daki olayları yakalamak için kullanır.

Mesela bu olaylar şunlar olabilir:

  • Bir input elementi içinde enter tuşuna basıldığında,
  • Ya da bir input elementinde değişiklik yapıldığında,

gibi..

v-on kullanımı

“v-on” direktifinin kısayolu:

v-on direktifi kısayolu

Vue.js’te Metod Oluşturma:

Aşağıdaki örneğe bakarsanız methods {} arasına metodlarımızı yazdığımızı göreceksiniz:

const app = new Vue({
    el: '#app',

    data   : {
        sayac: 0
    },
    methods: {
        artir: function () {
            return this.sayac++
        },
      metod_adi2: function (parametre1, parametre2) {
         //kodlar
      }
    ...
    ...

    }
});

<div id="app">
    <div class="container">

       <button @click="artir()">Sayacı artır</button>

        <br/>
        {{sayac}}

    </div>
</div>

“v-on” direktifi için event modifier(olay modifiye ediciler):

Bunlar:

  • .prevent
  • .stop
  • .capture
  • .self

diye sayabiliriz; ama en çok kullanacağımız .prevent olacaktır. Javascript’teki event.preventDefault() ifadesine karışılık gelir.

vue.js event modifiers - .prevent

vue.js event modifiers - .prevent form

Key Modifiers

vue.js key modifiers


Etiketler: