Vue.jsのサイトに行き、トップページの「はじめる」をクリック。

そこにCDNの使用方法が記載されています。

私はvue.jsを始める際に、cdnを貼り付けたはいいがコードをどこにどう記述するのかがわからず、あらゆるサイトを見てもいきなりコードが載っているのみ、もしくはnpmを使ってインストールした方法ばかりで？？？状態でした。なのでその方法も記載しておきたいと思います。

学び始めたばかりでまだ完全に理解していないことばかりです。

最初にこの程度の感じで知りたかった！と自分が思うような言葉を選んでいます。そのため最適な用語ではなかったりすることもあるかと思います。説明があまりにかけ離れている場合やこの方がわかりやすいなどあればお教えいただけると嬉しいです。

CDNを記述

まずはbody最下部に以下を記述。

こちらは開発用のCDNです。本番環境用には別のものが用意されているのでそちらを使用します。(Vue.jsのサイトを参照)

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

私はpugを使用しているので以下のようになります。

html(lang="js")
  head
  body
    // ここにコンテンツ
    script(src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js")

必要なファイル

CDNで使用する場合は最低htmlファイルひとつでことたります。

私の場合だとindex.pugとコンパイル後のindex.htmlのみです。

pugについても導入時にこちらの記事にまとめていますのでよければお読みください。

html(lang="js")
  head
  body
    // ここにコンテンツ
    script(src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js")
    script.
        // ここにvue.jsのscriptを記載

ただこれだとやはり見づらくなって来るので外部読み込みを使うのが妥当かと思います。

以下の例だとindex.jsを読み込んでます。vueのコードはこちらに記載していきます。

html(lang="js")
  head
  body
    // ここにコンテンツ
    script(src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js")
    script(src="index.js") // 外部読み込みをする

Vueインスタンス

Vueではまずインスタンスを作成するところがスタートです。新しくアプリケーションを作る場合に必要な作業です。以下のコードでインスタンスが作成されます。

var vm = new Vue({
  // オプション
})

var vmの部分は変数を定義しているだけなので以下のようになくても問題はありません。

new Vue({
  // オプション
})

文字を描画する

実際に書いていってみます。

描画の基本

描画する方法もいくつかあるのですがまずは一番シンプルな方法です。

elで要素を指定
data内でmessageを作成
{{ message }}で描画できる

See the Pen vueで文字を描画 by soto-ogre (@soto-ogre) on CodePen.

インスタンスの中にelとdataを定義します。

elで指定した要素が描画先です。elにはひとつの要素が指定できます。

templateを使用する

templateは簡単に言うとhtmlを描画するためのオプションです。

template: "内容"で使用できます。先ほどと違いコードをまとめて管理できるのが良い。pugも使用できるみたいです。

See the Pen vueで文字を描画(templateを使用) by soto-ogre (@soto-ogre) on CodePen.

コンポーネントを作成して描画する

コンポーネントはひとまずグループくらいにとらえてください。

詳しく知りたい方は公式ガイドのコンポーネントの基本などを読むと良いと思います。私は始め、理解が追いつかなかったためある程度触ってなんとなく雰囲気を掴んでから読み直しました。

See the Pen [Vue.js]コンポーネントを使用して描画する by soto-ogre (@soto-ogre) on CodePen.

コンポーネントは再利用できます。EDIT ON CODEPENをクリックしてそこでpugにあるvmを増やしたり減らしたりしてみてください。再利用できることがわかると思います。

以上です。

.vueファイルを作成し、外部ファイル化する方法もあるようなのですがCDNで使う状況は、学習もしくは超小規模のサイトかと思うのでこのへんの書き方でよさそうかと。

忘備録

CDNを使ってVue.jsを学ぶ。初日編