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

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

vue 模板类型

  1. html 模板
  2. 字符串模板
  3. 内联模板字符串
  4. 2:字符串模板

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

    
      
    3:内联字符串模板

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

    new Vue({
          el: '#template',
          data: {
            name: 'donghai'
          },
          components: {
            'se-com': {
              props: ['param'],
              template: `
    我是第二个组件{{param}}
    ` } }, // 字符串模板,替换挂载元素 template: `
    })
    4:
    5:注意事项

    由于HTML本身的限制,某些元素内只能是某些元素,例如

        、、
        ...

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

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


        vue dom模板解析以及注意事项_第1张图片

你可能感兴趣的:(vue dom模板解析以及注意事项)