【Vue.js】Hello World

Javascript用フレームワーク「Vue.js」でHello Worldする方法をソースコード付きでまとめました。

## 「Vue.js」でHello World

Javascript用フレームワーク「Vue.js」でHello Worldしてみました。

## サンプルコード

サンプルプログラムのソースコードです。

■index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>

</head>
<body>

<h1 id="h1Title">{{ title }}</h1>
<pre title="./js/main.js"></pre>
</body>
</html>

■js/main.js

var app = new Vue({
  el: '#h1Title',                 // Vue.jsの適用先(id:h1Title)
  data: { title: 'Excalibur' }    // データの定義（titleのデータを'Excalibur'に)
});

{{ title }}がVue.jsで定義したデータに置換されます。

補足

ここでHTML側の

<div>{{ title }}></div>

は

<div v-text="title"></div>

で置き換えることもできます。

–	関連ページ
1	■【Vue.js入門】使い方・サンプル集
2	■Javascript入門サンプル集
3	■Node.js入門