NwJs VueJs BulmaCSS JSONdata ile Masaüstü Rehber Uygulaması

 Merhaba, öyle döndüm, böyle döndüm VueJs ile bir masaüstü uygulaması geliştirdim. Bunu yaparken hem JavaScript hem de VueJs üzerine çok şey öğrendim. Şimdi bu öğrendiklerimi sizinle paylaşmak istiyorum. 

Öncelikle NwJs ile uygulama kalıbını oluşturarak başlayalım.

NwJs Yeni Masaüstü Uygulama

Öncelikle NwJs sitesinden en son halini indirelim. Ben ne olur ne olmaz deyip SDK sürümünü indirdim. İndirilen bir zip dosya, bunu herhangi bir yerde açalım.

VueJs ile Bir Uygulama Yapalım

 Merhaba , VueJs temelleri konusunda çok uzun yazıların ardından işe yarar bir uygulama için kolları sıvayalım.

Bİr sınav uygulaması yapmayı planlıyoruz. Daha önce öğrendiğimiz komponentleri kullanarak uygulamamızı gerçekleştireceğiz. Başlangıç olarak hazırlanan 3 dosyayı indirip bir yere kaydedin lütfen. app.txt , css.txt ve data.txt. Uygulamamızı Vue CLI kullanarak üretelim. Terminalde:

 vue create sinav    

Evet sinav çünkü Vue CLI proje adında Türkçe karakter kabul etmedi. Uygulamayı çalıştıralım test edelim.

 cd sinav                 

 npm run serve       

Vue3 (Vue.js versiyon-3) Öğreniyorum - Bölüm 3

 Merhaba bu yazıyı okumaya başlamadan önce okumanız gereken 2 bölüm var.

Vue3 (Vue.js versiyon-3) Öğreniyorum - Bölüm 1

Vue3 (Vue.js versiyon-3) Öğreniyorum - Bölüm 2

Şimdi kaldığımız yerden devam edelim. Alt komponentlerden üst komponentde veri değiştirmenin ikinci yolu olarak Callback Fonksiyonları da kullanabiliriz demiştik. 

Vue Call Back Fonksiyonlar

Alt komponentten üst komponent verilerine müdahale için sağlıklı yol Olay Bildirimi (emit) geçen bölüm anlatmıştık. Call Back fonksiyonları da üst komponent verilerini değiştirmek için alternatif bir yoldur. Önce App komponentinde yaşDeğiştirCB adı ile kullanacağımız Call Back fonksiyonu tanımlayalım.

Vue3 (Vue.js versiyon-3) Öğreniyorum - Bölüm 2

Okumadıysanız önceki bölümde VueJs versiyon 3 bölüm 1 yazısını okumanız burada anlatılanı daha iyi anlamanıza yardımcı olacaktır.

LifeCycle fonksiyonları, Virtual DOM ve Komponentler gibi daha ileri konulara dalıyoruz bu bölümde.

Hep olduğu gibi bir klasör ekleyerek bağlayalım, adı app7 olsun (en son app6 idi) ve içine şu dosyaları koyalım.

app7/app.js

let vm = Vue.createApp({

  data() {

    return {

      mesaj: "Merhaba Dünya!"

    }

  }

}).mount('#app')

Vue3 (Vue.js versiyon-3) Öğreniyorum

 Merhaba,

Ben bu VueJs öğrenme işine bıkmadım, çok takdir ediyorum bu işi. Bir gün mutlaka bir yerde bana para da kazandırır eminim. Bu güne kadar ne öğrendiysem bir projede kullandım. 

İnternette gezerken güzel bir kurs dökümanı buldum. Şimdiye kadar gördüklerime nazaran daha ayrıntılı bir anlatımı vardı. Kafamda takılan sorulara da cevaaplar vardı. Bu öğrendiklerimi sizinle de paylaşayım dedim. 

Hangisi Daha İyi

Angular , Vue , React az çok bildiğim kadarıyla birbirlerine benziyorlar. Amaçları ve yöntemleri arasında farklar neler acaba?