Javascript 未显示Vuejs模板_Javascript_Vue.js_Vue Component

Javascript 未显示Vuejs模板

javascript vue.js

Javascript 未显示Vuejs模板,javascript,vue.js,vue-component,Javascript,Vue.js,Vue Component,我遵循了以下Vuejs视频教程：我的HTML看起来像他（除了他的设计）：然后我的vuejs代码： <script type="text/javascript" src="{{ asset('js/vue.js') }}"></script> <script> new Vue({ el: '#app', delimiters: ['${', '}'] }); Vue.component('mes

我遵循了以下Vuejs视频教程：

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

然后我的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>


新Vue({
el:“#应用程序”，
分隔符：['${'，'}']
});
Vue.component（'消息'{
道具：['title'，'body']，
模板：`
${title}
${body}
`
});

我更改了Vuejs变量分隔符，因为它是一个细枝模板文件。

在浏览器中检查源代码时，HTML代码不会被模板中定义的代码替换。。。我不明白为什么

您正在使用JavaScript模板字符串（

）声明模板

您需要在模板字符串中转义

${

，因为它们对它们有特定的含义

此外，还需要在组件本身上声明

分隔符
JSBin演示：
资料来源：
<!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>


JS-Bin
Vue.component（'消息'{
道具：['title'，'body']，
分隔符：['${'，'}']，
模板：`
\${title}
\${body}
`
});
新Vue({
el:“#应用程序”，
分隔符：['${'，'}']
});

最后一点注意：注意顺序。在使用组件之前必须定义它们
<!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>