Vue.js Eğitimi 02 Ödev 02

by Bilal AFSAR

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="exercise">
  <!-- 1) Butona tıklanıldığında bir alert kutusu çıkartınız -->
  <div>
    <button v-on:click="showMessage">Alert Göster</button>
  </div>
  <!-- 2) "keydown" event'ini dinleyerek value değişkeni içerisinde yazdığınız veriyi saklayın. (ipucu: event.target.value size yazdığınız değeri verebilir.) -->
  <div>
    <input type="text" v-on:keydown="changeValue">
    <p>{{ value }}</p>
  </div>
  <!-- 3) 2.Uygulamayı düzenleyerek eğer keydown ENTER ise yazdığınız verinin value değerine aktarılmasını sağlayın -->
  <div>
    <input type="text" v-on:keydown.13="changeValue">
    <p>{{ value }}</p>
  </div>
</div>

JavaScript

new Vue({
  el: '#exercise',
  data: {
    value: ''
  },
  methods: {
    showMessage: function() {
      alert("alert message");
    },
    changeValue: function(event) {
      this.value = event.target.value;
    }
  }
});