vue 组件简介

 更新时间:2020-08-01 06:25:07   作者:佚名   我要评论(0)

什么是组件?
web的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口

什么是组件?

web的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。

web页面就是由一个个类似这样的部分组成的,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西才分成粒度合理的小东西。

使用组件的好处:

  • 提高开发效率
  • 方便重复使用
  • 简化调试步骤
  • 提升整个项目的课维护性
  • 便于协同开发

组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。
在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

vue.js的组件可以理解为预先定义好行为的ViewModel类。一个组件可以预先定义很多选项。但是最核心的是以下几个:

  • 模板(template)——模板声明了数据和最终展现给用户的DOM之间的映射关系。
  • 初始数据(data)——一个组件的初始数据状态。对于可服用的组件来说,通常是私有的状态。
  • 接受的外部参数(props)——组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式声明为双向绑定。
  • 方法(methods)——对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
  • 生命周期钩子函数(lifecycle hooks)——一个组件会触发多个生命周期钩子函数,比如created、attached、destroyed等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,这可以理解为Controller的逻辑被分散到了这些钩子函数中。

以上就是深入了解vue 组件的详细内容,更多关于vue 组件的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
  • vue抽出组件并传值实例
  • Vue单文件组件开发实现过程详解
  • vue实现从外部修改组件内部的变量的值
  • vue内置组件component--通过is属性动态渲染组件操作
  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作
  • 解决vue的router组件component在import时不能使用变量问题
  • 解决vue动态路由异步加载import组件,加载不到module的问题
  • Vue组件间数据传递的方式(3种)
  • Vue如何实现监听组件原生事件

相关文章

  • vue 组件简介

    vue 组件简介

    什么是组件? web的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口
    2020-08-01
  • Python3爬虫mitmproxy的安装步骤

    Python3爬虫mitmproxy的安装步骤

    mitmproxy是一个支持HTTP和HTTPS的抓包程序,类似Fiddler、Charles的功能,只不过它通过控制台的形式操作。 此外,mitmproxy还有两个关联组件,一个是mitmdump,它是
    2020-07-29
  • 详解JavaScript作用域 闭包

    详解JavaScript作用域 闭包

    JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根
    2020-07-29
  • VUE实时监听元素距离顶部高度的操作

    VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html <!-- 监听ref距离顶部高度 --> <div ref="pronbit"> <div>今日热门</div> <div>今日热销</div> </div> .js mounted(){ window.addEv
    2020-07-29
  • vue监听dom大小改变案例

    vue监听dom大小改变案例

    需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下) 类似于点击折叠左边目录会变小,右边内容区域会变大
    2020-07-29
  • 关于Python3爬虫利器Appium的安装步骤

    关于Python3爬虫利器Appium的安装步骤

    Appium是移动端的自动化测试工具,类似于前面所说的Selenium,利用它可以驱动Android、iOS等设备完成自动化测试,比如模拟点击、滑动、输入等操作,其官方网站为:h
    2020-07-29
  • Vue 监听元素前后变化值实例

    Vue 监听元素前后变化值实例

    我就废话不多说了,大家还是直接看代码吧~ export default { data() { return { item: '' } }, watch: { item(now, before){ let remove = before
    2020-07-29
  • 深入了解JavaScript词法作用域

    深入了解JavaScript词法作用域

    JavaScript并不是传统的块级作用域,而是函数作用域! 一、作用域 JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成
    2020-07-29
  • Jmeter参数化获取序列数据实现过程

    Jmeter参数化获取序列数据实现过程

    一、序列数据是什么 很简单,就是利用参数化能产生顺序值,比如 1,2,3,4,5,6 或者约定格式 001,002,003,004等。 二、jmeter 产生序列数据 2.1 利用函数助手
    2020-07-29
  • Angular+ionic实现折叠展开效果的示例代码

    Angular+ionic实现折叠展开效果的示例代码

    1,html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" i
    2020-07-29

最新评论