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

template模板

模板控制节点内容

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

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

                <div class="app">123123div>
                <div class="app">123123div>
                <div class="app">123123div>
                <div class="app">123123div>
                <div class="app">123123div>
                <div class="app">123123div>
                <div class="app">123123div>
        <script>
            new Vue({
                el: ".app",
                template: "
{{name}}
",
                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:"
234
"
                })
                new Vue({
                    el: ".app",
                    template: "
{{name}}
",
                    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:"
234
"
                })
                new Vue({
                    el: ".app",
                    template: "
{{name}}
",
                    data: {
                        name: 'sagasw'
                    }
                })
                new Vue({
                        el: ".app2",
                        template: " ",
                        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:"
234
"
        })
        new Vue({
            el: ".app",
            template: "
{{name}}
",
            data: function(){
                return "sagasw";
            }
        })
        new Vue({
                el: ".app2",
                template: " ",
                data: {
                    name: 'sagasw'
                }
            })
    script>