Vuejs模板未显示答案

【问题标题】：Vuejs template not displayedVuejs模板未显示
【发布时间】：2018-09-02 10:20:02
【问题描述】：

我跟着这个 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代码没有被模板中定义的代码替换......我不明白为什么。

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案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>

最后一点：注意顺序。组件必须在使用之前定义。

【讨论】：