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>
で置き換えることもできます。
## 関連ページ

【Vue.js入門】使い方・サンプル集
Vue.jsの使い方を入門者向けにサンプルコード付きでまとめました。

【TypeScript入門】使い方まとめ
TypeScriptの基礎文法、使い方について入門者向けにまとめました。

WEB開発入門速報|
コメント