Modern web uygulamalar\u0131, kullan\u0131c\u0131larla dinamik ve sezgisel bir \u015fekilde etkile\u015fim kurma yetene\u011fi \u00fczerine kuruludur. Bir butona t\u0131klamak, bir form g\u00f6ndermek, bir \u00f6\u011feyi s\u00fcr\u00fcklemek veya bir metin kutusuna yaz\u0131 yazmak gibi eylemler, kullan\u0131c\u0131 deneyiminin temel ta\u015flar\u0131d\u0131r. Vue.js, reaktif do\u011fas\u0131 ve bile\u015fen tabanl\u0131 mimarisi sayesinde, bu t\u00fcr kullan\u0131c\u0131 etkile\u015fimlerini y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir sistem sunar. Bu makale, Vue.js’te etkinliklerin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, temelden ileri seviyeye kadar farkl\u0131 senaryolarda nas\u0131l kullan\u0131labilece\u011fini ve en iyi uygulamalar\u0131 derinlemesine inceleyecektir.<\/p>\n
Kullan\u0131c\u0131 etkile\u015fimleri, bir uygulaman\u0131n sadece statik bir bilgi g\u00f6stericisi olmaktan \u00e7\u0131k\u0131p, dinamik ve canl\u0131 bir deneyim sunmas\u0131n\u0131 sa\u011flar. Etkile\u015fim olmadan, web siteleri sadece pasif sayfalardan ibaret kal\u0131r. Vue.js gibi modern JavaScript \u00e7er\u00e7eveleri, DOM (Belge Nesne Modeli) olaylar\u0131n\u0131 soyutlayarak ve daha y\u00f6netilebilir bir aray\u00fcz sunarak bu etkile\u015fimleri basitle\u015ftirir. Vue’nun etkinlik sistemi, bile\u015fenler aras\u0131nda ileti\u015fimi sa\u011flaman\u0131n, kullan\u0131c\u0131 girdisine tepki vermenin ve uygulaman\u0131z\u0131n durumunu g\u00fcncel tutman\u0131n anahtar\u0131d\u0131r.<\/p>\n
Bu rehberde, Vue’nun temel etkinlik dinleme mekanizmas\u0131ndan ba\u015flayarak, etkinlik de\u011fi\u015ftiricilerle davran\u0131\u015flar\u0131 nas\u0131l \u00f6zelle\u015ftirebilece\u011finizi, \u00f6zel etkinliklerle bile\u015fenler aras\u0131 ileti\u015fimi nas\u0131l kurabilece\u011finizi ve son olarak ileri d\u00fczey etkinlik senaryolar\u0131n\u0131 ve en iyi uygulamalar\u0131 ke\u015ffedece\u011fiz. Amac\u0131m\u0131z, Vue.js ile etkile\u015fimli ve kullan\u0131c\u0131 dostu uygulamalar geli\u015ftirmek i\u00e7in size kapsaml\u0131 bir bilgi birikimi sunmakt\u0131r.<\/p>\n
Vue.js’te etkinlik dinlemek i\u00e7in ana ara\u00e7 \u00d6rne\u011fin, bir butona t\u0131kland\u0131\u011f\u0131nda bir fonksiyonu \u00e7a\u011f\u0131rmak i\u00e7in:<\/p>\nv-on<\/code> direktifidir. Bu direktif, DOM etkinliklerini dinlemenizi ve bir olay tetiklendi\u011finde JavaScript kodunu \u00e7al\u0131\u015ft\u0131rman\u0131z\u0131 sa\u011flar.<\/p>\nv-on Direktifi ve K\u0131saltmas\u0131<\/h4>\n
v-on<\/code> direktifi, bir HTML \u00f6\u011fesi \u00fczerinde belirli bir DOM etkinli\u011fini (\u00f6rne\u011fin click<\/code>, submit<\/code>, input<\/code>, keydown<\/code>) dinlemek i\u00e7in kullan\u0131l\u0131r. S\u00f6zdizimi v-on:event-name=\"handler\"<\/code> \u015feklindedir. Vue, geli\u015ftirme kolayl\u0131\u011f\u0131 i\u00e7in @<\/code> sembol\u00fcn\u00fc v-on:<\/code> i\u00e7in bir k\u0131saltma olarak sunar. Bu, kodunuzu daha k\u0131sa ve okunabilir hale getirir.<\/p>\n\n\n