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

作成日 2019.11.01
更新日 2020.07.21
Vue.js
Vue.js

vue-cliを利用すれば環境を簡単に構築してくれますが、今回は基礎を理解するため、利用せずにHello Worldから実装していく

1. 環境
2. Hello WorldをVue.jsで実装
3. v-bindとv-ifとv-for を使ってみる

環境

OS Windos10
エディタ VScode

Hello WorldをVue.jsで実装

下記のソースコードをindex.htmlとして作成する

<!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も少し調整

<!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>

保存したファイルをブラウザで開いて確認