Introduction-to-Vuejs-Development_1-04 の変更点

追加された行はこの色です。
削除された行はこの色です。
Introduction-to-Vuejs-Development_1-04 へ行く。
#author("2019-08-10T03:06:20+00:00","default:sagasite","sagasite")
[[Vue.js開発入門]] ＞ Chapter 1　Vue.jsって何？

*04　試してみよう [#f89dbcc3]
Vue.jsでプログラムを作ってみます。
ボタンをクリックしたら、クリックした回数をカウントしてみます。

- countup.html
#code(html){{{{
<!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>
}}}}

たったこれだけの記述でカウントアップするボタンを設置することができました。
Vue.jsの記述はシンプルですね！
~

- countup1.html
#code(html){{{{
<!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>

		<script>
		window.onload = function() {
			new Vue({
				el: "#app",
				data: {
					count:0
				},
				methods: {
					countUp: function() {
						this.count++;
					}
				}
			})
		}
		</script>
	</head>
	
	<body>
		<h2>クリックしたらカウントアップ</h2>
		<div id="app">
			<p> {{count}}回</p>
			<button v-on:click="countUp">カウント</button>
		</div>
	</body>
</html>
}}}}

別の書き方の例です。
「<script>」を「<head>」の中に置いています。
「window.onload」というJavaScriptのイベントハンドラーを使えば、こういう書き方ができるんですね。

（参考）[[JavaScript_EventHandlers_window.onload]]

~
これでボタンをクリックしたら回数がカウントアップされるWebページをVue.jsで作ることができました。