Introduction-to-Vuejs-Development_1-04 の履歴(No.2)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
Introduction-to-Vuejs-Development_1-04 へ行く。
- 1 (2019-08-10 (土) 00:41:26)
- 2 (2019-08-10 (土) 00:41:26)
- 3 (2019-08-10 (土) 08:14:08)

Vue.js開発入門＞ Chapter 1　Vue.jsって何？

04　試してみよう†

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>

Introduction-to-Vuejs-Development_1-04 の履歴(No.2)

04 試してみよう†

04　試してみよう†