5. [vuejs-03] projesi: olay yönetimi

[vuejs-03] projesi iki kavramı ortaya koymaktadır:

bir düğme üzerindeki [clic] olayının yönetimi;
bir HTML bloğunu koşullu olarak görüntülemeye olanak tanıyan [v-if] yönergesi;

Projenin dizin yapısı şu şekildedir:

5.1. Ana komut dosyası [main.js]

[main.js] betiği değişmeden kalır:


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

// eklentiler
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

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

// proje oluşturma [App]
new Vue({
  render: h => h(App),
}).$mount('#uygulama')

5.2. Ana bileşen [App.vue]

Ana bileşen [App.vue], [HelloBootstrap] bileşeni yerine [ClickOnMe] bileşenini kullanır:


<template>
  <b-container>
    <b-card>
    <!-- Bootstrap Jumbotron -->
    <b-jumbotron>
      <!-- satır -->
      <b-row>
        <!-- genişliği 4 olan sütun -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- genişliği 8 olan sütun -->
        <b-col cols="8">
          <h1>Calculez votre impôt</h1>
        </b-col>
      </b-row>
    </b-jumbotron>
    <!-- bileşen -->
    <ClickOnMe msg="Information..." />
    </b-card>
  </b-container>
</template>


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

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

5.3. [ClickOnMe] bileşeni

[ClickOnMe] bileşeni yeni kavramları getirir:


<template>
  <div>
    <!-- yeşil arka planlı mesaj -->
    <b-alert show variant="success" align="center">
      <h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
    </b-alert>
    <!-- sarı arka planlı mesaj -->
    <b-alert show variant="warning" align="center" v-if="show">
      <h4>{{msg}}</h4>
    </b-alert>
    <!-- mavi düğme -->
    <b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
  </div>
</template>

<script>
  export default {
    name: "ClickOnMe",
    // bileşen ayarları
    props: {
      msg: String
    },
    // bileşen özellikleri
    data() {
      return {
        // düğme başlığı
        buttonTitle: "Cacher",
        // mesajın görüntülenmesini kontrol eder
        show: true
      };
    },
    // yöntemler
    methods: {
      // mesajı gösterir / gizler
      changer() {
        if (this.show) {
          // mesajı gizler
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // mesajı göster
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Yorumlar

4-6. satırlar: Yeşil bir Bootstrap uyarısı. Kullanılan sütun sayısı belirtilmemiştir. Bu durumda Bootstrap’ın 12 sütunu kullanılır;
8-10. satırlar: Bootstrap sarı uyarısı:
- 8. satır: [Vue.js]'teki [v-if] yönergesi, bir HTML bloğunun görünürlüğünü kontrol eder. Uyarı burada bir boole değeri [show] (satır 29) tarafından kontrol edilmektedir. [show==true] ise uyarı görünür, aksi takdirde görünmez;
- 9. satır: Uyarı, bileşenin bir özelliği (20-22. satırlar) olan [msg] mesajını görüntüler;
satır 12: [warning] uyarısını gizlemek/göstermek için tıklanabilen mavi renkli bir düğme;
satır 16-48: bileşenin jS kodu. Bu kod, bileşenin dinamik işleyişini düzenler:
20-22. satırlar: bileşenin özellikleri;
satır 24-31: bileşenin öznitelikleri;

Bir bileşenin [propriétés] ve [attributs] kodları arasındaki fark nedir? 17-47. satırlarda bileşen tarafından dışa aktarılan nesnenin [props] ve [data] alanları arasındaki fark nedir?

Daha önce de gördüğümüz gibi, bir bileşenin [props] özellikleri, bileşenin parametreleridir. Bu parametrelerin değerleri, bileşenin dışından belirlenir. [prop1, prop2, ..., propn] özelliklerine sahip bir B bileşenini kullanan A bileşeni, bunu şu şekilde kullanacaktır: <B :prop1=’val1’ :prop2=’val2’ ...> ;
24-31. satırlardaki [data] işlevi tarafından döndürülen nesne, bileşenin durumunu veya bileşen özniteliklerini temsil eder. Bu durum, bileşenin yöntemleri tarafından işlenir (33-46. satırlar). 1-14. satırlardaki <template> öğesi, hem [propriétés] hem de [attributs] öğelerini kullanır:
- özellik değerleri üst bileşen tarafından belirlenir;
- özniteliklerin değerleri başlangıçta [data] işlevi tarafından belirlenir, daha sonra yöntemler aracılığıyla değiştirilebilir;
- her iki durumda da görsel çıktı, bir özelliğin (üst bileşen) veya bir özniteliğin (bileşen yöntemi) değişikliklerine anında tepki verir. Buna tepkisel arayüz denir;

Bir bileşenin [template]'inde, bir [prop] özelliğini bir [data] özniteliğinden ayıran hiçbir fark yoktur. [template] dinamik verisinin [props] özniteliğine mi yoksa [data] işlevi tarafından döndürülen nesneye mi yerleştirilmesi gerektiğini belirlemek için, bu verinin değerini kimin belirlediğini sormak yeterlidir:

Cevap üst bileşen ise, veri [props] özniteliğine yerleştirilir;
cevap, bileşenin söz konusu olayı yöneten yöntem ise, veri [data] işlevi tarafından döndürülen nesneye yerleştirilir;

[template] burada şu dinamik verileri kullanır:

[show], 8. satır. Bu veri, 12. satırdaki düğme üzerindeki [click] olayını yöneten [changer] yöntemi tarafından dahili olarak işlenir. Dolayısıyla bu, [data] işlevi (satır 29) tarafından oluşturulan bir özniteliktir;
[msg], 9. satır. Bu, üst bileşen tarafından belirlenen bir mesajdır. Dolayısıyla, bu mesaj [props] özniteliğine (21. satır) eklenir;
[buttonTitle], satır 12. Bu veri, 12. satırdaki düğme üzerindeki [click] olayını yöneten [changer] yöntemi tarafından dahili olarak işlenir. Dolayısıyla bu, [data] işlevi (satır 27) tarafından oluşturulan bir özniteliktir;
bileşen tarafından dışa aktarılan nesnenin [name, props, data, methods] özniteliklerinin adları önceden tanımlanmıştır. Başka adlar kullanılamaz;
12. satır: Düğmenin [@click] özniteliği, düğmeye tıklandığında tepki vermesi gereken yöntemi belirtmek için kullanılır. Bu yöntem, bileşenin [methods] özelliğinde bulunmalıdır;
33. satır: Bileşenin [methods] özniteliği, bileşenin tüm yöntemlerini bir araya getirir. Çoğu zaman bunlar, bileşenin bir olayına tepki veren işlevlerdir;
35-46. satırlar: Kullanıcı düğmeye tıkladığında [changer] yöntemi çağrılır:
- [warning] uyarısı görüntüleniyorsa gizlenir ve düğmenin metni [Montrer] olur (satır 39);
- [warning] uyarısı gizliyse, bu uyarı görüntülenir ve düğmenin metni [Cacher] olur (satır 43);
- [warning] uyarısını görüntülemek/gizlemek için, [show] boole değerini değiştiririz (satır 38 ve 42);
- bir yöntem, [data] işlevi tarafından döndürülen [attr] özniteliğine başvurması gerektiğinde, [this.attr] yazılır (satır 38 ve 42). Bu, [data] işlevi tarafından döndürülen nesnenin özniteliklerinin, [this] bileşeninin doğrudan öznitelikleri olduğu anlamına gelir;

5.4. Projenin çalıştırılması

Sonuç şöyledir: