- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
<!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のイベントハンドラーを使えば、こういう書き方ができるんですね。