Vue.js Eğitimi 02-25

VueJS ile event dinlemek

by Bilal AFSAR

HTML

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

<div id="app">
  <button v-on:click="showAlert">Alert Göster</button>
  <button v-on:click="showAlert('test mesajı')">Custom Alert Göster</button>
  <button v-on:click="counter++"> Arttır </button>
  <button v-on:click="counter+=2"> 2 Arttır </button>
  <button v-on:click="increaseCounter"> Arttır2 </button>
	<p> {{ counter > 10 ? "10'dan büyük" :"10'dan küçük"}}	</p>
  <button v-on:click="increaseCounter(3)"> Miktarla Arttır </button>
  <p> {{ counter }} </p>
	<p> {{ (counter * 10) / 2 }}	</p>
  <p v-on:mousemove="updateCoords"> Koordinatlar {{ x }}, {{ y }}
    <span v-on:mousemove.stop> GİZLİ BÖLME </span>
  </p>
  <p v-on:mousemove="updateCoords($event, 2)"> Koordinatlar {{ x }}, {{ y }} (Ayrıca sayacı arttır )</p>

  <input type="text" v-on:keyup.enter.space.13="showAlert2" />
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    counter: 0,
    x: 0,
    y: 0,
  },
  methods: {
    showAlert: function(str) {
      alert(typeof(str) === 'string' ? str : '');
    },
    increaseCounter: function(step) {
      if (typeof(step) === "number")
        this.counter += step;
      else
        this.counter++;
    },
    updateCoords: function(event, step) {
      var type = typeof(step);
      if (type === "number")
        this.counter += step;
      this.x = event.clientX;
      this.y = event.clientY;
    },
    showAlert2: function(e) {
      alert(e.target.value);
    },

  }
});