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




↓↓完成図
https://twitter.com/nonnonkapibara/status/1166711295384510465
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">⛱️Vue.js⛱️CodePen⛱️<br>Vue.jsをCodePenで実装してみたよぉ。<br>CDN（インターネット経由）でできるので、めっちゃ便利♪♪<a href="https://t.co/z92om6dOAu">https://t.co/z92om6dOAu</a> <a href="https://t.co/FrcWwWINq0">pic.twitter.com/FrcWwWINq0</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1166711295384510465?ref_src=twsrc%5Etfw">August 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<p class="codepen" data-height="800" data-theme-id="dark" data-default-tab="html,result" data-user="nonkapibara" data-slug-hash="mdbmOpx" style="height: 800px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="nonVueJsCountUp">
  <span>See the Pen <a href="https://codepen.io/nonkapibara/pen/mdbmOpx/">
  nonVueJsCountUp</a> by nonkapibara (<a href="https://codepen.io/nonkapibara">@nonkapibara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```html: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>

```

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


```

```css: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」を選択する
<img width="1070" alt="スクリーンショット 2019-08-28 22.34.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/31ab93d3-7bfe-9f3f-339b-6297e78fb6ed.png">

HTMLタブを選択して、内容をコピーすれば、Qiitaに埋め込める
<img width="841" alt="スクリーンショット 2019-08-28 22.36.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a4a11547-9670-5e83-4ff8-e045bc4f96ec.png">



はてなブログに、CodePenを埋め込むには、「iframe」を貼り付けたらできました。
<img width="845" alt="スクリーンショット 2019-08-28 22.40.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/caf9a4cd-b5e4-ddcf-7815-da26e9129fda.png">

「はてなブログ」にCodePenが埋め込まれています。
[かぴばらさんの覚書ブログ nonkapibara](https://nonkapibara.hatenablog.com/entry/2019/08/28/224230)