Vue JS Öğreniyorum #1

Yeni bir yazımdan herkese selamlar! Öncelikle bir depremzede olarak, yaşadığımız bu doğal afetten dolayı tüm ülkeme geçmiş olsun demek istiyorum.

Depremden sonra birçok şey değişti. Buna benim çalışma hayatım da dahil.(Henüz olmayan) İşe girme zorluğu bir yana, öğrenmek ve hala güncel kalmak hiç olmadığı kadar zor. Nasıl daha çeşitli ve daha dinamik, sorgulayan araştırmacı bir geliştirici olurum ve aynı zamanda skill set’imi nasıl artırırım diye düşünürken sıklıkla adını duyduğum ve başka bir sebepten de ötürü Vue JS framework’ünü öğrenmeye kolları sıvadım.

Bölüm 1

• +Neler gerekli ?
• -Önceden bilginiz olsun, yada olmasın ama sadece yapmak istediğinize emin olun.
• PC ve internet(hızlısı çıldırtır).

Bölüm 2

Vue ne ki?

Vue, React ve Angular gibi adını sıkça duyduğumuz bir framework. Yada sen kütüphane de. Ben önceden (ah bir senior olaydık) React ile takılan uğraşan sıradan bir vatandaştım. (React sevdalısı)

Vue hakkında gaza gelmek ve sayın Kıvanç Tatlıtuğ’un denize atladığı gibi konuya girişmek için bu harika videoyu izlemenizi öneririm.

Daha çok teorik ve test edilmiş bilgi edindikçe ilerleyen yazılarımın kültürü artacaktır.

Bölüm 3

Çoğunlukla beginner friendly — developer friendly ve basit yazımı ile öğrenilmesinin çok kolay olduğu ile de sıkça anılır Vue. (Ne yalan söyleyeyim bencede öyle ya.)

Bölüm 4

:D

Başlayalım o halde. İlk olarak hemen koşup bir proje (cra gibi) oluşturmadan önce cdn den bu muazzam basitlikte kullanım için Vue’ye teşekkürlerimi iletiyorum. Bunun eşliğinde resmi dökümanda bulunan

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: "Selam Vue'cüm orada havalar nasıl?"
      }
    }
  }).mount('#app')
</script>

bu hazır kodu alıp bir html sayfasına atalım. Çalıştırıp incelemelerde bulunalım.

Gördüğünüz gibi önce bi cdn linki ile Vue’yü ayağımıza çağırdık. (Evan You alınmasın kendisi çok severim).

Diğer aşama ise, script tagleri arasına Vue App’imizi yazalım.

İlk önce CreateApp’i Vue’den getirdik. Daha sonra bu arkadaşın içine birkaç şey gerekli. Şuanlık sadece data() koyduk ama bunun daha methods’u, computed’i created’ı, mounted’ı var yani baya bişey var adamlar yapmış. Kısaca React sevdalıları için lifecycle metotları ve ek şeyler diyelim. Bu data içinde gördüğünüz gibi mesajımız bize Selam Vue’cüm orada havalar nasıl? diyor.

Azcık aşağı inince bu App bir yere bağlanmış. (Mutlaka bir yere ait olmalı)

Gördüğünz gibi id si app olan div elemanına bağlanmış.(Root component dedikleri bu arkadaş olsa gerek.) Bir diğer güzellikse bunu {{ }} süslü parantezler arasına yazıp ekrana okutuyoruz. Veee mükemmel son;

Maalesef bu yazım için bana ayrılan sürenin sonuna geldim. Unutmadan yazayım kullandığım kaynaklar şöyle;

Vue.js - The Progressive JavaScript Framework | Vue.js

Doküman oku oku bitmez. Vue Mastery’nin 1 saatlik videosu ilk adım için muazzam. Envato’nun videosu gayet iyi, 2 saatlik kısım kaldı izleyeceğim.

Yanlış yazdığımı veya bildiğimi düşündüğünüz birşey olursa şuradan bana bildirin. Hem ben öğreneyim hem de güzel olur işte paylaşmak güzeldir.

Serinin ikinci yazısı için buraya bakabilirsin.

Görüşmek üzere.