Vue.js模板单引号失效及HTML模板迁移至app.js报错问题

一、模板字符串的核心语法问题 #

你把HTML模板移到JS的template选项后报错，最可能的原因是多行字符串的处理方式不对，还有没必要的HTML实体（比如<）干扰了语法解析。给你两个实用的解决方案：

方案1：用ES6模板字符串（最推荐） #

直接用反引号（`）包裹整个模板内容，它天生支持多行书写，而且模板里的单双引号都不需要额外转义（除非你模板里本身用到了反引号）。示例代码如下：

var app = new Vue({
  el: "#app",
  data: { /* 你的数据内容 */ },
  filters: { /* 你的过滤器逻辑 */ },
  methods: { /* 你的方法定义 */ },
  template: `
    <div>
      <h1 class="main">Sunrise Vitamins</h1>
      <ul class="vitamins">
        <li class="vitamin-item">...</li>
        <!-- 其他模板内容继续写在这里 -->
      </ul>
    </div>
  `
});

现在主流浏览器和开发环境都支持ES6语法，这个方案写起来最省心，也不容易出错。

方案2：字符串拼接（兼容旧环境） #

如果必须兼容不支持ES6的环境，就用加号把每行字符串拼接起来，同时注意转义模板里的单引号（写成\'）：

var app = new Vue({
  el: "#app",
  data: { /* 你的数据内容 */ },
  filters: { /* 你的过滤器逻辑 */ },
  methods: { /* 你的方法定义 */ },
  template: 
    '<div>' +
      '<h1 class="main">Sunrise Vitamins</h1>' +
      '<ul class="vitamins">' +
        '<li class="vitamin-item">...</li>' +
      '</ul>' +
    '</div>'
});

二、单引号（'）无法正常工作的问题 #

你模板里的'是HTML实体格式的单引号，在JS的template字符串里，浏览器不会自动解析这个实体，直接换成普通单引号就行：

• 用ES6模板字符串时：直接写'，比如把It's good改成It's good
• 用单引号拼接字符串时：转义成\'，比如写成It\'s good

三、额外避坑提示 #

1. 确保模板只有一个根元素——Vue要求模板必须有唯一的根节点，你现在代码里的外层<div>已经满足这个要求，别不小心拆成多个根元素就行。
2. 检查模板里的拼写错误，比如你代码里的<li cla...明显是<li class="..."的拼写失误，这类小错误也会导致控制台报错，要仔细核对。

刚开始学Vue的时候，模板字符串的语法坑确实容易踩，多试两次就能熟练掌握啦！

内容的提问来源于stack exchange，提问作者Alek Parov