Vue.js模板未显示求助：按教程操作后组件未渲染

算力阿峰

2026-5-21

问题分析与解决方案

看起来你遇到的问题主要来自两个关键错误：组件注册时机不对，以及模板字符串的误用导致Vue无法正确解析插值。让我一步步帮你修正：

1. 组件必须在Vue实例创建前注册

你现在是先创建了Vue实例，之后才注册message组件。但Vue实例在挂载时（el: '#app'）会立即解析DOM，这时候组件还没注册，所以无法识别<message>标签，自然不会替换它。

2. 模板字符串里的插值被JS提前解析了

你的组件模板用了ES6模板字符串（反引号`），里面的${title}会被JavaScript当作变量直接解析，但此时title并不是当前JS作用域里的变量，所以会变成空值。而且这也不是Vue的插值语法——你设置的delimiters: ['${', '}']是给Vue用的，不是给JS模板字符串用的。

修正后的代码

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

<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script>
// 先注册组件，再创建Vue实例
Vue.component('message', {
  props: ['title', 'body'],
  // 组件可继承根实例的分隔符，也可单独设置
  template: '<article class="message">' +
              '<div class="message-header">${title}</div>' +
              '<div class="message-body">${body}</div>' +
            '</article>'
  // 或者用转义后的模板字符串写法：
  // template: `
  //   <article class="message">
  //     <div class="message-header">\${title}</div>
  //     <div class="message-body">\${body}</div>
  //   </article>
  // `
});

// 再创建Vue实例
new Vue({
  el: '#app',
  delimiters: ['${', '}']
});
</script>