【Vue.js】Vue.js总结[组件基础]

技术文章 胡成

前言:

这些天Vue.js老师也讲完了,学习心情就跟之前学C#一样一样的{苦笑},为了让自己印象更为深刻,记得住自己所学,我将把Vue.js的学习内容不定期的以连载的形式发表上来,也算是给想提前学习Vue.js的同学们可以有个很好的预览知识点。好了,接下开始讲解Vue.js的基础内容之一组件


组件基础

一:基本概念

组件是一个可复用的Vue实例,需要挂载到Vue的实例,组件与 new Vue 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项而组件是没有的。

二:定义组件

组件的data和Vue实例的data是有区别的:

组件通过一个函数返回一个对象如图:

搜狗截图20180831201019.png

Vue实例data是个对象如图:

搜狗截图20180831201956.png

组件的html元素是定义在template(组件模板)属性上的,通过Vue实例el指定挂载的位置/区域使用

如图:

搜狗截图20180831203232.png

三:注册组件到Vue实例

1:全局注册

在注册一个组件的时候,我们始终需要给它一个名字定义的名字是有要求的。

组件名定义要求:

定义组件名的方式有两种:

第一种:使用 kebab-case (短横线分隔命名)

例如:my-component-name

使用的时候 <my-component-name>

第二种:PascalCase 帕斯卡命名|大驼峰|

例如:MyComponentName

使用 <my-component-name>(推荐)

使用 <MyComponentName>(错误!)

命名总结:组件名称最好全部采用小写,因为html标签始终都是小写的。只有html的名称与组件一致才匹配。

另外一种方式组件名采用大驼峰命名,表签名每个单词用短横杠分隔。

推荐组名名小写,因为html的标签名始终都是小写方式渲染的,这样就可以避免不必要的麻烦。

组件注册实例如图:

搜狗截图20180831204812.png

通过组件名称应用组件 <button-counter>。

实例如下:

搜狗截图20180831205146.png


实例效果图(点击时数字+1):

搜狗截图20180831205617.png搜狗截图20180831205706.png

2:局部组件

全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。局部组件的定义与全局组件定义相差不多,有点不同的就是组件的components需要注册到new Vue实例里,

代码如下:

搜狗截图20180901110315.png

效果如下:

搜狗截图20180901110647.png

对于 components 对象中的每个属性来说,其属性名就是自定义组件的名字,其属性值就是这个组件的选项对象。

有点需要注意局部注册的组件在其子组件中不可用。例如,如果你希望 child2 在 componenta 中可用,则你需要这样写:

搜狗截图20180901110315.png

效果如下:

搜狗截图20180901110315.png

关于组件内容还有Prop,自定义事件,插槽,动态组件 & 异步组件,处理边界情况这些内容我会在今后不定期更新尽量详细的讲解以文章发表出来,今天就先到这,谢谢阅读~!



——来自胡小哥Vue.js分享文章(持续更新中...)

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :