vue dom模板解析以及注意事项

2018-04-09 本文已影响0人 Weastsea

参考文章：https://cn.vuejs.org/v2/guide/components.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C

vue 模板类型

html 模板
字符串模板
内联模板字符串
<script type="x-template">模板
注意事项

1：html 模板

直接跟原生的html标签混合在一起的

<body>
  <!-- html模板 -->
  <div id="demo">
    <span :customId="id">{{message}}</span>
  </div>
  <script>
    let obj = {
      message: 'hello,world',
      id: '123'
    }
    var vm = new Vue({
      el: '#demo',
      data: obj
    })
  </script>
</body>

2：字符串模板

以下代码一种是定义的全局的组件，一种是定义在父组件中的组件，均是通过字符串来定义的。
注意：通过模板字符串来声明的模板，会替换挂载元素

<body>
  <div id="template"></div>
  <script>
    Vue.component('my-component', {
      props: ['param'],
      template: `
        <div>A custom component{{param}}</div>
      `
    })
    new Vue({
      el: '#template',
      data: {
        name: 'donghai'
      },
      components: {
        'se-com': {
          props: ['param'],
          template: `<div>我是第二个组件{{param}}</div>`
        }
      },
      // 字符串模板，替换全部的模板，内联字符串模板
      template: `
      <ol>
        <tr is="my-component" :param="name"></tr>
        <tr is="se-com" :param="name" ></tr>
        <se-com :param="name"></se-com>
      </ol>
      `
    })
  </script>
</body>

3：内联字符串模板

内联字符串模板是在父组件中引用其他的组件

new Vue({
      el: '#template',
      data: {
        name: 'donghai'
      },
      components: {
        'se-com': {
          props: ['param'],
          template: `<div>我是第二个组件{{param}}</div>`
        }
      },
      // 字符串模板，替换挂载元素
      template: `
      <ol>
        <tr is="my-component" :param="name"></tr>
        <tr is="se-com" :param="name" ></tr>
        <se-com :param="name"></se-com>
      </ol>
    })

4：<script type="x-template">模板

通过script标签来声明

<body>
  <div id="app">
    <select>
      <option is="optioncomp"></option>
    </select>
  </div>
    <!--模板内容存放区域-->
  <script type="text/x-template" id="optioncompTemp">
    <option>a</option>
  </script>
  <script>
    new Vue({
      el: '#app',
      components: {
        'optioncomp': {
          template: '#optioncompTemp'
        }
      }
    })
  </script>
</body>

5：注意事项

由于HTML本身的限制，某些元素内只能是某些元素，例如<ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table>
  <tr is="my-row"></tr>
</table>

应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：