vue组件化开发流程梳理,拿来即用

简介: vue组件化开发流程梳理,拿来即用

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

vue组件化开发

组件[component]

组件(Component)是自定义封装的功能。在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能。

而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”。

所以,组件就是一个html网页中的功能,一般就是一个标签,标签中有自己的html内容结构,css样式和js特效。

这样,前端人员就可以在开发时,只需要书写一次代码,随处引入即可使用。

每一个组件只负责对应的结构,样式和交互,各司其职,互不干扰,然后由这些一个又有一个的组件组成了一个完整的页面。

且网页被拆分为组件后,我们就可以进行组件化编码,最直观的优点或亮点就是,组件复用,也就是多个网页相同的部分,只需要写一个组件然后按需引入就行。

vue框架就是做单页面应用的,就是一个html页面,搞定整个网站,所有页面显示效果

比如比较知名的网站:掘金 https://juejin.cn/ 完全用vue写的

每个网站都可以分为固定的几个区域,称为布局。每个区域都是由组件组合而成,当点击不同的区域,又由不同的组件拼凑而成

整个网站的布局类似,由一个html完成

局部组件

三步:声子、用子、挂子

注意:每个组件中的template对应的标签,都必须有一个外层标签包裹

局部声子

//组件化开发,每块页面的功能单独开发,比如对顶部导航栏,组件可以使用el之外vue的任何属性
// 组件化开发(将页面的每块功能,单独封装为一个组件,哪个页面用哪些组件,就直接拿到这几个组件,拼到页面上展示)
//定义一个组件,就是声明子组件,简称声子
let Vheader = {
    //组件的属性必须用函数方式来写
    data(){
        return{
            nav_lst: ['个人中心','登录','注册']
        }
    },
    //组件要有自己的标签,用标签将组件自己的属性包裹起来,外层必须有一个标签套着里面的所有标签
    template: '<h1>{{nav_lst}}</h1>'

};

挂子

局部声子需要挂载在vue对象,或其他组件里面

//声明完子组件,要在vue根组件处或其他组件上挂载,挂载用compoents属性
let vm = new Vue({
    el:'#app',
    data(){
        return{
        }
    },

    //挂载子组件,简称挂子。components,先给组件起个名称
    components:{
        xx: Vheader  //xx就是给挂载的子组件起的别名/名称,可以直接在html中当做标签来使用
    }


  });

用子

在html中把挂载的别名当做标签来使用

  <div id="app">
      <!--  使用子组件,简称用子。直接用挂载时给子组件创建的名称,当做标签来使用    -->
      <!--    content  header footer aside section nav H5有一些新标签,注意,组件名称尽量不要和html自带标签名称冲突 -->
      <xx></xx>

  </div>

浏览器展示

如果还想用其他子组件,同样也需要 声子,挂子,用子 这三个步骤

挂子简化写法

    //挂载子组件,简称挂子。components,先给组件起个名称
    components:{
        // xx: Vheader,  //xx就是给挂载的子组件起的名称,可以直接在html中当做标签来使用
        // xx2:Vcontent,

        //在写挂子的时候,可以让键和值相同,都是用定义组件时的名称,这样只需要写一个
        // Vheader:Vheader, //这时原始写法
        Vheader,  //这是简化写法
        Vcontent
    }


  });

用子直接使用组件名作为标签调用

上面声明的组件,挂载到了哪个vue对象中,只能在哪个vue对象中使用,如果vue对象比较多,而且都要用到组件,一个个挂载就比较麻烦

此时,使用全局组件比较好

全局组件,不需要挂载

// 全局组件  不需要挂载,直接使用。Kk是组件名称,就是局部组件挂载时起的名称,可以当做标签直接在html中使用

   //全局组件,直接用Vue.component()来创建,component不用加s。里面两个参数,第一个是组件类似挂载的名称,第二个是组件内容
    Vue.component('qj',{
        data(){
            return {
                name: '全局组件'
            }
        },
        template: '<h1 style="background-color:red;">{{name}}</h1>'
    })

直接使用

默认组件(全局组件)

直接看代码,局部组件使用时需要挂载,全局组件使用时不需要挂载。那么他们两个什么时候用呢,局部组件就在某个局部使用的时候,全局组件是大家公用的,或者说每个页面都有这么一个功能的时候,在哪里可能都会用到的时候。

组件的使用

我们在进行vue开发的时候,还记得我们自己创建的vm对象吗,这个vm对象我们称为一个大组件,根组件(页面上叫Root),在一个网页的开发中,根据网页上的功能区域我们又可以细分成其他组件,或称为子组件

组件有两种:默认组件[全局组件] 和 单文件组件[局部组件]

生产中,vue对象一般只用来圈地,里面不会写太多数据属性
具体的属性一般都写在子组件中

// 生产中,声明个App总组件,该组件不做数据处理,声明模板,其他组件都挂载在该组件下,vue对象下只挂载该组件
let App = {
    template:
    `<div class="App">
        <Vheader></Vheader>
        <Vcontent></Vcontent>
    </div>`,

    components: {
        Vheader,
        Vcontent
    }


}

Vue对象处挂载组件

 //Vue对象处挂载组件
    let vm = new Vue({
        el:'#app',
        data(){
            return{
            }
        },

        //挂载子组件,简称挂子。components,这里只挂载总组件APP
        components:{
            App
        }

      });

html处只需要App标签即可展示左右子组件的数据

<body>
  <div id="app">
    <!--html这里只需要将总组件标签写在这里,子组件的数据都将展示。也可以根据需求展示全局组件-->
      <App></App>
      <qj></qj>

  </div>

</body>

这样做方便管理,各个组件各自管理各自的

调用时也可以使用自封闭形式写标签,如下

<App />  但可能会有点问题导致页面混乱,所以还是建议使用全封闭标签


相关文章
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
7天前
|
JavaScript
|
6天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
9天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
9天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
9天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
20 1
|
9天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
32 0
|
9天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
14天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
23 1
|
15天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint