More than 3 years have passed since last update.

11/4 Vue.js 学習１回目

Vue.js

Last updated at 2020-11-06Posted at 2020-11-03

Vue.jsとは

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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up