ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます。脱線もしますが助けになれば幸いです。

Vue.jsことはじめ -動作環境構築からHello Worldを出力するまで-

javascript Vue.js

プロジェクトでVue.jsを使うことになったので、とりあえずCDN（Content Delivery Network）で動く環境を作ったので共有します。

必要なもの

構築手順

Vue.jsを読み込むために、 htmlのheadタグ上に以下のscriptタグを乗っけるだけです。
こんな感じでCDNを使うと実行時にスクリプトファイルがダウンロードされます。

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

楽ちんですね。これでVue.jsが動く環境ができました。

サンプルコード

“Hello World!!"と出力するサンプルコードを作ります。兎にも角にも世界にあいさつしないことには始まらんのです。

hello_world.html

<!DOCTYPE html>
<html>
  <title>Vue.jsことはじめ</title>
  <script src="https://npmcdn.com/vue/dist/vue.js"> </script>
  <script src="hello_world.js"></script>

  <body onload="init();">
    <div id="hoge">
      <p>{{ message }}</p>
    </div>
  </body>
</html>

hello_world.js

function init(){
  new Vue({
    el: '#hoge',
    data: {
      message: 'Hello World!!'
    }
  })
}

実行結果

f:id:te-nu:20170219160058p:plain

(∩´∀｀)∩ﾜｰｲ
これでスタートラインに立てました、色々試せますね！

JavaScript フレームワーク入門

JavaScript フレームワーク入門

追記

バージョンはこんな感じに書くと固定できます。@の後ろで設定できます。

<script src="https://npmcdn.com/vue@2.2.0/dist/vue.js"> </script>