Question

基本上，我试图将Vue与Django集成。我有以下模板：

<!DOCTYPE html>
<html>
    <head>
        <title>Django Vue</title>
    </head>

    <body>

        {% verbatim %}
            <div id="components-demo">
                <button-counter></button-counter>
            </div>
        {% endverbatim %}

        <!-- Vuejs -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <!-- App -->
        <script>

            // Define a new component called button-counter
            Vue.component('button-counter', {
              data: function () {
                return {
                  count: 0
                }
              },
              template: `
                    <button v-on:click="count++">You clicked me {{ count }} times.</button>
                `
            });

            // App definition
            new Vue({ el: '#components-demo' });
        </script>

    </body>

</html>

一切都很简单，使用CDN，而不是webpack。组件显示，但计数不显示。换句话说，花括号在我的模板中无法正常运行。这是为什么？我已经开始运行verbatim标签了。

看起来像这样：

任何帮助？

Answer 1

你没有用{{count}}标记包裹{% verbatim %}，这意味着Django正在解释{{count}}，而不是Vue（你应该能够看到这种情况，如果检查正在渲染的模板。

这应该有效：

<!-- App -->
{% verbatim %}
<script>
// Define a new component called button-counter
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: `
        <button v-on:click="count++">You clicked me {{ count }} times.</button>
    `
    });

    // App definition
    new Vue({ el: '#components-demo' });
</script>
{% endverbatim %}

您使用的{% verbatim %}标记并不是必需的，因为您要使用它的标签（在本例中）是因为Django和Vue都使用相同的胡须{{}}语法，这会导致冲突。这意味着只有在语法冲突（例如，胡子语法）时才应使用{% verbatim %}。

为什么花括号不适用于Django模板中的Vue应用程序？

1 个答案: