Question

我遵循了这个Vuejs视频教程：https://laracasts.com/series/learn-vue-2-step-by-step/episodes/9?autoplay=true

我的HTML看起来像他（除了他的设计）：

<div id="app">
  <message title="My Component title" body="Lorem ipsum dry"></message>
</div>

然后我的vuejs代码：

<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script>

    new Vue({
        el: '#app',
        delimiters: ['${', '}']
    });

    Vue.component('message', {
        props: ['title', 'body'],
        template: `
            <article class="message">

                <div class="message-header">
                    ${title}
                </div>

                <div class="message-body">
                    ${body}
                </div>
            </article>
        `
    });

</script>

我更改了Vuejs变量分隔符，因为它是一个twig模板文件。检查浏览器中的源代码，HTML代码不会被模板中定义的代码替换......我不明白为什么。

Answer 1

您正在使用JavaScript模板字符串（`）声明模板。

您需要在模板字符串中转义${，因为它们具有特定的含义。逃避：\${

此外，您需要在组件本身上声明delimiters。

JSBin演示：http://jsbin.com/notocozepi/edit?html,js,output

来源：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="app">
  <message title="My Component title" body="Lorem ipsum dry"></message>
</div>


<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>

    Vue.component('message', {
        props: ['title', 'body'],
        delimiters: ['${', '}'],
        template: `
            <article class="message">

                <div class="message-header">
                    \${title}
                </div>

                <div class="message-body">
                    \${body}
                </div>
            </article>
        `
    });

    new Vue({
        el: '#app',
        delimiters: ['${', '}']
    });



</script>
</body>
</html>

最后一点：记住订单。在使用它们之前，必须先定义组件。

Vuejs模板未显示

1 个答案: