One of the puzzles in vue

The

document says, "this restriction does not exist if we use templates from the following sources." Why?

Mar.20,2021

I have not encountered this limitation. My understanding is that if you write the template in html, there will be this limitation, for example:

<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: '-sharpapp',
                data: {
                    message: 'Hello Vue!'
                }
            });        
        </script>
    </body>
</html>

in addition, there is no such restriction in vue component templates or string component templates, because in these cases the template is not directly processed by the browser. You can use chrome to open the html below and you will find that the ttt tag is mentioned outside the 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>

clipboard.png


means that some default tags can only nest specified tag elements or they will not take effect
for example, table ul ol option in the document, these tags option can only be used in select, otherwise there is no effect

Menu