Vue.js Notları ve İpuçları

İçindekiler

1. Vue Örneği
2. Şablon Sözdizimi
3. Hesaplanmış Özellikler ve İzleyiciler
4. Sınıf ve Stil Bağlamaları
5. Koşullu Renderlama
6. Liste Renderlama
7. Olay İşleme
8. Form Girişi Bağlamaları
9. Bileşenler
10. Prop
11. Özel Olaylar
12. Slotlar
13. Dinamik ve Asenkron Bileşenler
14. Geçişler
15. Karışımlar
16. Direktifler
17. Filtreler
18. Eklentiler
19. Durum Yönetimi (Vuex)
20. Yönlendirme (Vue Router)

Vue Örneği

Bir Vue Örneği Oluşturma

const app = new Vue({
  el: '#app',
  data: {
    message: 'Merhaba Vue!'
  }
})

Yaşam Döngüsü Kancaları

new Vue({
  data: {
    a: 1
  },
  created() {
    console.log('Oluşturuldu!')
  },
  mounted() {
    console.log('Monte edildi!')
  },
  updated() {
    console.log('Güncellendi!')
  },
  destroyed() {
    console.log('Yok edildi!')
  }
})

Şablon Sözdizimi

Metin Enterpolasyonu

<span>Mesaj: {{ msg }}</span>

Ham HTML

<p>v-html direktifi kullanarak: <span v-html="rawHtml"></span></p>

Öznitelikler

<div v-bind:id="dinamikId"></div>

JavaScript İfadeleri

{{ number + 1 }}
{{ ok ? 'EVET' : 'HAYIR' }}
{{ message.split('').reverse().join('') }}

Hesaplanmış Özellikler ve İzleyiciler

Hesaplanmış Özellik

computed: {
  terslenmisMesaj() {
    return this.message.split('').reverse().join('')
  }
}

İzleyici

watch: {
  soru(yeniSoru, eskiSoru) {
    this.cevap = 'Yazmayı bitirmenizi bekliyorum...'
    this.gecikmisVeriAl()
  }
}

Sınıf ve Stil Bağlamaları

Sınıf Bağlama

<div v-bind:class="{ active: isActive }"></div>

Stil Bağlama

<div v-bind:style="{ color: aktifRenk, fontSize: yaziBoyutu + 'px' }"></div>

Koşullu Renderlama

v-if

<h1 v-if="muhtesem">Vue harika!</h1>
<h1 v-else>Ah hayır 😢</h1>

v-show

<h1 v-show="tamam">Merhaba!</h1>

Liste Renderlama

Dizi ile v-for

<ul id="ornek-1">
  <li v-for="eleman in elemanlar" :key="eleman.id">
    {{ eleman.mesaj }}
  </li>
</ul>

Nesne ile v-for

<ul id="v-for-nesne" class="demo">
  <li v-for="(deger, ad) in nesne">
    {{ ad }}: {{ deger }}
  </li>
</ul>

Olay İşleme

Tıklama Olayı

<button v-on:click="sayac += 1">1 Ekle</button>

Metot Olay İşleyicileri

<button v-on:click="selamla">Selamla</button>

methods: {
  selamla(olay) {
    alert('Merhaba ' + this.ad + '!')
    if (olay) {
      alert(olay.target.tagName)
    }
  }
}

Form Girişi Bağlamaları

Metin

<input v-model="mesaj" placeholder="beni düzenle">
<p>Mesaj: {{ mesaj }}</p>

Onay Kutusu

<input type="checkbox" id="onay-kutusu" v-model="isaretli">
<label for="onay-kutusu">{{ isaretli }}</label>

Radyo

<input type="radio" id="bir" value="Bir" v-model="secilen">
<label for="bir">Bir</label>
<input type="radio" id="iki" value="İki" v-model="secilen">
<label for="iki">İki</label>
<span>Seçilen: {{ secilen }}</span>

Bileşenler

Global Kayıt

Vue.component('benim-bileşenim', {
  template: '<div>Özel bir bileşen!</div>'
})

Yerel Kayıt

var BileşenA = { /* ... */ }

new Vue({
  components: {
    'bileşen-a': BileşenA
  }
})

Prop

Prop Geçme

<blog-yazisi baslik="Vue ile Yolculuğum"></blog-yazisi>

Prop Doğrulama

Vue.component('benim-bileşenim', {
  props: {
    propA: Number,
    propB: [String, Number],
    propC: {
      type: String,
      required: true
    },
    propD: {
      type: Number,
      default: 100
    },
    propE: {
      type: Object,
      default() {
        return { mesaj: 'merhaba' }
      }
    }
  }
})

Özel Olaylar

Özel Olayları Yayma

Vue.component('özel-girdi', {
  props: ['değer'],
  template: `
    <input
      v-bind:value="değer"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

Slotlar

Tek Slot

<gezinme-bağlantısı url="/profil">
  Profiliniz
</gezinme-bağlantısı>

İsimli Slotlar

<temel-düzen>
  <template v-slot:başlık>
    <h1>Burası bir sayfa başlığı olabilir</h1>
  </template>

  <p>Ana içerik için bir paragraf.</p>

  <template v-slot:altbilgi>
    <p>İşte bazı iletişim bilgileri</p>
  </template>
</temel-düzen>

Dinamik ve Asenkron Bileşenler

Dinamik Bileşenler

<component v-bind:is="mevcutSekmebileseni"></component>

Asenkron Bileşenler

Vue.component('asenkron-örnek', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>Ben asenkronum!</div>'
    })
  }, 1000)
})

Geçişler

Temel Geçiş

<transition name="solma">
  <p v-if="göster">merhaba</p>
</transition>

.solma-enter-active, .solma-leave-active {
  transition: opacity .5s;
}
.solma-enter, .solma-leave-to {
  opacity: 0;
}

Karışımlar

Temel Karışım

var benimKarisimim = {
  created() {
    this.merhaba()
  },
  methods: {
    merhaba() {
      console.log('karışımdan merhaba!')
    }
  }
}

var Bileşen = Vue.extend({
  mixins: [benimKarisimim]
})

Direktifler

Özel Direktif

Vue.directive('odak', {
  inserted: function (el) {
    el.focus()
  }
})

Filtreler

Bir Filtre Tanımlama

Vue.filter('buyukHarf', function (değer) {
  if (!değer) return ''
  değer = değer.toString()
  return değer.charAt(0).toUpperCase() + değer.slice(1)
})

Eklentiler

Bir Eklenti Kullanma

Vue.use(BenimEklentim, { birSecenek: true })

Durum Yönetimi (Vuex)

Depo

const depo = new Vuex.Store({
  state: {
    sayac: 0
  },
  mutations: {
    artir (state) {
      state.sayac++
    }
  },
  actions: {
    artir (context) {
      context.commit('artir')
    }
  },
  getters: {
    ikiKatSayac: state => {
      return state.sayac * 2
    }
  }
})

Yönlendirme (Vue Router)

Temel Yönlendirici

const yonlendirici = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

const app = new Vue({
  router
}).$mount('#app')

Gezinme

<router-link to="/foo">Foo'ya Git</router-link>
<router-link to="/bar">Bar'a Git</router-link>

yonlendirici.push('ana-sayfa')
yonlendirici.push({ path: 'ana-sayfa' })
yonlendirici.push({ name: 'kullanici', params: { kullaniciId: '123' } })