Vue的component使用一点小小的心得

一：Vue.component中的template属性规则：

• 错误写法：

Vue.component('tr-item',{
props:['member'],
template:'{{member.name}}'+
'{{member.shoolnumber}}'+
'{{member.major}}'
})

• 带来的问题：读取模板定义的值时，只能读取到一对定义的name值。

• 一开始我还怀疑template不支持定义多个值(这句话总感觉有问题)
• 正确写法：

  Vue.component('tr-item',{
        props:['member'],
        template:'{{member.name}}'+
        '{{member.shoolnumber}}'+
        '{{member.major}}'
    })

二：Vue中使用组件后生成的DOM受到的HTML限制

• 受限制写法：

            

            

                
name
                
school number
                
major
            
            
            

• 带来的问题：因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容，也就是说在table元素已经渲染完了之后才进行的加载，然后就直接跑外面去了，不会进table标签；

受限制的

• 规避方法，参考自Vue官方文档

            

                
name
                
school number
                
major
            
            
            

            
        

• 效果如下：

  
  
  

  规避

三：Vue组件的运行原理：

未知，欢迎补充，本人第一天看Vue；