1. morisaku

    No comment

    morisaku
Changes in body
Source | HTML | Preview

Vue.jsとは

 https://jp.vuejs.org/
 UIフレームワーク

Vue Devtools

  • Vue Devtools:Vue開発サポートツール

   https://github.com/vuejs/vue-devtools#vue-devtools
   ・Google Chromeに追加
   <機能>
   ・Componentタブ:親子関係やデータを確認
   ・Vuexタブ:storeの状態を確認
   ・イベントタブ:イベント実行履歴を確認

  • 「Vue.js not detected」が表示される

   https://qiita.com/hashimoto-1202/items/c81f5d4c271eef16d957
   ・拡張機能の設定で「ファイルの URL へのアクセスを許可する」を有効にする

Vue環境構築

  • CDN(直接読み込み): <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • NPM:Node.jsパッケージ管理
  • CLI:コマンドラインインターフェース

fiddle

  • HTM/CSS/JavaScriptを書けるブラウザ

   https://jsfiddle.net/

Hello Worldの表示

<html>
<head>
  <title>Hello World</title>
  <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>
      Hello World
    </p>
    <p>
      {{ message }}
    </p>
  </div>
  <!-- Script -->
  <script>
    document.write('Script Hello World');
    new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    })
  </script>
</body>
</html>