CodePenでVue.jsの最小アプリケーションを作成する

CodePenを使うとブラウザで直接JavaScriptのコードを書いてアプリケーションを動かすことが出来ます。サーバーも不要ですし、ちょっとしたアプリケーションであればこれだけでも簡単に作成＆公開が可能です。

CodePenのトップページにCREATEメニューがあります。そちらでPenをクリックして新規作成します。

するとPenの設定画面が開きます。ここのJSメニューで、JavaScriptのライブラリなどのCDNを追加することが出来ます。例えば今回はVueで検索してVue.jsを追加します。

同様にCSSのフレームワークなども追加できます。設定できたら「Save & Close」で確定します。

あとは実際にHTMLとJavaScriptを書いていきます。ひとまずロジックもなにもない、単なる最小の表示を作ってちゃんと動作しているか確かめます。

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  }
})

<div id="app">
  {{ count }}
</div>

これで下記のようにcountの値が表示されているので問題なさそうです。

次に値をかえるロジックを入れていきます。

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count = this.count + 1
    }
  }
})

<div id="app">
  <div>{{ count }}</div>
  <button @click="increment">+</button>
</div>

ボタンを押すと値が増えていくロジックを追加することが出来ました。

実際に試してみることも出来ます。

https://codepen.io/dala00/pen/oNXwzrx

あとはCrieitやQiitaなどは埋め込みも可能です。

CodePenの埋め込み

See the Pen Vue.js simplest application by dala00 (@dala00) on CodePen.