Vue.JS Klavye Eventleri

Vue.js'te klavye olaylarını dinlemek için @keydown, @keyup veya @keypress gibi direktifleri kullanabilirsiniz. Bu direktifler, kullanıcının klavyeden bir tuşa basma veya tuşu bırakma gibi eylemlerini dinlemek için kullanılır. İşte bu olayları dinlemek için birkaç örnek:

1. @keydown: Kullanıcının klavyeden bir tuşa bastığında tetiklenir.

    
     <template> <div> <input type="text" @keydown="handleKeyDown"> </div> </template> <script>  export default { methods: { handleKeyDown(event) { console.log('Basılan Tuş:', event.key); } } }  </script>  
    
    

   Canlı Dene Kopyala

2. @keyup: Kullanıcının klavyeden bir tuşu bıraktığında tetiklenir.

    
     <template> <div> <input type="text" @keyup="handleKeyUp"> </div> </template> <script>  export default { methods: { handleKeyUp(event) { console.log('Bırakılan Tuş:', event.key); } } }  </script>  
    
    

   Canlı Dene Kopyala

3. @keypress: Kullanıcının klavyeden bir tuşa basılı tuttuğunda veya bir karakter girdiğinde tetiklenir.

    
     <template> <div> <input type="text" @keypress="handleKeyPress"> </div> </template> <script>  export default { methods: { handleKeyPress(event) { console.log('Basılı Tutulan Tuş:', event.key); } } }  </script>  
    
    

   Canlı Dene Kopyala

Bu örneklerde, @keydown, @keyup ve @keypress direktifleri kullanılarak klavye olayları dinlenir ve bu olaylar tetiklendiğinde belirtilen methodlar çalıştırılır. event parametresi, olayı tetikleyen klavye olayı hakkında bilgi sağlar ve bu bilgileri kullanarak uygun işlemleri gerçekleştirebilirsiniz.