Kategoriler
Vue.JS Dersleri

Vue.Js Components: Child – Parent Veri Aktarımı

Bu yazıda da pratik olması adına yeni bir proje oluşturacağım. Projemizde yeni componentlar hazırlayacağız ve component içerisinden parent’a (component’ın çağırıldı yer) veri akışını sağlayacağız.

Github’ta paylaşacağım başlangıç seviyesideki proje içerisinde şunlar olacak: Vuetify, Composition API, Props, Emits, Unit Test / Jest (daha sonra). Bu proje sayesinde daha önceden değindiğim parent’tan child’a veri aktarımını da pekiştirmiş olacağız. Ancak, daha önceden Options API ile yaptığımız başlangıcı bu defa Composition API ile yapacağız.

Kategoriler
jQuery Vue.JS Dersleri

Vue.Js v-model Nedir? v-model Kullanımı

V-model, Vue.js ile gelen en özel güzelliklerin başında gelmektedir. <input v-model=”isim” /> yazdığınızda, inputtan gelen veriyi alır, data içerisinde isim property’sini gider günceller. Siz data içersindeki isim değerini değiştirdiğinizde de (fonkstionlar vb. yardımıyla) input içerisindeki veriyi günceller. Buna data-way binding diyoruz ve jQuery ya da pure Javascript bilen birisi için muazzam bir özellik olacaktır.

Kategoriler
Vue.JS Dersleri

Vue.Js Components: Parent’ten Child’e Veri Aktarımı

Daha önceden Vue.js’te component oluşturma ve bu componentlerı kullanma konularına değinmiştim. Ancak, component statik olduğu için component’i çağırdığımız yerden herhangi bir veriyi aktarmamıştık. Şimdi ise veri aktarımını tek taraflı olarak parent -> child arasında yapacağız.

Sonraki aşamalardaysa child -> parent ve 2 child arasında veri aktarımını da yapacağız.

Kategoriler
Vue.JS Dersleri

Vue.Js Script Yapısı, Data, Methods, Created, Watch

Bu yazıda Vue.Js’in asıl heyecanlı kısımlarına giriş yapacağız. Özellikle de Vue.Js neden jQuery’den daha iyi (kime göre neye göre) konusuna da değinmiş olacağız. Özellikle başlarken söylemem gerekiyor ki bu yazıya göz attıktan sonra daha önceden jQuery kullanan birisi için geri dönülemez bir yola giriş yapabilirsiniz :) Çünkü kod yazma hızınız, kodlarınızın okunurluğu ve takip edilebilmesi bir hayli artacak. Sadece v-for için bile Vue.js kullanmaya başlayabilirsiniz, çok ciddiyim :)

Not: Bu yazıda yaptığımız örnekleri paylaştım. Yazının en sonundaki linkten projeye ulaşabilirsiniz.

Kategoriler
Vue.JS Dersleri

Vue.Js Components

Merhaba arkadaşlar, bir önceki yazıda Vue Router ile birlikte Vue.JS projelerde routing işlemlerini nasıl yapabileceğimize değinmiştim. Şimdi ise Vue.Js içerisinde tekrar kullanmak üzere bileşenleri (Vue Components) nasıl oluşturacağımızı ve component ile oluşturulan yapılar tekrar tekrar nasıl kullanabileceğimizi göreceğiz.

Kategoriler
Vue.JS Dersleri

Vue Router – Başlangıç Seviyesi

Vue Router için en az iki yazı yazmayı planlıyorum. Bir tanesi basit manada başlangıç aşamasında kolayca Vue Router yapısını anlayabilmenizi hedefleyecek. Bir sonraki ise, daha kapsamlı olacak. Öyle ki bir önceki yazıda Router klasörünüzün bir hayli kalabalık olabileceğini söylemiştim. Yani sitenizde onlarca ve hatta yüzlerce sayfa olacaksa, daha kapsamlı ve ölçeklenebilir bir routing yapısını projeye başlamadan önce kurmanız gerekecek.

Kategoriler
Vue.JS Dersleri

Vue.Js Başlangıç: Proje Dosyaları

Bu yazıda, bir önceki yazıda oluşturduğum ilk Vue.js projesinin hangi dosyalardan oluştuğuna ve bu dosyaların ne işe yaradığına değineceğim. Öncelikle projemizin hangi klasörlerden oluştuğunu görelim: node_modules, public ve src. Ayrıca, ana dizinimiz içerisinde de genelikle ayarlardan oluşan dosyalarımız bulunuyor.

Bu arada kodları incelerken kullanacağım Text Editor Visual Studio Code olacak.

Kategoriler
Vue.JS Dersleri

Vue.Js Nedir? Vue.Js Kurulumu, Nasıl Kurulur?

Eğer Vue.Js nedir? konusuna hakimseniz, yazının ilk kısımlarını atlayarak, direkt olarak Vue.Js Kurulumu ve Vue.Js Nasıl Kurulur? başlığına atlayabilirsiniz. Kurulumlara Node.Js ile başlayacağımızı da şimdiden belirtmek isterim.

Vue.JS şu anda Front End dünyasında yükselen bir yıldız. Bunun herkes için birçok farklı sebebi olabilir. Şu anda en bilindik 3 Javascript Framework’ü olarak şunları sıralayabiliriz: Vue.js, React.js ve de Angula.js. Bunlar haricinde elbette birçok Framework sayabiliriz; Ember.js, Meteor, Mithril, Polymer, Aurelia, Backbone.js… Bunların hepsi de birer ihtiyaç sonucunda ortaya çıktı ve bunun sonucunda da bunları kullananların olması çok normal. Öncelikle bir projeye başlarken “ihtiyaçlarımız nedir?” sorusuna yanıt vermeniz gerekiyor. Sonrasında da bu ihtiyaçlarınıza hangi Pluginler, Framework ya da Frameworkler karşılık veriyor bunu bulmalısınız. Çünkü, sadece popüler diye bir yapıya yönelirseniz, sonrasında çok pişman olabilirsiniz.