欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue之组件

程序员文章站 2024-03-15 10:38:41
...

Vue之组件

W3C为什么有组件概念？

现在的前端领域，对于代码的质量和数量有着非常高的要求，特别容易出问题。

通过组件的方式来完成代码的管理和编写

组件：是一个可以被反复使用，带有指定功能的视图

组件化编程一切都是组件component，把可以被反复使用的任何的视图，都可以封装成组件

组件化的好处（封装）：

（1）提高了代码的复用率

（2）提高开发速度

（3）降低测试难度

（4）降低整个应用的耦合度

1.组建的创建

  Vue.component('my-component',{
            template:'<h1>Hello Component</h1>'
        });

2.组建的使用

组建的使用就像是使用普通的html标签一样

<my-component></my-component>

注意：如果一个组件要渲染多个元素，将多个元素放到一个顶层标签，否则会报错。

3.复合组件

组件可以像html一样来使用，复合组件并不是一个新的概念，就是一个组件，只不过该组件中调用了其他的组件

一个完整的vue的项目，可以比作是一颗组件树，组件树的根就是根组件

组件树可以帮助我们降低业务的复杂度，避免出现一些错误，提高开发速度。

例如：

<body>
    <div id="container">
        <h1>{{msg}}</h1>
        <!-- 调用组件 -->
        <my-title></my-title>

        <my-article></my-article>
    </div>

    <script>

        //要采用组件化的方式来编写页面，把任何一个可被重用的元素封装成组件

        Vue.component("my-title", {
            template: '<div><h1>主标题</h1><h3>副标题<h3></div>'
        })

        Vue.component('my-detail',{
            template:'<p> it is some information</p>'
        })

        Vue.component('my-article',{
            template:'<div><my-title></my-title><my-detail></my-detail></div>'
        })

        new Vue({
            el: "#container",
            data: {
                msg: '麻子'
            }
        })
    </script>
</body>

4.组件的生命周期

分为四个阶段：

create/mount/update/destroy

每一个阶段都对应着自己的处理函数

create(初始化)：beforeCreate created

mount（和挂载相关的处理）：beforeMount mounted

update（根据要更新的数据，做逻辑判断）：beforeUpdate updated

destory（清理工作）：beforeDestory destoryed

例如：

<body>
    <div id="container">
        <h1>{{msg}}</h1>
        <!-- 组建的使用 -->
        <button @click="isShow=!isShow">切换组件是否显示</button>
        <my-component v-if="isShow"></my-component>
    </div>

    <script>
        //组建的创建
        Vue.component("my-component", {
            template: "<div><button @click='handleClick'>clickMe</button><h1>Hello Lifecycle{{count}}</h1></div>",
            data: function () {
                return {
                    count: 0
                }

            },
            methods: {
                handleClick: function () {
                    this.count++;
                }
            },
            beforeCreate: function () {
                console.log("准备创建组件");
            },
            created: function () {
                console.log("组件创建完毕");
            },
            beforeMount: function () {
                console.log("准备挂载到DOM树");
            },
            mounted: function () {
                console.log("挂载完毕");
            },
            beforeUpdate: function () {
                console.log("准备更新了");
            },
            updated: function () {
                console.log("更新完成");
            },
            beforeDestroy: function () {
                console.log("准备destroy");
            },
            destroyed: function () {
                console.log("destroy完成");
            }
        })

        new Vue({
            el: "#container",
            data: {
                msg: '麻子',
                isShow: true
            }
        })
    </script>
</body>
相关标签： Vue之组件 组件

上一篇： 如何实现多个servlet之间的跳转和传递数据

下一篇： NLP中的数据增强技术综述

推荐阅读