3. [vuejs-01] projesi: temel bilgiler

[vuejs-00]'te yürütülen kodu açıklamak için, bunu [vuejs-01]'te basitleştireceğiz. [vuejs-00] klasörünü [vuejs-01]'te kopyalıyoruz:

[vuejs-01] projesi temel olarak dört dosyadan oluşur:

[main.js] ve [2], projenin giriş noktasıdır;
[App.vue, HelloWorld.vue] ve [3-4], [Vue.js] bileşenleridir ve isteğe bağlı olarak aşağıdaki öğeleri içerir:
- [<template>...</template>]: HTML kodunu içerir;
- [<script>...</script>]: HTML koduyla ilişkili JavaScript kodu;
- [<style>...</style>]: HTML koduyla ilişkili CSS stili;
[public/index.html] [5]: [npm run serve] komutu tarafından görüntülenen HTML belgesi;

Projenin çalıştırılmasıyla görüntülenen [public/index.html] dosyası şudur:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- derlenmiş dosyalar otomatik olarak eklenecektir -->
  </body>
</html>

Dolayısıyla bu HTML dosyası statik olarak hiçbir şey göstermez. Burada HTML kodu yoktur. Görüntüleme dinamiktir: projenin jS kodu, 14. satırdaki [<div id=’app’>] etiketini tamamen değiştirecek olan HTML kodunu oluşturacaktır. Projenin jS koduyla oluşturulan ve 14. satırdaki [<div>] etiketinin yerine eklenen HTML kodu, [vue.js] bileşenlerinin [template] etiketlerinden ve [.vue] uzantılı dosyalardan gelmektedir.

HTML kodu, aşağıdaki [vuejs-01/main.js] komut dosyası tarafından 14. satıra dinamik olarak eklenir:


// ithalatlar
import Vue from 'vue'
import App from './App.vue'

// yapılandırma
Vue.config.productionTip = false

// [App] projesinin örneklenmesi
new Vue({
  render: h => h(App),
}).$mount('#uygulama')

Açıklamalar

2. satır: [Vue] nesnesi, [vue.js] çerçeve yapısı tarafından sağlanır;
3. satır: [App] nesnesi, [vuejs-01/App.vue] dosyası tarafından sağlanır;
6. satır: [Vue] nesnesinin yapılandırması;
9-11. satırlar: Bu satırlar,
- uygulamanın HTML kodunu oluşturan satırlardır. 10. satırda, bu kodu oluşturan dosya [App.vue]'tir;
- 10. satırda oluşturulan HTML kodunu, [public/index.html] dosyasının [<div id=’app’></div>] bölümüne yükler;

Herhangi bir [Vue.js] projesi, [index.html] dosyasını olduğu gibi koruyabilir.

İlk proje olan [vuejs-00]'e ait [App.vue] dosyası, [vuejs-01] projesinde şu şekilde basitleştirilmiştir:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Açıklamalar

[.vue] parçası en fazla üç bölümden oluşur:
- [<template>...</template>]: HTML kodundan;
- [<script>...</script>]: HTML koduyla ilişkili JavaScript kodu;
- [<style>...</style>]: HTML koduyla ilişkili CSS stili;

Burada [style] bölümü bulunmamaktadır.

1-6. satırlar: parçanın (sayfa, bileşen, görünüm, ...) HTML kodu;
2-5. satırlar: [template] bölümü yalnızca bir öğe içerebilir. Genellikle, parçanın tüm HTML bölümünü kapsayan bir [div] bölümü eklenir. Ayrıca bir <template> etiketi de eklenebilir;
3. satır: bir resim;

4. satır: [HelloWorld] adlı bir bileşen. [Vue.js]'in çalışma prensibi, burada [App.vue] gibi [.vue] dosyalarında tanımlanan parçalar yardımıyla web sayfaları oluşturmaktır. Bu bileşen, ilişkili jS betiğinin 9. satırında tanımlanan [HelloWorld.vue] dosyası ile tanımlanmıştır;
4. satır: Bir bileşen parametreleri kabul edebilir. Burada parametre, [msg] özniteliğidir;
8-17. satırlar: parçanın (veya bileşenin) jS komut dosyası;
9. satır: [HelloWorld] bileşenini [App] bileşeninde kullanabilmek için, tanımını [script] bölümüne içe aktarmak gerekir;
11-16. satırlar: komut dosyası bir nesne tanımlar ve onu dışarıdan erişilebilir hale getirmek için dışa aktarır;
12. satır: [name] özniteliği, dışa aktarılan bileşenin adını tanımlar;
satır 13-15: [components] özniteliği, [App] bileşeni tarafından kullanılan bileşenleri listeler. Bunlar, o bileşenle birlikte dışa aktarılır;

satır: [HelloWorld] bileşeninin, onu tanımlayan dosya ile aynı adı taşıması zorunlu değildir. Bu bileşen, [X] olarak içe aktarılabilir ve [Bonjour] bileşeni olarak dışa aktarılabilir:

