JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

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

<div id="app">
  <button v-on:click="increase">Click me</button>
  <p>{{ counter }}　click="increase"じゃなくてもcounter++でもOK</p>
    <p v-on:mousemove="updateCoordinates">Coordinates: {{ x }} / {{ y }}</p> - <span v-on:mousemove="dummy">DEAD SPOT</span>
</div>


<div id="app2">
  <button v-on:click="increase(2, $event)">Click me</button>
  <button @click="counter++">Clivk me</button>
  <p>{{ counter * 2 > 10 ? 'Greater than 10' : 'Smaller than 10'}}</p>
      <p v-on:mousemove="updateCoordinates">Coordinates: {{ x }} / {{ y }}</p> - <span v-on:mousemove.stop>DEAD SPOT</span>
      <input type="text" v-on:keyup.enter.space="alertMe">
</div>



<div id="exercise">
  <div>
    <p>▼課題</p>
    <button v-on:click="alertMe">show alert</button>
  </div>
  <div>
    <input type="text" v-on:keydown="value = $event.target.value">
    <p>{{ value }}</p>
    <a v-bind:href="link">$eventまとめ</a>
  </div>
  <div>
    <input type="text" v-on:keydown.
    enter="value = $event.target.value">
    <p>{{ value }}</p>
  </div>
</div>

CSS

#app {
  border: 3px solid pink;
}
 
#app2 {
  border: 3px solid skyblue;
}

JavaScript

new Vue({
el: '#app',　
data: {
	counter: 0,
  x: 0,
  y: 0
},
methods: {
	increase: function() {
  this.counter++;
},
	updateCoordinates: function() {
  this.x = event.clientX;
  this.y = event.clientY;
},
	dummy: function() {
  	event.stopPropagetion();
	}
}
});



new Vue({
el: '#app2',　
data: {
	counter: 0,
  x: 0,
  y: 0
},
methods: {
	increase: function(step) {
  this.counter += step;
},
updateCoordinates: function() {
  this.x = event.clientX;
  this.y = event.clientY;
},
alertMe: function(){
alert('aaaaa');
}
}
});


new Vue({
	el: '#exercise',
  data: {
  	value: '',
    link: 'https://jp.vuejs.org/v2/guide/events.html'
  },
  methods: {
  	alertMe: function() {
    	alert('alert!!!');
    }
  }
});