解析 DOM 模板时的注意事项

最新推荐文章于 2024-04-14 22:22:02 发布

mjzy

最新推荐文章于 2024-04-14 22:22:02 发布

阅读量921

点赞数 4

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42287935/article/details/103765926

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

下图是 Vue的官网中对解析 DOM 模板时的注意事项：
在这里插入图片描述

“如果我们从以下来源使用模板的话，这条限制是不存在的” 对于这句话困扰了我一段时间，觉得有必要做一个记录：

<body>
  <div id="app">
	<!--  is="" 的方式可以避开一些潜在的浏览器 **解析规则** ，正确渲染元素 -->
    <table>
      <tr is="todo-item-template"></tr>
    </table>

    <!-- 方式一：直接在table下使用子组件 -->
    <table>
      <todo-item-template></todo-item-template>
    </table><hr>

    <!-- 方式二：通过template字符串 -->
    <todo-three></todo-three><hr>

    <!-- 方式三：通过<script type="text/x-template" id="todo-four"></script> -->
    <todo-four></todo-four>
  </div>
 </body>

<script type="text/x-template" id="todo-four-template">
  <table><todo-item-template></todo-item-template></table>
</script>

Vue.component('todo-item-template', {
 template: '<tr>通过控制台查看我是否正确渲染</tr>',
});
Vue.component('todo-four', {
  template: '#todo-four-template',
});
const vm = new Vue({
  el: '#app',
  components: {
    'todo-three': {
      template: '<table><todo-item-template></todo-item-template></table>',
    },
  },
});