1, is attribute

According to the HTML specification, elements such as < Table >, < UL >, < ol >, < Select > can only contain specific elements. When the template tag uses restrictive elements, there will be a bug in rendering. As shown in the following example:

    <div id="root">
        <table>
            <tbody>
            <row></row>
            <row></row>
            <row></row>
            </tbody>
        </table>
    </div>
    <script>
        Vue.component('row',{
            template: '<tr><td>this is a row</td></tr>'
        })
        var vm=new Vue({
            el: "#root"
        })
    </script>

The rendering results are as follows:

After rendering, the tr element is placed outside the table element. Because only the tr tag can be placed inside the tbody element, the above example will cause a bug if the < row > tag is written inside the T < able >. After the is attribute is introduced, the DOM part in the above example can be written as follows

 <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>
        </table>

In this way, you can render correctly:

2. When defining data in a subcomponent, data must be a function, not an object. This is to ensure that each subcomponent has independent data.

For example:

   <div id="root">      
        <row></row>
        <row></row>
        <row></row>

    </div>
    <script>
        Vue.component('row',{
            data: {
                msg: "hello world"
            },
            template: '<p>{{msg}}</p>'
        })
        var vm=new Vue({
            el: "#root"
        })
    </script>

The browser will report an error:

The data of the subcomponent should read as follows:

  data: function () {
                    return {
                         msg: "hello world"
                    }
            },

At this time, the browser can display correctly