Tüm Makaleler,Bloglar, webigem Yazılım Şirketi

Blog Detay

Blog Images

Neden Vue Js Kullanmalıyım?

Vue.js'yi kullanmak için 3 neden

1) HTML, CSS ve JS tabanlı bir bileşen kitaplığı, başlamayı kolaylaştırır
Yapmanız gereken ilk şey, ortamınızı ayarlamaktır. Vue.js ile başlamak gerçekten çok kolay ve Webpack gibi bir derleme aracı gerektirmiyor. Tek yapmanız gereken bir komut dosyası etiketinde tek bir içe aktarma yapmak: 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
İlk olarak, şablonunuz ve JavaScript kodunuzun nasıl ilişkili olduğunu size göstermek için temel bir bileşen oluşturacağız.
İlk bileşeninizi nasıl oluşturabilirsiniz?
Bir bileşen oluşturmanın iki yolu vardır. Gerçekten minimalist bir şekilde yalnızca JavaScript ve HTML'nin bir kombinasyonu olan şimdiye kadarki en basit olanla başlayalım:
app.js
var app = new Vue({
 el: '#app',
 data: {
   name: 'James'
 }
})
app.html
<div id="app">
 Hello <input type="text" value={{ name }} />
</div>
app.css
#app input {
  padding: 10px;
  color: #121212;
  font-size: 12px;
}
Gördüğünüz gibi, id uygulaması sayesinde şablon ve JavaScript arasındaki yazışmaları koruyoruz ve HTML'nizde dinamik olarak bağlayabilmeniz için sadece veri sağladık.

Verileri şablonlarına nasıl bağlayabiliriz?
Vue.js, tasarım gereği iki yönlü bir bağlama sistemine sahiptir; bu, JavaScript'ten veya şablondan verileri değiştirebileceğiniz anlamına gelir. Yukarıdaki kod parçacığımızı ele alalım: giriş metnini değiştirirseniz, JavaScript tarafında değişkeninizi otomatik olarak güncelleyecektir. Aksine, JavaScript dosyasındaki verileri değiştirirseniz, şablonunuzu girdideki yeni değerle yeniden oluşturur.

2) Yönlendirme ve veri yönetimi gibi temel özellikler resmi kütüphaneler tarafından kapsanmaktadır.


Vue.js, keşfettiğimiz gibi bileşenleri oluşturmanıza izin veren çekirdek modülü içerir, ancak aynı zamanda yönlendirme bölümü için vue-router, verilerinizi yönetmek için Vuex gibi Vue.js ekibinin kendisi tarafından oluşturulan bir dizi fikir kitaplığı içerir. vue-cli yeni bir projeyi başlatmak için.
Bir yönlendirici nasıl oluşturulur
Herhangi bir Web uygulamasında önemli bir nokta yönlendirme sistemidir ve bu amaçla vue-router'a güvenebilirsiniz. Tüm rotalarınızı kısa ve öz bir şekilde bildirebilir ve yalnızca birkaç satır kodla bileşeninizdeki dinamik yönlendirme parametrelerinden yararlanabilirsiniz.
import Page from './components/page';

export default new VueRouter({
  [
    { path: '/page/:uid', component: Page }
  ]
});
Bileşenler arasında nasıl iletişim kurulur
Herhangi bir karmaşık web uygulamasındaki diğer bir temel husus, bileşenler arasındaki iletişim ve bu nedenle verilerinizin nasıl yönetileceğidir. Vuex, Redux ve Elm mimarisinden ilham alan bir modüldür. Bileşenlerdeki eylemleri işlemek ve verileri herhangi bir bileşene göndermek için çok bildirimsel bir yol sağlar. 
const store = new Vuex.Store({
  state: {
    doc: null
  },
  mutations: {
    setDocument(state, doc) {
      state.doc = doc
    }
  },
  actions: {
    async queryDocument({ commit }, { customType, uid }) {
      commit('setDocument', await Prismic.getByUID(customType, uid))
    }
  }
})
Vuex ve vue-router'ı karıştıran bir bileşen nasıl oluşturulur
Şimdi hepsini basit bir bileşende birlikte çalıştırmanın zamanı geldi:
var app = new Vue({
 el: '#page,
 beforeRouteUpdate(to, from, next) {
  store.dispatch('queryDocument', { customType: 'homepage', uid: to.params.uid })
  .then(next)
})
BeforeRouteUpdate, rota değiştirirken kodunuzun ne zaman yürütülmesi gerektiğini belirten bir bileşen kancasıdır.

Bir projeyi hızlı bir şekilde başlatmak için vue-cli kullanalım
vue-cli, önceden yapılandırılmış bir derleme aracıyla basit bir projeyi önyüklemenize yardımcı olan bir komut satırı aracıdır. Bileşeninizi doğru bir şekilde kapsamak için HTML, CSS ve JavaScript'i içine yerleştirmenize izin veren .vue uzantılı bir dosyada bileşen oluşturmak gerçekten yararlı olabilir.
JS'de async/await gibi yeni sözdizimini işlemek için babel gibi iyi yardımcılar aldığınız için de yararlıdır.
Başlamanıza yardımcı olacak resmi https://cli.vuejs.org/ adresinden daha fazla bilgi bulabilirsiniz.

3) Sanal DOM ve minimum yükleme süresi ile sağlanan hızlı oluşturma

30KB!
Vue.js, çekirdek modül, yönlendirici ve Vuex ile yalnızca ~30 KB gzip'lidir.

Minimum ayak izi, kısa yükleme süresi sunar, bu da kullanıcılar için daha yüksek hız ve Google tarayıcısı için hız kriterinde daha iyi sıralama anlamına gelir.
Sanal DOM!
Vue.js ayrıca 2.0 sürümünden bu yana Virtual DOM'yi kaputun altına uygulayarak ReactJS'den ilham aldı. Sanal DOM, temel olarak, bir durumu her değiştirdiğinizde bellek içi DOM'un bir sürümünü oluşturmanın ve onu gerçek DOM ile karşılaştırmanın bir yoludur, böylece her şeyi yeniden oluşturmak yerine yalnızca güncellenmesi gereken kısmı güncelleyebilirsiniz.



Node.js, JavaScript ile server side uygulamalar yazabileceğimiz, Joyent tarafından 2009 yılında geliştirilmeye başlanmış bir Javascript Runtime platformudur.

Paylaş

Popüler Gönderiler

Arşiv