Vuejs组件基础

一、概念

①组件就是对局部视图的封装，组件思想就是把一个很大的复杂的 Web 页面视图给拆分成一块一块的组件视图，然后利用某种特定的方式把它们组织到一起完成完整的 Web 应用构建。

②目前主流的前端框架angular，react、vue都是组件化开发思想，vue中的组件思想借鉴于react

③利用组件可以提高开发效率，增强可维护性

二、使用

①全局组件（通用组件）：一般把网页中特殊的公共部分注册为全局组件，比如轮播图、tab选项卡、分页、通用导航等

    <div id="app">

        <my-header></my-header>

        <my-main></my-main>

        <my-footer></my-footer>

    </div>

    <script src="node_modules/vue/dist/vue.js"></script>

    <script>

        // 组件的名字,不要使用原生的标签名称

        Vue.component('my-header',{

            template:'<header><h1>头部组件</h1></header>'

        });

        Vue.component('my-main',{

            template:`

            <div>

                <ul>

                    <li>轮播图</li>

                    <li>产品内容</li>

                    <li>商品展示</li>

                </ul>

            </div>

            `

        });

        Vue.component('my-footer',{

            template:'<footer><h1>底部组件</h1></footer>'

        });

        new Vue({

            el:'#app',

            data:{

            }

        });

②局部组件（子组件）：一般是注册一些非通用的

    <div id="app">

        <my-child></my-child>

    </div>

    <script src="node_modules/vue/dist/vue.js"></script>

    <script>

        new Vue({

            el:'#app',

            data:{

            },

            components:{

                myChild:{

                    template:'<div><h3>子组件</h3></div>'

                },

            },

        });

    </script>

③组件与组件之间是相互独立的：

默认情况下，组件与组件之间无法进行跨组件数据访问，父子组件都不行
组件就是一种特殊的vue实例，不需要实例化，它管理自己的template，模板组件的template必须只有一个根节点
在组件中，也可以配置类似于vue实例中的一些选项资源，比如data、methods、computed等等

④组件中的data必须是函数

组件的data必须是函数（手动new出来的Vue实例还是普通的对象）
函数内部返回一个对象
如下面这个例子，如果data不是一个函数，则点击其中一个会影响到其他的两个，不能相互独立开来

    <div id="app">

        <demo></demo>

        <demo></demo>

        <demo></demo>

    </div>

    <script src="node_modules/vue/dist/vue.js"></script>

    <script>

        Vue.component('demo',{

            data:function(){

                return{

                    count:0

                }

            },

            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

        });

        new Vue({

            el:'#app',

            data:{

            }

        });

    </script>

巴特西

Vuejs组件基础

一、概念

二、使用

最新文章

热门文章