- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-08-09T15:41:26+00:00","default:sagasite","sagasite")
#author("2019-08-09T16:07:36+00:00","default:sagasite","sagasite")
[[Vue.js開発入門]] > Chapter 1 Vue.jsって何?
*04 試してみよう [#f89dbcc3]
Vue.jsでプログラムを作ってみます。
ボタンをクリックしたら、クリックした回数をカウントしてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>クリックしたらカウントアップ</h2>
<div id="app">
<p> {{count}}回</p>
<button v-on:click="countUp">カウント</button>
</div>
<script>
new Vue({
el: "#app",
data: {
count:0
},
methods: {
countUp: function() {
this.count++;
}
}
})
</script>
</body>
</html>