概要

ゼロの状態からVue.jsでhello worldしてみる。

自分の前提知識

htmlがどういうもので、簡単な静的ページを作るくらいならできる。
JavaScriptはクライアントサイドの言語で、htmlからどうやって呼び出されてどういう動きをするかくらいはわかる。
flaskやexpressを使った100%サーバサイドのwebアプリなら作れる。
でももっとイケてるwebサイトを作りたい

インストール

本気でやる場合はnpmでvue-cliをインストールするらしいが、htmlのscriptタグでインポートもできる。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

ファイル構成

index.htmlとindex.jsを用意する。htmlではscriptタグでvueをインポートする。

index.html

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

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

        <script src="index.js"></script>
    </body>
</html>

この<div id="app">のブロックに、js側で制御するVueがマウントされる。

index.js

const app = new Vue({
    el: '#app',
    data:{
        message: "momoka!"
    }
})

これはVueインスタンスを作っているだけ。この生成過程をいじればもっと込み入ったことができるはず。

設定箇所

el: #+(divに指定するid)。今回は<div id="app">としているので、el:'#app'となる。
data: htmlに送るデータをjsonで送る

結果

messageに書かれた文字列が表示される。全然イケてないが一応Vueでhello worldをできた。

参考

jp.vuejs.org

青ポスの部屋

旅と技術とポエムのブログ

Vue.js (1) hello world

概要