Vue.js をどうやって学ぶか #JavaScript

はじめに

学び始めようとして、多くの、というかほとんどの記事で HTML「の一部」、JavaScript「の一部」しか記載が無く、全体としてどう書いてどう動くのか＿＿言い換えるとどのように運用するのか＿＿さっぱりイメージがつかなかったのです。

CODEPEN や JSFiddle などは、ちょっとした動作確認には手軽かもしれませんが、それを運用環境にしている人は居ませんよね？

完全な動作環境

ネット上のサンプル（その「一部」だけが書かれているようなもの）は、以下の HTML に当てはめると動作します。

test.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <!--ここで Vue を読み込む-->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <!--ここにHTMLを記述する-->
        <script>
            // ここにVueを記述する
        </script>
    </body>
</html>

Vue.js を CDN(Content Delivery Network) から読み込んでいますが、この部分をダウンロードした Vue.js にすればオフラインで学ぶことが出来ます。

offline_learn.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <!--ここで Vue を読み込む-->
        <script src="vue.min.js"></script>
    </head>
    <body>
        <!--ここにHTMLを記述する-->
        <script>
            // ここにVueを記述する
        </script>
    </body>
</html>

ローカルに環境（上記 HTML ファイル）ができたら書籍やこちらなどを写経して学ぶことが出来るでしょう。<-リンク先はサンプルが１ページに収まっているのでオフラインで学びたい場合は PDF に印刷したりするのが良いでしょう。