Vue.jsの入門 お手軽サンプルを試してみる
Vue.jsを試してみます。
Vue CLIを導入する前に、まずは簡単に試せるVue.jsのサンプルを動かしてみます。
Vue.jsのサンプル
以下をhtmlファイルとして保存し、Webブラウザで開きます。
hello_vue.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vueサンプル</title>
</head>
<body>
<div id="app">
{{ text }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
text: "Hello, Vue",
}
});
</script>
</body>
</html>
恐らくこれが最もシンプルなVue.jsのサンプルになると思います。
実行結果
解説
{{ text }} は変数textの値を表示しています。
<div>タグのidにappを指定しています。後述のVueインスタンスで#appと対応が取れていれば任意のidが指定可能ですが、慣例的にappにしています。
<div id="app">
{{ text }}
</div>
Vueインスタンスを生成しています。elで<div>タグのidを指定していて、data配下で「text」という名前の変数を定義し、値を設定しています。
new Vue({
el: '#app',
data: {
text: "Hello, Vue"
}
});
たったこれだけですが、まずは実行して簡単に画面に表示できることがわかりました。
「Vue.jsの入門 お手軽サンプルを試してみる」への1件のフィードバック