Vue.jsを書く準備

Vue.jsの公式サイト

まず、Vue.jsの公式サイト からVue.js を読み込むための scriptタグ を取得します。

「 学ぶ 」→「 ガイド 」と進んで、少し下にスクロールすると、Vue.jsを読み込むためのscriptタグが出てきます。

どちらでも良いので片方コピーして、HTMLのbodyタグの中に貼り付けてください。

styles.css と main.js も読み込まれていれば、次のような形になっているはずです。

<!DOCTYPE html>
<html lang="ja"">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/main.js"></script>
</body>
</html>

ファイルの準備

Vue.jsを書く準備が整ったので、あとは index.html と main.jsに必要な記述をしていきます。

HTML

bodyタグに <div id="app"></div> を追加してください。

<body>
    <div id="app">
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/main.js"></script>
</body>

追加した app というidがついたdivタグの意味ですが、

『 Vue.jsの処理は、このdivタグの中だけで有効ですよ』

というように、Vue.jsの 有効範囲を決めるものだと考えてください。
逆に言うと、このdivタグ以外の箇所に Vue.jsの処理を書いても動かないので注意してください。

js

var app = new Vue({
    el: "#app",
    data: {
        message: 'Hello Vue.js'
    }
});

new Vue ：予め用意されている、「Vue」というクラスをインスタンス化して使用しています。
el： elements の略で 「どの領域のVueと結びつけるか」を指定しています。
　　　→ 今回だと、id app の領域のことなので、CSSの記述のように app を指定します。
　
data：使用したいデータをカンマ区切りで並べていきます。
message：messageというキーで Hello Vue.js という値を持たせています。

最後に、HTMLで指定したVueの領域に {{ message }}と記述してください。

<div id="app">
    <p>{{ message }}</p>
</div>

ここまで書いたら、HTMLのファイルを開いてみましょう。

image

うまく表示されたら、Vueに書いた内容がHTMLに反映された証拠です！

では続いて、inputタグを追加してください。
inputタグにv-model="message" とすると、このinputタグに入力された値が message 紐付くようになります。

<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>

紐づくとどうなるかというと、

このように、リアルタイムで入力した文字と同じようにテキストが変化しています。

JavaScriptだけで、このような機能を作成しようとすると大変ですが、Vue.jsではわずかなコード量でこのような機能も作ることができます。

まとめ

今回は、以下の3つが新しく登場しました。

・Vue.jsを書くためのファイル構成
・ v-model
・ {{ }}（口髭という意味で、マスタッシュと呼びます）

ほかにもVue.jsで使える便利な機能がたくさんあるので、次回以降みていきます。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami