如何将所有 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

模板只能有一个根元素。 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>

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-01-20 02:43:44

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-01-20 02:43:44

解决方案1
1 已采纳 2019-01-20 02:43:44