Vue.js 入門としてHello Worldプラスαを解説していきます。
どんなものか知りたい人や、これから初めようとしている方は是非やってみてください！
インストール方法
今回はCDNを使用するので、これをhtml内で読み込むだけになります。（使い方は後述）
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
実際の開発ではnpmなどのパッケージマネージャを使いますが
CDN版でも問題なく動かせるため、今回は使用しています。
jQueryなんかを触ったことがある人は、CDNを使ったことがあるかもしれませんね
Hello Worldの出力
htmlはテンプレートとなっていて、Vue(js)でhtmlに埋め込む値を設定します。
任意のフォルダに
・index.html
・index.js
を作成し、中身はそれぞれ下のようにします
<!DOCTYPE html>
<html>
<head>
<title>Vue Test</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./index.js" defer></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<html>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!",
},
});
実行方法
・index.html
・index.js
を同じフォルダに入れた状態で、index.htmlをブラウザで開きます。
ブラウザにHelloWorldと表示されていればOKです！
解説
上のコードの具体的な解説をして行きます。
index.htmlのX行目 id=”app” がindex.jsのel: “#app” に対応し
index.jsのdata:内message:が index.htmlの{{message}}で出力されています
data:内でkey:value形式で保持されているため、message: “Hello World!”の部分がセットになります。
ちなみに{{}}囲いのことはマスタッシュ構文と呼ばれています。
Htmlのタグへの出力
htmlタグ内にvueの値を出力する場合、先ほどの{{}}は使用できません
<!DOCTYPE html>
<html>
<head>
<title>Vue Test</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./index.js" defer></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<html>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!",
hoge: "fugaFuga",
url: "https://www.google.com/",
},
});
・実際にレンダリングされるhtml
<div id="app"><span name="fugaFuga">Hello World!</span> <br> <a href="https://www.google.com/">サンプル</a></div>
先ほどのHello Worldからの変更点としては
・span、aタグを追加
・vueに変数を2つ追加
解説
タグ内の出力には、htmlの属性の前に：を付け、値にはVueのkeyを入れています
:name=”hoge”
→Vueのhoge: “fugaFuga”と対応
:href=”url”
→Vueのurl: “https://www.google.com/”と対応
最後に
いかがだったでしょうか？
今回はVue.jsの入門編でした。
お読み頂きありがとうございました！
コメント