Vue.js 一番簡単な方法でHello Worldしてみる

vue-cliを利用すれば 環境を簡単に構築してくれますが、今回は基礎を理解するため、利用せずにHello Worldから実装していく
環境
- OS Windos10
- エディタ VScode
Hello WorldをVue.jsで実装
下記のソースコードをindex.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 |
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello World' } }) </script> </body> </html> |
保存したファイルをブラウザで開いて確認するとHello Worldが表示される

v-bindとv-ifとv-for を使ってみる
v-bindとv-ifとv-forを利用したサンプルコードです。
下記のソースコードをindex.htmlとして作成。見やすいようにstyleも少し調整
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <div id="app" class="style1"> <h3>データバインディング</h3> <p>{{ message }}</p> </div> <div id="app-2" class="style1"> <h3>v-bind:title</h3> <span v-bind:title="message"> マウスオーバーすればメッセージが表示されます </span> </div> <div id="app-3" class="style1"> <h3>v-if seen1がTRUEなのでseen1のみ表示される</h3> <span v-if="seen1">表示される</span> <span v-if="seen2">表示されません</span> </div> <div id="app-4" class="style1"> <h3>v-for 配列を利用</h3> <span v-for="todo in todos"> {{ todo }} </span> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello World' } }) var app2 = new Vue({ el: '#app-2', data: { message: 'Hello World2' } }) var app3 = new Vue({ el: '#app-3', data: { seen1: true, seen2: false } }) var app4 = new Vue({ el: '#app-4', data: { todos: [ '1','2','3' ] } }) </script> <style> .style1 { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 120px; } h3 { margin: 40px 0 0; color: #41B883; } </style> </body> </html> |
保存したファイルをブラウザで開いて確認

vue.jsは、公式がわかりやすくて、評判通り学習コストが低いと思います。
-
前の記事
windows10 Hyper-VにUbuntu19.10をインストールする 2019.11.01
-
次の記事
Ubuntu19.10にcaddyをインストールする 2019.11.01
コメントを書く