Vue Js没有出现在刀片上

Question

我试图在我最近的项目中实现 vue js，因为我是新手，我可能会做一些我无法捕捉到的错误。我正在编写我遵循的步骤以使我的组件工作。如果你发现任何错误。希望你能帮助我解决这个问题。

这是我的刀片视图：

<div class="panel-body">
                   <chat inline-template>

                        You are logged in!

                        <hr>

                        <h2>Write something to all users</h2>
                        <input type="text" class="form-control" placeholder="something" required="required" v-model="newMsg" @keyup.enter="press">            

                        <hr>
                        <h3>Messages</h3>

                        <ul v-for="post in posts">
                       <b>@{{ post.username }} says:</b> @{{ post.message }}</li>    
                        </ul>
                     </chat>
                </div>

app.js

require('./bootstrap');

window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat', require('./components/chat.vue')); 

const app = new Vue({
    el: '#app'
});

这是我的 chat.vue

<script>
module.exports = {

    data() {
        return {
            posts: [],
            newMsg: '',

        }
    },


    ready() {
        Echo.channel('public-test-channel')
            .listen('ChatMessageWasReceived', (data) => {

                // Push ata to posts list.
                this.posts.push({
                    message: data.chatMessage.message,
                    username: data.user.name
                });
            });
    },

    methods: {

        press() {

            // Send message to backend.
            this.$http.post('/message/', {message: this.newMsg})
                .then((response) => {

                    // Clear input field.
                    this.newMsg = '';
                });
        }
    }
};
</script>

当我加载视图时，我什么也没看到。表示空白页。有什么可能的错误？提前致谢

Answer 1

你需要在组件周围有一个 app div：

<div id ="app">
    <chat>

    </chat>
</div>

这是创建 Vue 应用程序的地方。

米克