Uncaught ReferenceError: Vue не определен в room.js: 109

этот код запускается на веб-странице, и в результате в Google отображается ошибка Uncaught ReferenceError: Vue не определена в room.js: 109, а также указывается, что Vue.component ("room", является uncaught referenceError и должен быть не определено, но я не знаю почему, потому что у меня был import 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;
}

javascript html css vue.js

11.06.2018 09:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

456

Ответы 1

ReferenceError: Vue is not defined at room.js:109

Просто поместите <script>, который загружает Vue перед, тот, который загружает ваше приложение (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

"it still has the same problem"

Вы должны понимать, что в текущем состоянии вы все еще выполняете свой сценарий room.jsперед, браузер проанализировал ваш HTML-код <body>, следовательно, DOM еще нет, и new Vue({el: '#app'}) не найдет ничего, к чему можно было бы прикрепиться.

Либо отложите вызов new Vueпосле DOM, либо просто переместите теги <script> в конец вашего <body>: https://plnkr.co/edit/lTziUUiE7egVr1IaynpL?p=preview

См., Например, Инвариантное нарушение: _registerComponent (...): целевой контейнер не является элементом DOM

у него все еще та же проблема

— 14.06.2018 08:28

Это не. См. Отредактированный ответ. Вы можете не понимать, что ваше приложение все еще не работает по другой причине. См. Также ответ выше.

— 14.06.2018 09:38

11.06.2018 09:22