Vue.js知识点总结 (定义组件与组件的使用)

template模板

模板控制节点内容

    <div id="app">123123</div>
    
    <script>
        new Vue({
            el: "#app",
            template: "<div>{{name}}</div>",
            data: {
                name: 'sagasw'
            }
        })
        //vue的template模板会覆盖id为app的内容，也就是说123123会变成sagasw
    </script>
    

注意：vue控制html内容，只控制第一个，即使加上类名也一样，比如:

                <div class="app">123123</div>
                <div class="app">123123</div>
                <div class="app">123123</div>
                <div class="app">123123</div>
                <div class="app">123123</div>
                <div class="app">123123</div>
                <div class="app">123123</div>
        <script>
            new Vue({
                el: ".app",
                template: "<div>{{name}}</div>",
                data: {
                    name: 'sagasw'
                }
            })
        //vue的template模板会覆盖class为app的内容，但是只能覆盖第一个div块
        </script>
       

针对上面这个vue模块只能渲染一个，无法渲染多个的问题，解决方案就是用组件——component
如下所示:

            <div class=".app">
                    <my-component></my-component>
                    <my-component></my-component>
                    <my-component></my-component>
                    <my-component></my-component>
                    <my-component></my-component>
            </div>
            <script>
                Vue.component('my-component',{
                    template:"<div>234</div>"
                })
                new Vue({
                    el: ".app",
                    template: "<div>{{name}}</div>",
                    data: {
                        name: 'sagasw'
                    }
                })
            //vue的component组件会覆盖class为app的内容，且可以覆盖所有div块
            </script>
    

接下来我们见证一下的全局作用，因为它是全局组件哦

            <div class=".app">
                    <my-component></my-component>
                    <my-component></my-component>
                    <my-component></my-component>
                    <my-component></my-component>
                    <my-component></my-component>
            </div>
            <my-component></my-component>//最终该条代码也将显示234,因为my-component是全局组件，它将被渲染
            <div class="app2">

            </div>
            <script>
                Vue.component('my-component',{
                    template:"<div>234</div>"
                })
                new Vue({
                    el: ".app",
                    template: "<div>{{name}}</div>",
                    data: {
                        name: 'sagasw'
                    }
                })
                new Vue({
                        el: ".app2",
                        template: " <my-component></my-component>",
                        data: {
                            name: 'sagasw'
                        }
                    })
            </script>

使用函数作为数据返回，好处是每次渲染组件都要调用函数返回一个对象，这样的话，每个对象返回的值都拥有自己的地址，保证被渲染的节点的唯一性,这就是局部组件的定义

    <div class=".app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
    </div>
    <my-component></my-component>//最终该条代码也将显示234,因为my-component是全局组件，它将被渲染
    <div class="app2">

    </div>
    <script>
        Vue.component('my-component',{
            template:"<div>234</div>"
        })
        new Vue({
            el: ".app",
            template: "<div>{{name}}</div>",
            data: function(){
                return "sagasw";
            }
        })
        new Vue({
                el: ".app2",
                template: " <my-component></my-component>",
                data: {
                    name: 'sagasw'
                }
            })
    </script>