专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

vue组件怎么写,vue组件介绍

来源:小易整编  作者:小易  发布时间:2023-02-28 04:34
摘要:vue组件怎么写,vue组件介绍一、组件化思想如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整...

vue组件怎么写,vue组件介绍

一、组件化思想

如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。

因此:我们将一个完整的页面分为很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进行细分。

组件化是Vue.js中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何应用都会被抽象成一颗组件树。

vue组件怎么写,vue组件介绍

组件化思想的应用:
  • 有了组件化的思想,我们在之后的开发中就要充分的利用它。

  • 尽可能的将页面拆分成一个个小的、可复用的组件。

  • 这样让我们的代码更加方便组织和管理,并且扩展性也更强

组件:为了拆分Vue实例的代码量,能够让我们以不同的组件来划分不同的功能模块。

二、组件的使用分为三个步骤:

  • 创建组件构造器

  • 注册组件

  • 使用组件

<div id="app">   <!-- 3、使用组件 -->   <my-com></my-com></div><script>   // 1、创建组件构造器   const myComponent = Vue.extend({     template: `       <div>         <h2>组件标题</h2>         <p>我是组件中的一个段落内容</p>       </div>     `,   })   // 2、注册组件,并且定义组件标签的名称   Vue.component("my-com", myComponent)   var vm = new Vue({     el: "#app",   })</script>

步骤讲解

1、Vue.extend():

调用Vue.extend()创建的是一个组件构造器。

通常在创建组件构造器时,传入template代表我们自定义组件的模板。

该模板就是在使用到组件的地方,要显示的HTML代码。

事实上,这种写法在Vue2.x文档中基本看不到了,它会直接使用下面语法糖

2、Vue.component():

调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。

因此需要传入两个参数:a、注册组件的标签名,b、组件构造器

3、组件必须挂载在某个Vue实例下,否则不会生效

三、全局组件:

1、Vue.component('组件名称',创建出来的组件模板对象)

第一个参数:组件的名称,将来在引用的时候,就是以一个标签的形式来引入

第二个参数:Vue.extend创建出来的组件,其中template就是组件将来要展示的HTML内容

注意:如果使用Vue.component定义全局组件的时候,组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写字母,两个单词之间使用-连接,如果不使用驼峰命名,则直接使用名称即可

vue组件怎么写,vue组件介绍

2、省略vue.extend直接使用Vue.component('组件名称',{})

vue组件怎么写,vue组件介绍

注意:不论使用哪种方式创建出来的组件,组件的template属性指向的模板内容,必须有且只有唯一的一个根元素

vue组件怎么写,vue组件介绍

3、在被控制的#app外面使用template元素,定义组件的HTML模板结构

vue组件怎么写,vue组件介绍

四、使用components定义局部组件

本文地址:百科问答频道 https://www.neebe.cn/wenda/903499.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • 组件库是什么意思?

    组件库是什么意思?

    组件库是一种可用来重新使用和重组大量已创建的可视元件的组合,让开发者可以更轻松快捷地构建应用、界面和交互。它是一个精心设计的函数集,它可以让开发者可以快速搭建应用,而无需从头开发。组件库可以帮助开发者大量节省编写代码的时间和工作量,使开发...

  • 什么是Vue

    什么是Vue

    Vue.js(Vue)是一套用于构建用户界面的开源渐进式JavaScript框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue.js(Vue...

  • mpvue是什么,详解基于Vue的开发框架mpvue

    mpvue是什么,详解基于Vue的开发框架mpvue

    mpvue是什么,详解基于Vue的开发框架mpvue接触微信小程序有一段时间的开发者或开发团队,我相信多多少少都会为自己搭建封装一些便于开发的框架/脚手架,尤其是一些做过Web开发的开发者,受到现如今Web主流开发框架如Angular,Re...

  • vue路由跳转的方式有哪些,vue路由跳转详解

    vue路由跳转的方式有哪些,vue路由跳转详解

    vue路由跳转的方式有哪些,vue路由跳转详解声明式导航1.router-link组件支持用户在具有路由功能的应用中(点击)导航。通过to属性指定目标地址,默认渲染成带有正确链接的a标签,可以通过配置tag属性生成别的标签.不带参数:

  • vue组件怎么写,vue组件介绍

    vue组件怎么写,vue组件介绍

    vue组件怎么写,vue组件介绍一、组件化思想如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整...

  • vue生命周期详述

    vue生命周期详述

    vue生命周期详述,这次来聊一下vue的生命周期!可以看到vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作,那么先列出所有的钩子函数,然后慢慢来!beforeCreatecreatedbeforeMoun...

  • vue计算属性是什么,vue计算属性computed

    vue计算属性是什么,vue计算属性computed

    vue计算属性是什么,vue计算属性computed第一站什么是计算属性computedcomputed是基于它的依赖缓存,只有在它的相关依赖发生改变时才会进行更新。官方文档是这样说的:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性...

  • vue是什么,vue详解

    vue是什么,vue详解

    vue是什么,vue详解。Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为目前前端技术中颇具代表性的一个框架。按Vue作者的说法,Vue(及其生态)是一个渐进式MVVM框架,可以按照实际需要逐步进阶使用更多特性。Vue渐进式示...

  • 周排行
  • 月排行
  • 年排行

精彩推荐