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

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>{{ message }}</p>

</div>

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>

<!DOCTYPE html>

<html>

<head>

<body>

<h3>データバインディング</h3>

<p>{{ message }}</p>

</div>

<h3>v-bind:title</h3>

マウスオーバーすればメッセージが表示されます

</span>

</div>

<h3>v-if　seen1がTRUEなのでseen1のみ表示される</h3>

<span v-if="seen1">表示される</span>

<span v-if="seen2">表示されません</span>

</div>

<h3>v-for 配列を利用</h3>

</span>

</div>

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は、公式がわかりやすくて、評判通り学習コストが低いと思います。

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

環境

Hello WorldをVue.jsで実装

v-bindとv-ifとv-for を使ってみる

windows10 Hyper-VにUbuntu19.10をインストールする 2019.11.01

Ubuntu19.10にcaddyをインストールする 2019.11.01