如何将所有 Vue.js 路由、模板和组件合并到一个文件中？

Question

我正在尝试编写一个 Vue.js 示例，将所有内容合并到一个文件中。基本上，我试图证明服务于一条以上路线的小型筒仓的效率。这是我目前所拥有的：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="app">
            <h1>Hello App!</h1>
            <p>
                <router-link to="/foo">Go to Foo</router-link>
                <router-link to="/categories">Categories</router-link>
            </p>

            <router-view></router-view>
        </div>
    </div>
<script>

    const Foo = { template: '#foo' }

    const Categories = {
        template: '#Categories',
        data: {
            categories: [{ title: "blah" }, {title:"yack"}]
        },
        methods: {
            saveNew: function(event) {
                alert("boo!");
            }
        }
    }

    const routes = [
        { path: '/foo', component: Foo },
        { path: '/Categories', component: Categories }
    ];

    const router = new VueRouter({
        routes: routes,
        mode: 'history',
        base: '/forums/admin/index2/'
    });

    const app = new Vue({
        router
    }).$mount('#app');

    Vue.config.devtools = true;

</script>

<template id="foo">
    <div>foo</div>
</template>

<template id="Categories">
    <div class="form-inline">
        <input type="text" name="newCategoryTitle" class="form-control" />
        <input type="button" v-on:click="saveNew" value="AddNew" class="btn btn-primary" />
    </div>
    <ul>
        <li v-for="category in categories">{{category.title}}</li>
    </ul>
    <table class="table">
        <tr v-for="category in categories">
            <td>{{category.title}}</td>
            <td><input type="button" value="Edit" class="btn btn-primary" /></td>
            <td><input type="button" value="Delete" class="btn btn-primary" /></td>
        </tr>
    </table>
</template>

</body>
</html>

https://jsfiddle.net/jeffyjonesx/sd79npwb/1/

问题在于：Categories 组件中的数据没有绑定到模板，我已经尝试了 ul 和 table。更奇怪的是，如果我将 ul 移动到模板中的第一部分，它就会中断。但是，加载表单上的按钮处理程序有效。

我觉得我的模板声明有误，但我不确定是怎么回事。

Answer 1

Templates can only have one root element. Vue 看到第一个元素，div.form-inline，并忽略其他所有元素。将模板包装在单个 <main> 标记中（div 也可以，但语义！）

<template id="Categories">
  <main>
    <div class="form-inline">
      <input type="text" name="newCategoryTitle" class="form-control" />
      <input type="button" v-on:click="saveNew" value="AddNew" class="btn btn-primary" />
    </div>
    <ul>
      <li v-for="category in categories">{{category.title}}</li>
    </ul>
    <table class="table">
      <tr v-for="category in categories">
        <td>{{category.title}}</td>
        <td><input type="button" value="Edit" class="btn btn-primary" /></td>
        <td><input type="button" value="Delete" class="btn btn-primary" /></td>
      </tr>
    </table>
  </main>
</template>

另外请注意，您使用的是 production 版本的 Vue (vue.min.js)。在开发时，请改用 Vue 的开发版本 (vue.js) 以获得有关此类问题的警告。

如何将所有 Vue.js 路由、模板和组件合并到一个文件中？

How can you combine all Vue.js routes, templates and components into one file?

javascript

vue.js

vue-router

vue-component