Vuejs 3 Kullanımı. Nasıl Kurulur, Vue 3 Gelen Yenilikleriyle Nasıl Proje Geliştirilir?

Vuejs 3 ile yenilenen yapısını gelin birlikte A'dan Z'ye inceleyelim. Vue3 kendi sitesinden dökümanları inceleyerek en güncel halini kurarak Vue 3 ile gelen yenilikleri uygulamalı ve örneklerini sizler için derledim. Hadi başlayalım.

Vue.js Nedir?

Öncelikle vue.js nedir sorunu kısaca cevaplayalım. Ön bilgi anlamında vue.js kullanıcı arayüzleri oluşturmak için html dom yapısını katmanlara ayırarak sadece işlem olan yere müdehale etmemizi sağlayan hızlı ve kolayca reaktif ve interaktif web arayüzleri yapmamızı sağlar. Eski bir google çalışanı olan Evan you tarafından açık kaynak kodlu javascript freamwork olarak geliştirilen bir çercevedir.

Vuejs 3 GetStarted

Vue.js 3 Nasıl Kurulur?

Vuejs 3 Kurulumu: CDN, CLI üzerinden 2 farklı yöntemle kullanımı proje geliştirmesi mevcut ikisinide kullanarak öğrenelim.

Vue.js 3 CDN ile Kurulumunda (1. Adım)

Vue.js 3 CDN kodunu alıp kendi sitesinden Vue.js 3 CDN Kurulum Kodu alarak html dosyamızın head tagları arasına yapıştıralım.

CDN Kodumuz:

        //[email protected] son sürümünü getir diyor.
        //[email protected] sürüm 3 olarak belirttik
        
    

CDN ile kurulumda (2. Adım)

Html dosyamıza body etiketleri arasında bir div acarak id olarak kapsayici belirleyelim. Kodumuz

        

CDN ile Kurulumda (3. Adım)

Kök klasörümüzde app.js adında bir dosya oluşturalım ve app.js html taglarında body en sonunda çağıralım. Kodumuz:

        
    
Vuejs 3 GetStarted

Yukarıdaki gibi olacak index.html dosyamız.

CDN ile Kurulmda (4. Adım)

Vuejs'mizi çalıştırmamız için app.js dosyamızda vue.createApp metodu ile vuejs yüklüyor sonrada app.mount fonksiyonu ile kapsayici divimizi belirtiyoruz. App.js Kodumuz:

      const app = Vue.createApp();

      app.mount('#kapsayici');
    

artık tüm işlemleri yaptığımıza göre visual editörümüzde live server üzerinden test edelim. Open live server ile çalıştırdığımızda tarayıcıda http://127.0.0.1:5500/index.html gibi url'de çalışması gerekiyor.

index.html dosyası tarayıcıda çalıştığında kaynak kodlarında console bölümüne baktığımızda şu ibare yer aldıysa CDN ile vue 3 çalışıyor demektir.

      You are running a development build of Vue.
      Make sure to use the production build (*.prod.js) when deploying for production.
    

Vuejs 3 Template Yapısı

Eğer yukarıdaki kodlarımızı çalıştırdığımızda console böyle bir hata aldığınızda: "Uncaught TypeError: Cannot read properties of undefined (reading 'render')" template hatası alıyorsunuz demektir.

