vue-例5-3Vue依赖浏览器的HTML解析和标准化处理.html

虾米大王

于 2023-04-27 10:48:37 发布

阅读量392

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/modern358/article/details/129968593

Vue 专栏收录该内容

661 篇文章

订阅专栏

Vue在处理DOM模板时依赖浏览器的HTML解析和标准化过程，这导致了一些限制，比如特定元素如<ul>、<ol>不能直接包含非li子元素。文章通过示例说明了错误的做法，如在<table>内使用自定义<my-row>组件，以及正确的做法，应使用<tris=my-row>。同时，文章介绍了如何创建并使用自定义组件来遵循HTML规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue依赖浏览器的HTML解析和标准化处理</title>
</head>
<body>
    <div id="app">
        <h2>Vue依赖浏览器的HTML解析和标准化处理</h2>
        <p>当使用DOM作为模板时，例如，将el选项挂载到一个已存在的元素上，</p>
        <p>你会受到HTML的一些限制，因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。</p>
        <p>尤其像元素ul、ol、table、select限制了被它包裹的元素，</p>
        <p>而一些像option这样的元素只能出现在其他某些元素内容</p>
        <h3>错误的做法</h3>
        <table border="1">
            <tr><th>表格标题</th></tr>
            <my-row></my-row>
        </table>
        <h3>正确的做法</h3>
        <table border="1">
            <tr><th>表格标题</th></tr>
            <tr is="my-row"></tr>
        </table>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        Vue.component('my-row',{
            template:'<tr>这个是自定义组件</tr>'
        });

        let vm = new Vue({
            el:'#app'
        });
    </script>
</body>
</html>