这些代码在webstrom上运行，谷歌上的结果有一个错误，说Uncatch ReferenceError：Vue没有在room.js：109定义，它还说Vue.component("room"，是未捕获的referenceError和du没有定义，但我不知道为什么，因为我有导入vue！
.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>room</title>
<link href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css ">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="room.js"></script>
<script type="text/css" src="room.css"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col_edit">
<h1>飯店資料</h1>
<hr/>
<label>折價</label>
<input class="form-control" v-model="discount"/>
<label>服務費</label>
<input class="form-control" v-model="service_fee"/>
<h1>房間編輯</h1>
<select class="form-control" v-model="edit_id">
<option v-for="(r ,id) in rooms" :value="id">{{r.name}}</option>
</select>
<button class="btn btn-secondary room_edit" @click="addroom">+ 新增房間 </button>
<hr/>
<div class="room_edit" v-for="(room,id) in [rooms[edit_id]]">
<h4> {{room.name}}</h4>
<label>房間名稱<i class="fa fa-trash cursor_pointer" @click="delete_room(edit_id)"></i></label>
<input class="form-control" v-model="room.name"/>
<label>價錢</label>
<input class="form-control" v-model="room.price"/>
<label>折價</label>
<input class="form-control" v-model="room.discount"/>
<label>英文</label>
<input class="form-control" v-model="room.eng"/>
<label>圖片網址</label>
<input class="form-control" v-model="room.cover"/>
<label>房間設備</label>
<label>早餐
<input class="form-control" type="checkbox" v-model="room.equipment.breakfast"/>
</label>
<label>wifi
<input class="form-control" type="checkbox" v-model="room.equipment.wifi"/>
</label>
<label>浴缸
<input class="form-control" type="checkbox" v-model="room.equipment.bathtub"/>
</label>
</div>
</div>
<div class="col-sm-9 col-rooms">
<h1>房間列表</h1>
<hr/>
<div class="row">
<div class="col-sm-4 col_room" v-for="(room,id) in rooms">
<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"></room>
</div>
</div>
</div>
</div>
</div>
</div>
<template id="room">
<div class="room_container">
<div class="cover" v-bind:style="bg_css">
<h3>{{ room_data.name }}</h3><i class="fa fa-times" @click="delete_room(id)"></i>
</div>
<div class="info">
<h5>{{ room_data.eng }}
<div class="icons"><span v-if="room_data.equipment.breakfast"><i class="fa fa-coffee"></i></span><span v-if="room_data.equipment.bathtub"><i class="fa fa-bath"></i></span><span v-if="room_data.equipment.wifi"><i class="fa fa-wifi"></i></span></div>
</h5>
<h5> {{room_data.discount}} * {{ hotel_discount}} = {{ final_discount_show }} 折</h5>
<p>{{final_price}}</p>
<h4>TWD
<s>{{room_data.price}}</s>
<div class="final_price">{{final_price}}</div>
</h4>
</div>
</div>
</template>
</body>
</html>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);
}
}
});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;
}ReferenceError： Vue 未在 room.js：109
只需将加载 Vue 的<script>放在加载应用程序的之前(room.js(：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script type="text/javascript" src="room.js"></script>
这种简单的重新排序确实消除了您抱怨的错误消息：https://plnkr.co/edit/d4onGB56dTpfOHrHm34c?p=preview
">它仍然有同样的问题">
您必须意识到，在当前状态下，您仍然会在浏览器解析您的 HTML<body>之前执行您的room.js脚本，因此还没有 DOM，new Vue({el: '#app'})不会找到任何要附加的内容。
要么在 DOM 准备就绪后延迟new Vue调用，要么简单地将<script>标签移动到<body>末尾：https://plnkr.co/edit/lTziUUiE7egVr1IaynpL?p=preview
例如，参见不变冲突：_registerComponent(...(：目标容器不是 DOM 元素