为啥这段 vue 的代码无法正常运行?感觉写的没错

2019-07-01 01:43:42 +08:00
 manyfreebug
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    <!-- <div title="this is hello world">{{msg}}</div>-->
  </div>
	
  <script>
    new Vue({
      el: "#root",
      template: "<div title="this is hello world">{{msg}}</div>",
      data: {
        msg: "hello"
      }
	})	
  </script>
</body>
</html>

报错信息：
SyntaxError: missing } after property list
note: { opened at line 14, column 10
3161 次点击
所在节点    Vue.js
13 条回复
UnluckyNinja
2019-07-01 01:52:10 +08:00
template 里面双引号没转义
建议使用 VSC 等内置语法高亮和显示编译错误的编辑器
MonoLogueChi
2019-07-01 01:56:39 +08:00
按照报错信息，第 14 行第十个字符，是个引号，其实在浏览器里你一点就能直接定位到错误行
zhizunzz
2019-07-01 01:57:00 +08:00
template 字符串用单引号就好了
iwanghang
2019-07-01 01:59:17 +08:00
template: "<div title='this is hello world'>{{msg}}</div>"
双引号里面使用单引号
iwanghang
2019-07-01 02:00:32 +08:00
双引号里面字符串使用单引号，单引号里面使用双引号，通常也会使用\'或\"转义
zealic
2019-07-01 02:24:31 +08:00
语法高亮都告诉你原因了
plqws
2019-07-01 07:17:51 +08:00
这个都不是 vue 的问题了，这是编程基础的问题
aaa5838769
2019-07-01 09:45:26 +08:00
楼上说的有理，跟 vue 没关系，是编程问题了。
15651980765
2019-07-01 10:01:16 +08:00
楼上正解，也可以用 es6 的反引号``
brust
2019-07-01 13:44:41 +08:00
语法高亮都告诉你原因了
Sapp
2019-07-01 14:14:02 +08:00
@aaa5838769 这跟编程基础问题都不打，纯粹是不看错误提示。不过说回来我甚至碰到过工作几年的报了错还是一味的问别人哪里错了，明白的写着的错误都不会看
aaa5838769
2019-07-01 17:32:53 +08:00
@Sapp 哈哈 估计比较懒吧
SilentDepth
2019-07-03 00:06:29 +08:00
这就是为什么建议 JS 字符串用单引号包裹的原因（

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/578828

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX