CodePenでVue.jsを使う方法

CodePenでVue.jsを使用する方法です。

はじめに

CodePenにまだ登録していない場合は、下記リンクを参照に登録してみてください。

CodePenを無料会員で登録する方法

Vue.jsの設定方法

CodePenの設定画面でVue.jsのCDNを追加することにより、CodePenでVue.jsが使えるようになります。

手順①

CodePenにログインしてください。

「Pen」を選択すると、作業ページを作成できます。

手順②

次に画面右上にある「Settings」ボタンを選択してください。
設定ダイアログが表示されます。

手順③

サイドメニューから「JS」を選択してください。

「Add External Scripts/Pens」という外部スクリプトを追加する入力フォームがありますので、「vue」と入力してください。

オートコンプリート機能により、vueが表示されると思いますので選択してください。

vue.jsのCDNが追加されたらOKです。

最後に「Save & Close」ボタンで設定を保存したら完了です。

おまけ

vue.jsのCDNが設定されているか確認しましょう。
下記内容をコピーしてCodePenに貼り付けて試してみてください。

  <div id="app">
    <p>私は、{{ me }}です。</p>
  </div>

new Vue({
  el: '#app',
  data() {
    return {
      me: 'ネコ'
    }
  }
})

下記画像のように「私は、ネコです」と表示されたらOKです。