vue-template模板

最新推荐文章于 2024-02-19 16:43:53 发布

原创最新推荐文章于 2024-02-19 16:43:53 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#template #vue的模板定义 #vue-template #is属性 #is属性绑定组件

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文探讨Vue.js中如何定义组件模板，重点讲解`template`标签的使用以及通过`is`属性动态绑定组件的方法，深入理解Vue的模板定义和组件动态创建。

定义组件模板

<body>
  <div id="app">
    <Hello></Hello>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>

  Vue.component('Hello',{
    template: '<div> hello 组件 </div>',//定义一个组件的模板
  })

  new Vue({ // 这个是根实例组件，它是最大的组件
    el: '#app'
  })

</script>

template标签

<body>
  <div id="app">
    <Hello></Hello>
    <template>
      <p> 456 </p>
    </template>
  </div>
  <Hello></Hello>

  <!-- 组件的模板用一个template标签来完成 -->
  <!-- 
    缺点： 将来渲染到页面中
    有解决方案
   -->
  <template id = "hello">
    <!-- template标签的直接子元素只能有一个 -->
    <div>
      今天是个好日子
      <p> 123 </p>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* template标签在实例范围内是会被解析，将来不会在页面出现，但是实例范围外会出现 */
  Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>

通过is属性绑定一个组件

html中哪些规定了自己的直接子元素的标签，是不能直接放组件的
解决： 通过is属性绑定一个组件

<body>
  <div id="app">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <!-- <Hello></Hello> 这个是不行的  -->
      <tr is = "Hello"></tr>
    </table>
  </div>
  <template id = "hello">
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 
    * html中哪些规定了自己的直接子元素的标签，是不能直接放组件的
    解决： 通过is属性绑定一个组件
  */
  Vue.component('Hello',{
    template: '#hello'
  })
  new Vue({
    el: '#app'
  })
</script>