6. [vuejs-04] projesi: [v-model, v-bind] yönergeleri, hesaplanan öznitelikler, giriş formu

[vuejs-04] projesinin dizin yapısı şöyledir:

6.1. Ana komut dosyası [main.js]

Bu, önceki örnektekiyle aynıdır.

6.2. Ana bileşen [App]

[App.vue] kodunun içeriği şöyledir:

<template>
  <b-container>
    <b-card>
      <!-- tanıtım mesajı -->
      <b-row>
        <b-col cols="8">
          <b-alert show variant="success" align="center">
            <h4>[vuejs-04] : directives [v-model, v-bind], attributs calculés, formulaire de saisie</h4>
          </b-alert>
        </b-col>
      </b-row>
      <Form />
    </b-card>
  </b-container>
</template>


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

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

[App.vue] bileşeni, yeni [Form] bileşenini kullanır (12., 19. ve 24. satırlar).

6.3. [Form] bileşeni

[Form] bileşeninin kodu şöyledir:

<template>
  <div>
    <!-- form -->
    <b-form>
      <!-- form öğeleri -->
      <b-row>
        <b-col cols="4">
          <b-card bg-variant="light">
            <b-form-group label="Nombre d'enfants à charge" label-for="enfants">
              <b-input type="text"
                       id="enfants"
                       placeholder="Indiquez votre nombre d'enfants"
                       v-model="enfants"
                       v-bind:state="enfantsValide" />
              <b-form-invalid-feedback :state="enfantsValide">Vous devez saisir un nombre positif ou nul</b-form-invalid-feedback>
            </b-form-group>
            <!-- düğme -->
            <b-button variant="primary" :disabled="formInvalide" @click="doSomething">Valider</b-button>
          </b-card>
        </b-col>
      </b-row>
    </b-form>
    <b-row class="mt-3">
      <b-col cols="4">
        <b-alert show variant="warning" align="center">
          <h4>enfants= {{enfants}}</h4>
        </b-alert>
      </b-col>
    </b-row>
  </div>
</template>

<!-- komut dosyası -->
<script>
  export default {
    // ad
    name: "Form",
    // bileşenin statik özellikleri
    data() {
      return {
        // alt öğe sayısı
        enfants: ""
      };
    },

    // hesaplanan özellikler
    computed: {
      // [formInvalide] özniteliği
      formInvalide() {
        return !this.enfantsValide;
      },
      // [enfantsInvalide] özniteliği
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // yöntemler
    methods: {
      doSomething() {
        // doğrulama yapıldığında çocuk sayısı bilinir
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

Görsel çıktı

Yorumlar

• 4-32. satırlar: <b-form> etiketi bir Bootstrap formu ekler;
• 6. satır: <b-row> etiketi, forma bir satır ekler;
• 7. satır: <b-col cols=’4’> etiketi, Bootstrap’ta 4 sütuna yayılan bir sütun ekler;
• 8. satır: <b-card> [6] etiketi, bir Bootstrap kartı, yani kenarlıkla çevrili bir alan ekler;
• 9. satır: <b-form-group> etiketi, birbiriyle bağlantılı bir form öğeleri grubu oluşturur. Burada bir metin ([label] özniteliği) [1], bir giriş alanıyla ([label-for] özniteliği) bağlantılıdır. [label-for] değeri, giriş alanının 12. satırındaki [id] alanının değeridir;
• 10-14. satırlar: <b-input> [2] etiketi bir giriş alanını başlatır:
  • 10. satır: [type=’text’], giriş alanına metin yazılabileceğini belirtir. Birden fazla alt öğe beklendiği için [min=’val1’ max=’val2’ step=’val3’] kısıtlamalarıyla [type=’number’] yazılabilirdi. Bir girişin geçerliliğini nasıl kontrol edileceğini göstermek amacıyla [type=’text’] kullanılmıştır;
  • 12. satır: [placeholder] [3] özniteliği, kullanıcı bir şey girmedikçe giriş alanında görüntülenen mesajı belirler;
  • 13. satır: [v-model] yönergesi, girilen değeri bileşenin 42. satırındaki [enfants] özniteliğiyle iki yönlü olarak ilişkilendirir:
    • girilen değer değiştiğinde, [enfants] özniteliğinin değeri de değişir;
    • [enfants] özniteliğinin değeri değiştiğinde, girilen değer de değişir, yani [2]'in içeriği değişir;
    • Anlaşılması gereken önemli nokta şudur: yukarıdaki mekanizma sayesinde, kullanıcı [Valider] [5] düğmesine tıkladığında, 42. satırdaki [enfants] özniteliğinin değeri, [2]'te girilen değer olur;
  • 14. satır: [v-bind] yönergesi, bir yandan <b-input> etiketinin bir özniteliği (burada [state] özniteliği) ile diğer yandan bileşenin bir özniteliği (burada 53. satırdaki [enfantsValide]) arasında bir bağlantı kurar. [enfantsValide] özniteliği, özniteliğin değerini döndüren bir işlev olması bakımından özeldir. Bu tür özniteliklere “hesaplanmış öznitelik” denir. Hesaplanmış öznitelikler, bileşenin 47. satırındaki [computed] özelliğinde bulunur. Hesaplanan öznitelikler, [data] işlevindeki statik özniteliklerle aynı şekilde kullanılır: 14. satırda [v-bind:state=’enfantsValide()’] değil, parantezler olmadan [v-bind:state=’enfantsValide’] yazılır. Ayrıca, [template] okunduğunda, hesaplanan bir özniteliği statik bir özniteliğinden ayırt etmek mümkün değildir. Bunun için bileşenin komut dosyası koduna bakmak gerekir;
  • 14. satır: [state] özniteliği, girilen değerin geçerli/geçersiz durumunu belirleyecektir: [enfantsValide], [true] değerini döndürürse girilen değer geçerli kabul edilir, aksi takdirde geçersiz kabul edilir. Yukarıdaki ekran görüntüsü, [enfantsValide] işlevi [false] değerini döndürdüğünde [b-input] bileşenini göstermektedir;
  • 15. satır: <b-form-invalid-feedback> [4] etiketi, [2] alanına yapılan giriş geçersiz olduğunda bir mesajın görüntülenmesini sağlar. Bu etiketin [:state=’enfantsValide’] özniteliği, 14. satırdaki [v-bind:state=’enfantsValide’] özniteliğiyle aynıdır. [v-bind] yönergesi atlanabilir, ancak [:] işareti korunmalıdır. Dolayısıyla, [enfantsValide] özniteliğinin değeri [false] olduğunda hata mesajı görüntülenir;
  • 16. satır: <b-group> öğe grubunun sonu;
  • 18. satır: Girişi onaylamaya yarayan [5] düğmesi:
    • mavi renkte olacaktır: [variant=’primary’];
    • [:disabled="formInvalide"]: [disabled] özniteliği, düğmeyi etkinleştirmeye/devre dışı bırakmaya yarar. Bu öznitelik, 49. satırdaki hesaplanan [formInvalide] özniteliğine v-bind ile bağlanmıştır;
    • [@click="doSomething"]: Kullanıcı düğmeye tıkladığında, 59. satırdaki [doSomething] yöntemi çalıştırılacaktır;
  • 19-22. satırlar: Açık olan çeşitli etiketlerin kapatılması;
  • 23-29. satırlar: [template] içinde yeni bir satır eklenir. [class=’mt-3’], [margin (m) top (t) égale à 3 spacers] anlamına gelir. [spacer] ise Bootstrap'ın bir boşluk ölçüsüdür. Bu sınıf, yukarıdaki ekran görüntüsünde [8] aralığını oluşturur. Bu sınıf olmadan, [7] alanı [1-6] alanına yapışır;
  • 24. satır: 4 Bootstrap sütununu kaplayan bir sütun;
  • 25-27. satırlar: [warning] uyarısı, [enfants] statik özniteliğinin değerini gösterir (42. satır). Bu öznitelik, giriş alanıyla iki yönlü bir bağlantıya sahip olduğundan, kullanıcı giriş alanını değiştirdiğinde uyarıda görüntülenen değer de değişir;
  • satır 34-65: bileşenin jS kodu;
  • 42. satır: bileşenin tek statik özniteliği;
  • satır 47-56: bileşenin hesaplanan öznitelikleri;
  • satır 53-55: Giriş, öncesinde veya sonrasında "boşluk" bulunabilen pozitif bir tamsayı ise geçerli kabul edilir;
  • satır 49-51: çocuk sayısı girişi geçerliyse, form geçerli kabul edilir. Genellikle bir formda birden fazla giriş alanı bulunur ve bunların tümü geçerliyse form geçerli kabul edilir;
  • satır 58-63: bileşenin olaylarına tepki veren bileşen yöntemleri. Burada tek bir olay vardır: düğmedeki [click] olayı. Giriş yapılan değere erişebildiğimizi göstermek için sadece bu değeri görüntülemekle yetiniyoruz;

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

[package.json] dosyasını değiştirip projeyi çalıştırıyoruz: