title: Uncaught ReferenceError: Vue is not defined at room.js:109
body: <p>these code are run at the webstrom , and the result on google has an error that says Uncaught ReferenceError: Vue is not defined at room.js:109, and it also says Vue.component("room",  is uncaught referenceError and due is not defined, but I don't know why because I had import vue !!</p>
  
  <p>html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;room&lt;/title&gt;
      &lt;link href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css "&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
      &lt;script type="text/javascript" src="room.js"&gt;&lt;/script&gt;
      &lt;script type="text/css" src="room.css"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col_edit"&gt;
                  &lt;h1&gt;飯店資料&lt;/h1&gt;
                  &lt;hr/&gt;
                  &lt;label&gt;折價&lt;/label&gt;
                  &lt;input class="form-control" v-model="discount"/&gt;
                  &lt;label&gt;服務費&lt;/label&gt;
                  &lt;input class="form-control" v-model="service_fee"/&gt;
                  &lt;h1&gt;房間編輯&lt;/h1&gt;
                  &lt;select class="form-control" v-model="edit_id"&gt;
                      &lt;option v-for="(r ,id) in rooms" :value="id"&gt;{{r.name}}&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;button class="btn btn-secondary room_edit" @click="addroom"&gt;+ 新增房間 &lt;/button&gt;
                  &lt;hr/&gt;
                  &lt;div class="room_edit" v-for="(room,id) in [rooms[edit_id]]"&gt;
                      &lt;h4&gt; {{room.name}}&lt;/h4&gt;
                      &lt;label&gt;房間名稱&lt;i class="fa fa-trash cursor_pointer" @click="delete_room(edit_id)"&gt;&lt;/i&gt;&lt;/label&gt;
                      &lt;input class="form-control" v-model="room.name"/&gt;
                      &lt;label&gt;價錢&lt;/label&gt;
                      &lt;input class="form-control" v-model="room.price"/&gt;
                      &lt;label&gt;折價&lt;/label&gt;
                      &lt;input class="form-control" v-model="room.discount"/&gt;
                      &lt;label&gt;英文&lt;/label&gt;
                      &lt;input class="form-control" v-model="room.eng"/&gt;
                      &lt;label&gt;圖片網址&lt;/label&gt;
                      &lt;input class="form-control" v-model="room.cover"/&gt;
                      &lt;label&gt;房間設備&lt;/label&gt;
                      &lt;label&gt;早餐
                          &lt;input class="form-control" type="checkbox" v-model="room.equipment.breakfast"/&gt;
                      &lt;/label&gt;
                      &lt;label&gt;wifi
                          &lt;input class="form-control" type="checkbox" v-model="room.equipment.wifi"/&gt;
                      &lt;/label&gt;
                      &lt;label&gt;浴缸
                          &lt;input class="form-control" type="checkbox" v-model="room.equipment.bathtub"/&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-9 col-rooms"&gt;
                  &lt;h1&gt;房間列表&lt;/h1&gt;
                  &lt;hr/&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-4 col_room" v-for="(room,id)  in rooms"&gt;
                          &lt;room v-bind:room_data="room" v-bind:hotel_discount="discount" v-bind:hotel_fee="service_fee" v-bind:delete_room="delete_room" id="id"&gt;&lt;/room&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;template id="room"&gt;
      &lt;div class="room_container"&gt;
          &lt;div class="cover" v-bind:style="bg_css"&gt;
              &lt;h3&gt;{{ room_data.name }}&lt;/h3&gt;&lt;i class="fa fa-times" @click="delete_room(id)"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="info"&gt;
              &lt;h5&gt;{{ room_data.eng }}
                  &lt;div class="icons"&gt;&lt;span v-if="room_data.equipment.breakfast"&gt;&lt;i class="fa fa-coffee"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span v-if="room_data.equipment.bathtub"&gt;&lt;i class="fa fa-bath"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span v-if="room_data.equipment.wifi"&gt;&lt;i class="fa fa-wifi"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/h5&gt;
              &lt;h5&gt; {{room_data.discount}} * {{ hotel_discount}} = {{ final_discount_show }} 折&lt;/h5&gt;
              &lt;p&gt;{{final_price}}&lt;/p&gt;
              &lt;h4&gt;TWD
                  &lt;s&gt;{{room_data.price}}&lt;/s&gt;
                  &lt;div class="final_price"&gt;{{final_price}}&lt;/div&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>JavaScript:
  
  
  
  
   var rooms = [
      {
          "name": "經濟雙人房",
          "eng": "Economy Double Room",
          "price": 7000,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(1).jpg",
          "discount": 0.9,
          "equipment": {
              "wifi": false,
              "bathtub": true,
              "breakfast": true
          }
      },
      {
          "name": "海景三人房",
          "eng": "Sea view triple Room",
          "price": 7800,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(2).jpg",
          "discount": 0.8,
          "equipment": {
              "wifi": true,
              "bathtub": true,
              "breakfast": false
          }
      },
      {
          "name": "典雅景觀房",
          "eng": "Elegant landscape Room",
          "price": 5400,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(3).jpg",
          "discount": 0.85,
          "equipment": {
              "wifi": false,
              "bathtub": true,
              "breakfast": true
          }
      },
      {
          "name": "尊享豪華房",
          "eng": "Exclusive Deluxe Room",
          "price": 9800,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(4).jpg",
          "discount": 0.8,
          "equipment": {
              "wifi": true,
              "bathtub": false,
              "breakfast": true
          }
      },
      {
          "name": "商務雙人房",
          "eng": "Business Double Room",
          "price": 5600,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (5).jpg",
          "discount": 0.9,
          "equipment": {
              "wifi": true,
              "bathtub": false,
              "breakfast": false
          }
      },
      {
          "name": "溫泉雙人房",
          "eng": "Hot spring double Room",
          "price": 8400,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (6).jpg",
          "discount": 0.6,
          "equipment": {
              "wifi": true,
              "bathtub": true,
              "breakfast": true
          }
      },
      {
          "name": "總統套房",
          "eng": "Presidential Suite",
          "price": 23000,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (7).jpg",
          "discount": 0.75,
          "equipment": {
              "wifi": true,
              "bathtub": true,
              "breakfast": true
          }
      },
      {
          "name": "奢華四人房",
          "eng": "Luxury four Room",
          "price": 8500,
          "amount": 0,
          "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (8).jpg",
          "discount": 0.7,
          "equipment": {
              "wifi": true,
              "bathtub": true,
              "breakfast": false
          }
      }
  ];
  
  Vue.component("room",{
      template: "#room",
      props: ["room_data","hotel_discount","hotel_fee","delete_room","id"],
      computed: {
          final_discount: function(){
              return this.room_data.discount*this.hotel_discount;
  
          },final_discount_show: function(){
              return parseInt(this.final_discount*100);
          },
          final_price: function(){
              return parseInt(this.final_discount*this.room_data.price)+1.0*this.hotel_fee;
          },
          bg_css: function(){
              return {
                  "background-image":"url('"+this.room_data.cover+"')"
              }
          }
      }
  });
  
  var vm = new Vue({
      el: "#app",
      data: {
          rooms: rooms,
          service_fee: 200,
          discount: 0.9,
          edit_id: 0
      },methods: {
          addroom: function(){
              this.rooms.push({
                  "name": "新房間",
                  "eng": "new Room",
                  "price": 0,
                  "amount": 0,
                  "cover": "",
                  "discount": 0.5,
                  "equipment": {
                      "wifi": false,
                      "bathtub": true,
                      "breakfast": true
                  }
              });
              this.edit_id=this.rooms.length-1;
          },
          delete_room: function(id){
              this.rooms.splice(id,1);
          }
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>CSS:
  
  
  
  
  html, body {
      padding: 0;
      margin: 0;
      height: 100vh;
      overflow: hidden;
  }
  
  body {
      padding: 20px;
  }
  
  .cursor_pointer {
      cursor: pointer;
  }
  
  h1 {
      font-size: 24px;
  }
  
  .col_rooms, .col_edit {
      height: 100vh;
      overflow-y: scroll;
      padding-bottom: 50px;
  }
  
  .col_edit {
      background-color: #f4f4f4;
  }
  
  .col_room {
      padding: 20px;
  }
  
  .room_container {
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      cursor: pointer;
  }
  .room_container:hover .cover {
      background-size: 110% auto;
  }
  .room_container .cover {
      height: 150px;
      background-color: #eee;
      position: relative;
      background-size: 100% auto;
      background-position: center center;
      transition: 0.5s;
  }
  .room_container .cover i.fa.fa-times {
      position: absolute;
      top: 10px;
      right: 10px;
      color: white;
      cursor: pointer;
      transition: 0.5s;
  }
  .room_container .cover i.fa.fa-times:hover {
      color: #DB4343;
  }
  .room_container .cover h3 {
      position: absolute;
      bottom: 10px;
      font-size: 20px;
      padding: 5px 15px;
      background-color: #fff;
  }
  .room_container .info {
      padding: 10px;
  }
  .room_container .info h5 {
      font-size: 12px;
  }
  .room_container .info .final_price {
      float: right;
      color: #DB4343;
  }
  .room_container .info .final_price:after {
      content: "$";
  }
  .room_container .info .icons {
      display: inline-block;
      margin-left: 10px;
  }
  .room_container .info .icons span {
      margin-right: 5px;
      opacity: 0.6;
  }
  
  .room_edit {
      margin-top: 30px;
  }
  
  .col-edit {
      height: 100vh;
      overflow-y: scroll;
  }</code></pre>
  </div>
  </div>
  </p>