【Vue.js】Vue.js サンプル「カウントアップ」 #Vue.js

↓↓完成図
https://twitter.com/nonnonkapibara/status/1166711295384510465

⛱️Vue.js⛱️CodePen⛱️
Vue.jsをCodePenで実装してみたよぉ。
CDN（インターネット経由）でできるので、めっちゃ便利♪♪https://t.co/z92om6dOAu pic.twitter.com/FrcWwWINq0
— non (@nonnonkapibara) August 28, 2019

Vue.jsで、ハート型のボタン「Count　Up」をTapする度に、カウントアップしていくサンプル。

See the Pen nonVueJsCountUp by nonkapibara (@nonkapibara) on CodePen.

index.html


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue.js カウントアップ</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="pic/button.png">
        </center>
    </div>
    <script src="./main.js"></script>
</body>

</html>

main.js

var app = new Vue({
  el: '#app',
  data:{
    count_number: 1
  },
  methods:{
    click_count_up: function(){
      this.count_number++;
    }
  }
});

style.css

.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;
}

CodePenを埋め込むには、右下の「Embed」を選択する

HTMLタブを選択して、内容をコピーすれば、Qiitaに埋め込める

はてなブログに、CodePenを埋め込むには、「iframe」を貼り付けたらできました。

「はてなブログ」にCodePenが埋め込まれています。
かぴばらさんの覚書ブログ nonkapibara