<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- 開発バージョン -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- 本番バージョン -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body bgcolor="#FFF8DC">
	<div id="app">
		<center>
			<div class="titleStyle">Vue.js カウントアップ</div>
			<div class="sytle001">{{count_number}}回</div><br>
		  <input v-on:click="click_count_up" type="image" class="heartButton" src="https://stat.ameba.jp/user_images/20190827/20/nonkapibara/59/bc/p/o0060005014554332419.png?caw=800">
		</center>
	</div>
	<script src="./main.js"></script>
</body>

</html>
.titleStyle{
    font-size: 30px;
    color: #c71585;
    font-family: 'Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4', sans-serif;
}
.sytle001{
    font-size: 40px;
    color: #ff69b4;
    font-family: 'Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4', sans-serif;
}

.heartButton {
  border: 1px solid #ddd;
  width: 80px;
  height: 70px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}

.heartButton:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

.heartButton:active {
  transform: scale(1.2) rotate(0deg);
  transition-duration: 0.0s;
}
var app = new Vue({
  el: '#app',
  data:{
    count_number: 1
  },
  methods:{
    click_count_up: function(){
      this.count_number++;
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.