#xhack勉強会

tweetしてね！

Vue.js

公式

https://jp.vuejs.org/v2/guide/

Google アカウント作成

firebaseを始めよう

https://firebase.google.com/

$ npm install -g firebase-tools

$ mkdir vue1019

$ cd vue1019

$ firebase login # firebase logout

$ firebase init

今回はhostingを選択する

まずは基本フォルダ構成

public
- js
  - main.js
- css
  - styles.css
- index.html

index.html

<!DOCTYPE html>
<html>
<head>
  <title>XHACK勉強会</title>
</head>
<body>
  <h1>hello!!松田です</h1>
  <div id="app">
    <ul>
      <li v-for="todo in todos"> {{ todo }} </li>
    </ul>
  </div>
  <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
	<!-- axios -->
	<script src="<https://unpkg.com/axios/dist/axios.min.js>"></script>

  <script src="js/main.js"></script>
</body>
</html>

main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    todos : ["task 1", "task 2", "task 3"]
  }
})