Introduction-to-Vuejs-Development_1-04
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[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/di...
</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/di...
<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開発入門]] ＞ 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/di...
</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/di...
<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...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
