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

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
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でプログラムを作ってみます。
ボタンをクリックしたら、クリックした回数をカウントしてみます。

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

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

04 試してみよう†

04　試してみよう†