> 前端开发 > 前端MVVM框架之“Vue.js组件篇”

前端MVVM框架之“Vue.js组件篇”

前端开发 千千 2019-10-02 18:29:04 87712 阅读 6 评论

简介 前言: 相信看过上一篇“Vue.js入门”的同学,对Vue大概有了一定程度上的了解。废话不多说,今天我们接着聊Vue的组件系统! 为什么说:“组件系统是Vue中一个核心的功能呢?” 因为它能帮助我们,提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题... 到底vue的组件系统有什么魅力呢?让我们一起来看看:

前言: 相信看过上一篇“Vue.js入门”的同学,对Vue大概有了一定程度上的了解。废话不多说,今天我们接着聊Vue的组件系统!

为什么说:“组件系统是Vue中一个核心的功能呢?”

因为它能帮助我们,提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低难维护复用性等问题...

到底vue的组件系统有什么魅力呢?让我们一起来看看:

一、声明组件

1、普通组件声明方式

在引用vue.js后,首先我们会实例化一个Vue的实例。如下:

var Vue = new Vue()

然后在声明组件,如下:

Vue.component('组件名称',{配置项})

Vue components


我们声明好组件后,如何去调用呢? 伪代码如下:

<div id="parentBox">
  <my-component></my-component> //调用声明的组件</div>


注意:所有声明的组件名称中,包含有驼峰写法的组件,得修改成“-”。比如:你的组件名称为:“MyComponent”。那么调用为my-component。


2、单文件组件声明方式

可能有些朋友会问:“什么是单文件组件呢?

通俗点说:就是以.Vue文件名结尾的组件称为“单文件组件”。如下图:


单文件组件


在一个.Vue文件中 

1、样式:style 

2、内容:template 

3、行为:script 三者分离。

可能我们传统开发组件时,还需要把css、JavaScript、html三者分开来写。而在Vue的单文件组件中却让三者在一起了,这样就变得更加像一个单独的模块。

传统开发一个组件可能是这样,如图所示:


old-components.png


文章评论

  • VIP02

    对对对
    2019-10-05 19:43:37
  • VIP02

    测试添加
    2019-09-23 15:48:59
  • 3211

    评论测试。。。。。
    1970-01-01 08:00:00
  • 陈新彬

    ceshi测试
    1970-01-01 08:00:00
  • 陈新彬

    ceshi测试
    1970-01-01 08:00:00
  • 陈新彬

    ceshi测试
    1970-01-01 08:00:00