JavaScript

kategorisine ait gönderiler

Vue.js Bileşenlerini Sayfa İçinde Doğrudan Kullanmak

30 Temmuz 2018 Pazartesi günü JavaScript başlığında

Vue.js Bileşenlerini Sayfa İçinde Doğrudan Kullanmak

Vue.js bileşenlerini webpack/nodejs aracını kullanmadan sayfa içinde oluşturmak için birkaç yöntem hali hazırda mevcut. Ben kullandığım esnek bir yöntemi paylaşacağım.

Evvela bir Vue bileşeni oluşturalım.

Vue.component('hello', {
  template: '#hello',
  props: ['message'],
})

let app = new Vue({
  el: '#app',
})

Vue bileşenini oluşturduktan sonra, Vue örneğimi oluşturup, #app ID'sine işaret ettik. Vue bileşeni oluştururken vereceğimiz ilk değer, bileşenin adıdır. İkinci değer ise bir obje alır. Burada obje içerisindeki template aşağıda göreceğimiz x-template türündeki script etiketini temsil eder. props (propertys) ise bileşenin alacağı özellikleri tanımlar.

<div id="app">
  <hello message="Merhaba dünya!" />
</div>

<script type="text/x-template" id="hello">
  <p>{{message}}</p>
</script>

Kolay gelsin, iyi çalışmalar.

1 Mayıs 2016 Pazar günü JavaScript başlığında

jQuery ile Dinamik Olarak Oluşturulan Elemente Erişmek

jQuery ile DOM'da bulunan elementlere $('.element') şeklinde kullanarak erişebiliyoruz. Fakat dinamik olarak oluşturulan elementlere erişmek için farklı bir durum söz konusu oluyor. Bunun için şu kullanım yeterli geliyor.

$('body').on('click', '.element', function(){
    console.log($(this).html())
})

Kolay gelsin.

12 Nisan 2015 Pazar günü JavaScript başlığında

Girdi Değerini Büyük Harfe Çevirmek

Merhaba, JavaScript ile girdi değerini büyük harfe çevirme ihtiyacı duydum. Daha önceden de karşılaşmıştım. Bu sefer Angular JS ile gerekti. Ama ben hepsini burada yazacağım.

<input type="text" onKeyup="this.value = this.value.replace('i','İ').toUpperCase()">

Yukarıda özellikle i harfini İ harfine değiştirdim (replace). Çünkü ingilizce karakter olan i, değiştirmediğimde I harfine çevriliyor.

jQuery ile

$(function() {
    $('input').keyup(function() {
        this.value = this.value.replace('i','İ').toUpperCase();
    });
});

Güncelleme: Yazıldıktan sonra değil de, yazıldığı anda büyük harf yazılması için şu da uygundur:

$('.buyukHarf').on('input', function(evt) {
  $(this).val(function (_, val) {
    return val.replace('i', 'İ').toUpperCase();
  });
});

AngularJS ile

$scope.girdi = $scope.girdi.replace("i", "İ").toUpperCase();

Kolay gelsin.