Peki bu neden kaynaklanıyor? app.js dosyamız içinde template yapısını belirtmediğimiz için aşıdaki kodda küçük bir örnekle yapalım.

      const app = Vue.createApp({
        template:'

ILK Vue 3 CDN ILE KURULUM

' }); app.mount('#kapsayici');

Sayfamızı yenilediğimizde incele bölümünden kaynak kodumuza ve console kısmında Uncaught TypeError hatasının gittiğini göreceksiniz.

Vuejs 3 Template

Biraz daha template yapısını genişleterek kullanalım. app.js dosyamızda template kısmını genişleterek template örneğini iyice anlamaya çalışalım. kodumuz:

      const app = Vue.createApp({
        template:`

Ilk vue 3

CDN ile kurulum

örneklerle yapıyoruz

` }); app.mount('#kapsayici');
Vuejs 3 Template Örneği

Vuejs 3 Data Yapısı

Vuejs 3 data kavramını yukarıda yaptığımız template örneği üzerinde yaparak biraz daha hızlı anlamaya çalışalım. app.js dosyamızda createApp içinde örnekleyelim. Kodumuz:

      const app = Vue.createApp({
        //template:'

ILK Vue 3 CDN ILE KURULUM

' template:`

{{baslik}}

{{altbaslik}}

{{icerik}}

`, data(){ return { baslik:"Ilk vue 3", altbaslik:"CDN ile kurulum", icerik:"Örneklerle yapıyoruz" } } }); app.mount('#kapsayici');

Vuejs 3 Method Yapısı

Vuejs 3 Method yapısı ile kullanacağımız fonksiyonları belirleyerek istenildiğinde çalışmasını sağlayabiliyoruz. app.js dosamızda createApp içinde örnekleyelim. Kodumuz:

      const app = Vue.createApp({
        template:`

{{baslik}}

{{altbaslik}}

{{icerik}}

{{sonuc}}

`, data(){ return { baslik:"Ilk vue 3", altbaslik:"CDN ile kurulum", icerik:"Örneklerle yapıyoruz", Appadet:0, sonuc:"" } }, methods:{ Ekle(){ this.Appadet++; this.sonuc =`Şuanda ${this.Appadet} kadar eklenildi ` } } }); app.mount('#kapsayici');

Vuejs 3 V-if & V-show Kullanım Yöntemleri

Vuejs 3 if ve show yöntemlerinin kullanımını örneklerle kavramaya çalışalım. app.js dosyamıza kodlarımızı yazalım.

      const app = Vue.createApp({
          template:`
              
Veriler `, data(){ return { } }, methods:{ } }); app.mount('#kapsayici');

Yukarıda ki örnekte v-if içine true yazdığımız için Veriler ekrana çıktı olarak göründü fakat true yazan yere false yazsaydık ekrana Veriler yazmayacaktı.

V-show yönteminin kullanımıda yine v-if gibi true ve false değerleri ile kontrol edebiliyoruz. app.js üzerindeki kodlarımız:

      const app = Vue.createApp({
          template:`
              
Veriler
Datalar
`, data(){ return { } }, methods:{ } }); app.mount('#kapsayici');

Vuejs 3 v-if & v-show kullanarak basit bir toogle örneği yapalım.

      const app = Vue.createApp({
          template:`
              
Veriler
Datalar
`, data(){ return { Goster:true } }, methods:{ toggle(){ this.Goster=!this.Goster; } } }); app.mount('#kapsayici');

Vuejs 3 V-for Kullanım Yöntemi

Vuejs 3 v-for yöntemi ile döngüleri inceleyeceğiz. app.js dosyamıza kodlarımızı yazalım:

      const app = Vue.createApp({
        template:`
            
  • {{say}}
`, data(){ return { sayilar:[3,2,5,1,9,7] } }, methods:{ } }); app.mount('#kapsayici');

Şimdi for döngüsünü diziler halinde gelişmiş bir örnek daha yapalım. app.js dosyamızdaki kodumuz:

      const app = Vue.createApp({
          template:`
              
  • {{kar.isim}} - {{kar.meslek}} - {{kar.yas}}
`, data(){ return { karakter:[ {isim:"mehmet", yas:29, meslek:"tenekeci"}, {isim:"ali", yas:22, meslek:"otelci"}, {isim:"fatih", yas:31, meslek:"oluk"} ] } }, methods:{ } }); app.mount('#kapsayici');

Vuejs 3 V-bind Kullanım Yöntemi

Vuejs 3 v-bind kullanımı neden karşımıza çıkar ve ne zaman kullanmalıyızı inceleyelim özelliklede html attributelerinde style,href gibi yerlerde bind etmemiz gerekir. app.js dosyamızda kodlarımız:

      const app = Vue.createApp({
        template:`
            
Mavi
`, data(){ return { style:"color:blue" } }, methods:{ } }); app.mount('#kapsayici');

Vuejs 3 CLI Kurulumu

Vuejs 3 bilgisayarımıza kurarken global olarak kurulumunu terminalden yapalım.

Sonrasında bir klasör açarak(vuecli) içine proje oluşturalım. Terminal Komutumuz:

        vue create vuecli
    

not bazı yönergeler soracak direactory ilk baştaki y, sonra enter, sonra manualyt ve 3x seçelim en son config ve package.json soruyor ilk olaranı işaretlereyek enter yapalım.

        cd vuecli
        npm run serve
    

Vue projemizi npm run serve komutu ile ayağa kaldıralım. Eğer hatalar aldıysak "TypeError: Cannot read property 'version' of undefined" Tarzında Bu cli versiyonumuzla alakalı.

      yarn global add @vue/cli
      # OR
      npm install -g @vue/cli
    

Şimdi tekrar kurulum yapalım. "Permission Denied" hatası alırsanızda sudo ibarelerini mac ve linux için komutların başına yazın.

      sudo vue create vuecli 
      cd vuecli
      npm run serve
    

"Compiled successfully" Yazdığında kurulum başarılı ile tamamlanmıştır. Şimdi url kısmına http://localhost:8080/ yazarak projenizi tarayıcıda görebilirsiniz.

vuejs compiled

 

Vuejs 3 Klasör Yapısı

Vuejs 3 projemizi kurduktan sonra klasör yapısını tanıyarak devam edelim. ilk olarak package.json dosyamıza girerek sürürmlerini ve scripts olan yerleri kontrol edelim.

      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
      },
      "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0"
      },
    

Şuanda bende kurulu vue 3.0.0 sürümünü dependencies kısmında görebiliyoruz. Scripts bölümünde build ve serve'ninde yer aldığını görebiliyoruz. Şimdi klasör yapısını incelemeye başlayabiliriz.

  • node_modules
  • public
  • src
  • babel.config.js
  • package-loc.json
  • package.json
  • README.md

 

Vuejs 3 Klasör Yapısı

 

Klasörlerimizde node_modules paketlerin bulunduğu standart klasör, public klasöründe index.html ve favicon.ico dosyası mevcut. Src klasörümüz javascript çalışmalarımızı vue derleyicimizin olduğu components kavramını kuracağımız yer.

Genel anlamda klasör çalışma mantığını anlayabilmek için public klasörü içinde yer alan index.html dosyası içinde yer alan id="app" app id divimizin içine geliyor vue çalışmalarımız.

peki neden app id'si src klasöründe main.js dosyamız "createApp(App).mount('#app')" mount olarak verildiği için. Main.js dosyamızda "import App from './App.vue'" ibareyle vue çalışmasını artık import edilerek çağrıldığını görebiliriz.

src klasöründeki app.vue bizim template, script ve style dosyalarımız ile ana taslağın bulunduğu yapıyı gösteriyor.
Tarayıcıda açtığımız http://localhost:8080/ local vue çalışmamızda ki yapı app.vue içine import edilmiş HelloWorld componentinde yer alır. Burası index ilk sayfa kodlarımızın bulunduğu yerdir.

Klasör yapısını ele aldığımıza göre artık bu klasörlerde çalışarak vuejs 3 freamworkünü kullanarak öğrenelim.

Vuejs 3 inputlara Erişim Refs Kullanımı

Vuejs 3 ile inputlara erişerek içine yazılan değerleri yakalayarak kullanacağız. Src klasörümüz içersinde yer alan app.vue dosyamızda template kısmında html kodlarımızı yazalım.

      

{{baslik}}



{{sonuclar}}

script içinde data ile return edelim.

      data(){
        return {
          baslik:"Vuejs 3 inputlara Erişim Refs Kullanımı",
          sonuclar:""
        }
      }
    

Methods bölümünde butona tıklandığında inputlar içerisinde yer alan value değerlerini alarak kullanalım.

      methods:{
        yakala(){
          const u = this.$refs.user.value;
          const p = this.$refs.pass.value;
          
          console.log("User= " + u + " & Pass= " + p);
          this.sonuclar= "User= " + u + " & Pass= " + p
        }
      }
    

Ne yaptık kısaca üzerinden geçelim iki adet inputumuz var ref adları user ve pass adında bunları methods içinde yakala fonksiyonu ile butona tıklandığında yakaladık. En sonunda sonuclar adındaki data bulunan html içerisine yazdırdık.

      
      
      
    

 

Vuejs 3 inputlara Erişim Refs Kullanımı

 

Vuejs 3 Component Kullanımı

Vuejs 3 Component kullanımı klasör yapısında src içerisinde components klasöründe genel anlamda kullanılır. Component kavramı gerek vue gerek react için çok önemli ve en çok karşımıza çıkan yapıdır. Bir bütünü oluşturan parçalar gurubu diyebiliriz. Basit kullanımına geçelim src klasöründe bulunan App.vue dosyamızdan başlayalım.

      
      
      
    

Components klasörü içine header.vue dosyası açalım ve içine kodlarımızı belirtelim.

      
      
      
    

Kısaca ne yaptık src > components klasörü içine header.vue dosyamızı oluşturup. App.vue dosyamızda import ederek çağırdık. Joker olarak üst app.vue dosyamızdan header.vue dosyamıza props ile veri gönderdik.

Vuejs 3 Component Kullanımı

Tarayıcıda localhosttan projemizi açtığımızda sonuç olarak yaptıklarımızı gördük.

Vuejs 3 Global Style Kullanımı

Vuejs 3 style kullanımı componentlerde global ve scoped olarak 2 aşamada kullanımı mevcuttur. Arasındaki fark global tüm site üzerindeki her sayfada görülecek stiller scoped ise sadece bulunduğu component yerinde geçerli olacaktır.

Src > components klasörü içinde header.vue dosyamızı açmıstık. Şimdi içine scoped sadece bu Componentde çalışmasını sağlayalım.

      
    
Vuejs 3 Component Style Kullanımı

 

Global css tanımlama yani tüm sayfalarda çalışması için src > assets içine global.css adında dosya oluşturup içine h1{color:blue;} yazalım ve kaydedelim.

Global css projemizde aktif etmek için src > main.js dosyamızda import etmemiz yeterli

      import { createApp } from 'vue'
      import App from './App.vue'
      
      //Global css dosyamızı dahil ediyoruz.
      import './assets/global.css'
      
      createApp(App).mount('#app')
    

Vuejs 3 Form işlemleri

Vuejs 3 form işlemleri ile inputlardaki değerleri bind ederek kullanmaya değineceğim. Bunun için ilk olarak src > components klasörü içine form.vue adında dosya oluşturup bir üst klasörde ana vue src > App.vue dosyamıza import ederek başlayalım. App.vue dosyamızın kodları:

      
      
      
    

Projemize form.vue dosyamızı import ettik sonrasında form.vue dosyamız içinde örneklerle anlatımına geçelim.

Vuejs 3 V-model Kullanımı

Vuejs 3 v-model izah ederek başlayalım. inputlar içerisine yazılan değerleri yakalabiliyor ve aynı zamanda gösterebiliyoruz. Bu işleme iki yönlü data bind'ing deniyor. form.vue dosyamız içerisindeki kodlarımız:

      
      
      
    

Kısaca ne yaptık template içerisinde formda bulunan usurname inputu içerisine yazılan veriyi v-model ile yakalayarak data kısmında ekrana tekrar username olaak return ettik.

Vuejs 3 Select v-model kullanımı

Vuejs 3 ile form işlemlerinde select ile secilen değerleri v-model ile data binding yakalayıp - gösterelim.

      
      
      
    

Vuejs 3 Checkbox v-model kullanımı

Vuejs 3 ile form işlemlerinde checkbox inputunun değerini v-model ile data binding yaparak yakalayıp gösterelim. form.vue dosyamızdaki örnek kodlar:

      
      
      
    

Vuejs 3 Çoklu Checkbox v-model kullanımı

Vuejs 3 ile form işlemlerinde çoklu checkbox inputlarının değerinleri v-model ile data binding yaparak yakalayıp gösterelim. form.vue dosyamızdaki örnek kodlar:

      
      
      
    

Vuejs 3 Submit ve Click Kontrolü prevent kullanımı

Vuejs 3 form işlemlerinde submit ve butona click edildiğinde kontrolünü yani inputlardaki değerlerin sayfa yenilenmeden işlem yapılmasını sağlamak için prevent kullanımı yapalım. form.vue dosyamızdaki örnek kodlarımız:

      
      
      
    

Buradaki yapmak istediğimiz olay prevent kullanımı ile submit olduğunda form bilgilerinin sayfadan kaybolmaması jquery kullananlar bilir. Sayfa yenilenmeden form bilgilerini gönderirken return false yapmazsak butona bastığımızda form elemanlarının içi boşalır ve sayfa yenilenir. jquerydeki onsubmit="return false;" vuejs'te kullanımı @submit.prevent veya @click.prevent dir.

Vuejs 3 routing işlemleri makalemiz uzadığı için Vuejs 3 router kullanımı'a tıklayarak orada devam edelim.
Creativecommons.org
Bu çalışmanın içeriği, Creative Commons Atıf 2.5 lisansı koşulları altında kullanılabilir . Bu çalışmanın daha fazla dağıtımı,paylaşımı: ismailgultekin(com)a ve çalışmanın başlığına, Kaynak vererek atıfta bulunulmalıdır.

Telif Hakkı:

Problemi Şikayet Et!
Web Yazılımları

Web Yazılımları

Conference Articles

Conference Articles

Evimde Gör

Mobil Uygulamalar

Özel Yazılımlar

Özel Yazılımlar

Orsam Ortadoğu

Orsam Ortadoğu

Haydi El Ele

Haydi El Ele

Makina Yazılımları

Makina Yazılımları

Soru Sor Whatsapp

Görüş Hata Bildir

Güvenlik Kodunuz:

Yorum Yap

Yorum kodunuz:

0.0746