vue中的一处不解

dianwei

20412785

发布于
2018-06-17

文档中说“如果我们从以下来源使用模板的话，这条限制是不存在的”，为什么？
图片描述

vue.js

阅读 1.5k

2 个回答

✓ 已被采纳

我没有遇到过这个限制，我的理解是，如果把模板写在html里，会有这个限制，比如：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            {{ message }}
        </div>
        
        <script>
            var app = new Vue({ 
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            });        
        </script>
    </body>
</html>

除此以外，比如在vue组件的模板里，或字符串形式的组件模板里，都没有这个限制，因为这些情况下模板没有直接被浏览器处理, 你可以用chrome打开下面这个html试一下，你就会发现其中的ttt标签被提到table外面了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span>hello, this is a test</span>
    <table>
      <ttt>haha</ttt>
    </table>
</body>
</html>