1. 首页
  2. IT资讯

「vue基础」手把手教你编写一个简单的 Vue 组件

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcad0b3338d104fa49bf2466c2b421265″ img_width=”1200″ img_height=”500″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E大家好,本篇文章我将带着大家一起学习如何编写自定义组件(Components),通过u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714581642574299651u002F?group_id=6714581642574299651″ target=”_blank”u003E「vue基础」新手快速入门篇(一)u003Cu002Fau003E这篇文章的学习,我们知道了 Vue 设计的目的就是为了方便我们创建基于组件UI的项目。基于这个设计原则,我们可以更专注于设计可重用、各自独立、基于接口方式的组件,就好比乐高玩具一样,我们可以基于组件组装我们的项目。u003Cu002Fpu003Eu003Cpu003E首先我们来看一个简单的例子,比如我们有一个头像的组件(avatar)用来展示用户的头像,我们只需要创建一次,我们就可以随意将此组件添加至项目需要用到的地方,十分方便。比如如下的集成方式:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fbda70ab25a714a0eaf6415d4b621e3e9″ img_width=”1612″ img_height=”1036″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从上述代码我们可以看出,在项目中集成组件十分方便,就类似一个 HTML 标签,这个标签我们可以自定义,比如这个例子,我们定义的是 <avatar>, 除了自定义标签,你还可以自定义任何属性,同时可利用属性进行传值,比如这个例子我们自定义了src属性。u003Cu002Fpu003Eu003Ch1u003E自定义组件u003Cu002Fh1u003Eu003Cpu003E接下来,我们来学习如何编写Vue自定义组件。u003Cu002Fpu003Eu003Cpu003E首先我们来先了解下,在 u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714581642574299651u002F?group_id=6714581642574299651″ target=”_blank”u003E「vue基础」新手快速入门篇(一)u003Cu002Fau003E这篇文章我们通过引入JS文件快速熟悉了Vue,基于这种方式我们如何自定义组件呢。我们可以使用 Vue 这个全局对象声明组件,声明的函数接受两个参数,u003Cstrongu003E一个是组件的名称,一个是组件设置相关的参数对象u003Cu002Fstrongu003E,基于这种方式,我们可以用如下的方式,快速自定义组件:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F0e8764a9c2974567a00bc54da7793c1b” img_width=”1812″ img_height=”964″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cblockquoteu003Eu003Cpu003E关于组件的命名,你可以选择kebab case(短横线命名)的方式,例如 my-custom-componen,或者使用 pascal case(帕斯卡命名)首字母大写的方式进行命名,例如 MyCustomComponent,个人比较推荐使用 pascal case。u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E通过这种方式注册的组件可以在项目中的任何位置进行使用,并可以嵌套在其他组件的模板里,这样大大提高了我们开发的灵活性。u003Cu002Fpu003Eu003Cpu003E在本系列的上一篇文章里u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6743878508386189835u002F?group_id=6743878508386189835″ target=”_blank”u003E「vue基础」Vue相关构建工具和基础插件简介u003Cu002Fau003E,我们介绍了单文件组件(single file components:SFCs) ,并且简单的介绍了如何声明组件,通过这种方式声明的组件,我们需要通过import的方式进行引用才能进行使用。在后面我会详细进行介绍。u003Cu002Fpu003Eu003Ch1u003E组件参数介绍u003Cu002Fh1u003Eu003Cpu003E通过Vue对象进行组件声明的设置相关参数和使用 new Vue 方式进行实例化的设置参数基本一致(这篇文章 u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714581642574299651u002F?group_id=6714581642574299651″ target=”_blank”u003E「vue基础」新手快速入门篇(一)u003Cu002Fau003E有介绍),但是还有两个重要的区别。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E首先,组件不接受 el 这个参数u003Cu002Fstrongu003E,你需要提供 template 属性进行设置模板的内容。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E字符串模板u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fd2b0ca0c7de243c4a07db870f50561af” img_width=”1780″ img_height=”964″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E如果字符串内容以 # 开头,Vue将会视为选择器,并在 DOM 中查找匹配的元素,然后将其内容作为模板的内容,如下所示:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EDOM模板u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fd767e74387c5449e8a530e9be4c8b69b” img_width=”1916″ img_height=”964″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E如果你使用 SFCs 的方式创建组件,你需要使用 <template><u002Ftemplate> 这样的标记在你的.vue文件中,如下所示:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EHelloWorld.vueu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F5bf79296e04841509b361d1386595043″ img_width=”1340″ img_height=”1324″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E第二个不一样的地方就是组件的 data 参数属性必须是个函数声明u003Cu002Fstrongu003E,通过return的形式返回数据,每个组件包含一个数据对象实例。如下段代码所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F29b78ee757864fe49f2e534a90fab76e” img_width=”1748″ img_height=”1324″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E亲自动手实践一个简单的自定义组件u003Cu002Fh1u003Eu003Cpu003E好了,接下来我们重新回到 u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714581642574299651u002F?group_id=6714581642574299651″ target=”_blank”u003E「vue基础」新手快速入门篇(一)u003Cu002Fau003E这篇文章的一个示例,我们来亲自动手将这个例子改写成一个 SFCs 方式的自定义组件,首先我门来看下原先示例的代码,关于代码的说明,这里我就不多说了,大家可以返会入门篇进行查看:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F742c4b6c252740ca99028630e584dc15″ img_width=”4072″ img_height=”10036″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E效果如下图:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcc05366f4a06473ba232ca59db9caf4b” img_width=”2326″ img_height=”1038″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E我们将会新建个 .vue 文件,首先你先通过构建工具创建一个Vue项目,不知道怎么创建的朋友们,可以看我的上一篇文章u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6743878508386189835u002F?group_id=6743878508386189835″ target=”_blank”u003E「vue基础」Vue相关构建工具和基础插件简介u003Cu002Fau003E,里面有详细介绍,接下来我们按照默认的方式创建一个 Vue 项目。u003Cu002Fpu003Eu003Cpu003E打开项目文件夹,在 srcu002Fcomponents 路径下,我们来创建一个 StaffDirectory.vue 的文件,按照如下的步骤添加代码,示例如下:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Etemplate部分u003Cu002Fstrongu003E(srcu002Fcomponentsu002FStaffDirectory.vue)u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F046d64548d5647d9bc07715360226b22″ img_width=”3096″ img_height=”3196″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E你可能会注意到我们基本没什么改动,直接把对应的相关区域复制到 <template> 标签内,但是有一点你需要各位注意,最外层一定要有个闭合标签,最外层不能多于1个,因此我们模板的最外层标签是:u003Cu002Fpu003Eu003Cpreu003E<div class=”ui container”><u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E脚本部分u003Cu002Fstrongu003E(srcu002Fcomponentsu002FStaffDirectory.vue )u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F5dc5da0364004f3b947f90b7678f9cde” img_width=”2756″ img_height=”2476″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E你会注意到我们使用了 export 这个关键词,这是ES6+的新语法,允许我们通过模块导入的形式,在其他的组件文件里进行使用。u003Cu002Fpu003Eu003Cpu003E你可能还会注意到,我们这里有个 name 的属性,这个属性也很重要,它将会比较方便的辅助我们进行调试定位问题,稍后的文章会有介绍。因此千万别漏掉这个属性的设置。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E样式部分u003Cu002Fstrongu003E(src u002F StaffDirectory.vue)u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F432d3215bb9b48508ac708324e5887cd” img_width=”1948″ img_height=”1540″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E最后完成的组件代码,如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F64feebbd40a74d9ca1c95e12d0d4a7b7″ img_width=”3296″ img_height=”6364″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E最后在 App.vue 文件引入我们的组件u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们可以使用import语法进行引入我们的组件,示例代码如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F2bb13df3e66b4f1fb4a2d3295ad1be09″ img_width=”2660″ img_height=”1972″ alt=”「vue基础」手把手教你编写一个简单的 Vue 组件” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cblockquoteu003Eu003Cpu003E你可能会注意这里我们导入了一个CSS样式库,在第一篇文章里我们是将CSS文件直接引入,这里你需要通过 npm 的安装这个CSS框架,相关命令:npm install semantic-ui-cssu003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E好了,到这里我们就完成了上篇文章的例子,通过 SFCs 的组件方式进行了改造,你可以通过npm run serve 看看运行效果是否一致。u003Cu002Fpu003Eu003Ch1u003E小节u003Cu002Fh1u003Eu003Cpu003E由于文章篇幅有限,关于组件的介绍,今天就介绍到这里,我们一起学习了如何编写一个简单的自定义组件,下一篇文章我们将继续深入学习组件的相关内容,比如组件的生命周期、属性传值、父子组件传值、槽(Slots),敬请期待。u003Cu002Fpu003Eu003Ch1u003Evue基础相关文章u003Cu002Fh1u003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714581642574299651u002F?group_id=6714581642574299651″ target=”_blank”u003E「vue基础」新手快速入门篇(一)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6743878508386189835u002F?group_id=6743878508386189835″ target=”_blank”u003E「vue基础」Vue相关构建工具和基础插件简介u003Cu002Fau003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「vue基础」手把手教你编写一个简单的 Vue 组件

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10698.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code