【第2回】Vue.jsで始めるWebアプリ開発【基礎編】

こんにちは、tkcです。

今回は第2回ということで、Vue.jsの基礎部分を進めていきます。

前回(第1回)の記事はこちら↓

目次

HelloWorld!を表示する

ソースはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.jsサンプル</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'HelloWorld!'
            }
        });
    </script>
</body>
</html>

作成手順としては以下の通りです。

  1. VisualStudioCodeで適当な場所にhelloworld.htmlを作成
  2. html:5 と入力し、コード補完でhtmlのソースを入力
  3. 10行目〜22行目を追記

ここでのポイントとしては以下の通りです。

14行目:Vue.jsを使用するための読み込みを行う。公式サイトのインストール手順より)

 →今回は手っ取り早くVue.jsを使用するためCDNと呼ばれる方法を使用しました。

10〜12行目:Vue.jsを反映する部分をdivタグで囲み、idはappを指定する。

 → {{ message }} は後述のVue.jsから値を取得して出力するための書き方です(マスタッシュ記法と言うらしい)。idにappを指定するのはVue.jsの暗黙の了解のようなのでそのようにしておきましょう。

15〜22行目:Vue.jsの中身を書く。

 →16行目でVueのインスタンスを作成、17〜20行目でVueのコンストラクタにオプションオブジェクトを渡しています。dataオブジェクトのプロパティは11行目の変数と同じ名称を指定し、それ以外は現時点ではおまじない程度の認識で大丈夫です。

実行結果はこちら。

HelloWorld!と表示されていることを確認します。

19行目のmessageの値HelloWorld!が11行目のmessageの値として出力されていますね。

Vue.jsの値の渡し方としてはこれが基本となりますので、覚えておきましょう。

まとめ

今回はVue.jsの基本に触れてみました。

この辺りはjavascriptやHTMLに慣れた人ならすんなりと理解できるのではないでしょうか?

逆にこの部分で分からないところがある方は先にjavascriptやHTMLから復習しておきましょう!

今回はここまでです。

次回はVue.jsのキモでもあるディレクティブについてまとめていきます。

それでは!

※筆者も学習中につき、情報に誤りが有りましたらお手数ですがコメントでお知らせください。

tkc

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

仕事と育児に追われながらも家電や節約など
生活に関する事を紹介しています!
お菓子のたべっ子どうぶつに絶賛ハマり中。
ちなみに目玉焼きはマヨネーズ派です。

コメント

コメントする

CAPTCHA


目次