14. satır: [X] bileşeni, [Bonjour] adıyla dışa aktarılır. Daha sonra 4. satırda bu adla kullanılır;

İlk versiyon en yaygın olanıdır, bu nedenle bileşenlerimizi bu şekilde tanımlayacağız;


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

satır, [HelloWorld : HelloWorld] koduna bir kısayoldur: [HelloWorld] bileşeni (sağda, 9. satırda içe aktarılmıştır) [HelloWorld] adıyla (solda) dışa aktarılır.

[HelloWorld.vue] bileşenini şu şekilde basitleştiriyoruz:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Açıklamalar

[HelloWorld] bileşeni, ana bileşen [App] ile aynı dosya yapısına sahiptir;
3. satır: Burada bir JavaScript ifadesinin değerlendirilmesi vardır; bu durumda ifade [msg]'tir;
10-12. satırlar: bileşenin özelliklerini, daha doğrusu parametrelerini tanımlar. [App] bileşeni, [HelloWorld] bileşenini örneklendirdiğinde, bunu aşağıdaki sözdizimiyle yapmıştır:


<HelloWorld msg="Notre première application Vue.js" />

[HelloWorld] bileşeni, [msg] parametresine (özniteliğine) bir değer atanarak örneklenir. [HelloWorld] bileşenindeki [template]’i takip edersek, bu bileşen şu hale gelir:


<div>
    <h1>Notre première application Vue.js</h1>
</div>

7-14. satırlar: bileşenin özellikleri, dışa aktarılan bir nesne biçiminde tanımlanmıştır;
- 9. satır: Bileşen, [HelloWorld] adıyla dışa aktarılır;
- 10-12. satırlar: parametreleri [props] özelliği ile tanımlanır;

Sonuç olarak, kullanılan iki [App, HelloWorld] bileşeninin şablonlarını bir araya getirirsek, görüntülenen [index.html] dosyası şu şekilde olacaktır:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

[package.json] dosyasındaki [serve] [1] komutunu değiştirerek uygulamayı başlatıyoruz:

Görüntülenen sayfa [2] olur.

Şimdi bu sayfanın koduna bakalım:

[1]'te, [clic droit] olarak değiştirin;
[2]'e, sayfanın kaynak kodu. Görüldüğü gibi bu, başlangıçtaki [index.html] dosyasının kodudur ve görüntülenen bu değildir. Başlangıçta yüklenen sayfa aslında [index.html]'tir. Ardından, JavaScript kodu bu sayfayı dinamik olarak değiştirmiştir, ancak bu bize gösterilmez;

Sayfalar JavaScript ile dinamik olarak oluşturulduğunda, [2] seçeneği hiçbir işe yaramaz. Şu anda görüntülenen sayfanın kodunu görmek için tarayıcının araçlarına (Firefox'ta F12) gitmek gerekir:

[1]'te, görüntülenen belgenin DOM (Belge Nesne Modeli) denetleyicisi;
[2]'e, bu DOM'in gerçekte ne içerdiğini;
[3-4], [Vue.js] çerçeve tarafından kullanılan JavaScript nesnelerini görüntülemek için kullanacağımız araçlar;
[4], [Vue.js] uygulamalarını hata ayıklamak için kullanılan bir eklentidir (burada Firefox için):
- Firefox için: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
- Chrome için: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

[Vue] [4] sekmesini inceleyelim:

[1-4] görünümü, belgenin [Vue.js] yapısını gösterir: [2] (index.html) belgesinin kök dizininde [App] (3) bileşeni bulunur ve bu bileşen de [HelloWorld] (4) bileşenini içerir. [4] üzerine tıklandığında, [HelloWorld] ve [5] bileşenlerinin özellikleri görüntülenir.

[4]'te (sağda), [$vm0] göstergesi görülmektedir. Bu, JavaScript [6] konsolunda [HelloWorld] nesnesini belirtmek için kullanılabilecek değişken adıdır. Şunu yapalım:

[2]'te, [$vm0] ifadesini değerlendiririz; bu da nesnenin yapısını görüntülememizi sağlar. Normalde bu yapıyı doğrudan kullanmamız gerekmez;

Son olarak, projeyi yürütmek için kullanılan [serve] komutunun [hot reload] özelliğini gösterelim:

[App.vue] içinde, [HelloWorld] tarafından görüntülenen mesajı değiştirin:

[1]'te görüntülenen mesaj değiştirilir;
[2-3]'te, sayfa bizim müdahale etmemize gerek kalmadan otomatik olarak güncellenir;

Şimdi, [Vue.js]’in önemli noktalarını örneklemek için çeşitli [vuejs-xx] projeleri oluşturacağız. “Önemli” derken, “vergi hesaplama sunucusunun [vue.js] istemcisinde kullanacağımız” anlamını kastediyoruz. Müşteri uygulamasında kullanılmayan diğer “önemli” noktalar ise ele alınmayacaktır. Dolayısıyla, [vue.js] hakkında kapsamlı bir sunum yapılmayacaktır.