有专门做试吃的网站吗,app设计风格有哪些,wordpress中文相册插件,郑州小程序开发外包公司大家好#xff0c;本篇文章我将带着大家一起学习如何编写自定义组件(Components)#xff0c;通过「vue基础」新手快速入门篇(一)这篇文章的学习#xff0c;我们知道了 Vue 设计的目的就是为了方便我们创建基于组件UI的项目。基于这个设计原则#xff0c;我们可以更专注于设…大家好本篇文章我将带着大家一起学习如何编写自定义组件(Components)通过「vue基础」新手快速入门篇(一)这篇文章的学习我们知道了 Vue 设计的目的就是为了方便我们创建基于组件UI的项目。基于这个设计原则我们可以更专注于设计可重用、各自独立、基于接口方式的组件就好比乐高玩具一样我们可以基于组件组装我们的项目。首先我们来看一个简单的例子比如我们有一个头像的组件(avatar)用来展示用户的头像我们只需要创建一次我们就可以随意将此组件添加至项目需要用到的地方十分方便。比如如下的集成方式从上述代码我们可以看出在项目中集成组件十分方便就类似一个 HTML 标签这个标签我们可以自定义比如这个例子我们定义的是 , 除了自定义标签你还可以自定义任何属性同时可利用属性进行传值比如这个例子我们自定义了src属性。自定义组件接下来我们来学习如何编写Vue自定义组件。首先我们来先了解下在 「vue基础」新手快速入门篇(一)这篇文章我们通过引入JS文件快速熟悉了Vue,基于这种方式我们如何自定义组件呢。我们可以使用 Vue 这个全局对象声明组件声明的函数接受两个参数一个是组件的名称一个是组件设置相关的参数对象基于这种方式我们可以用如下的方式快速自定义组件关于组件的命名你可以选择kebab case(短横线命名)的方式例如 my-custom-componen或者使用 pascal case(帕斯卡命名)首字母大写的方式进行命名例如 MyCustomComponent个人比较推荐使用 pascal case。通过这种方式注册的组件可以在项目中的任何位置进行使用并可以嵌套在其他组件的模板里这样大大提高了我们开发的灵活性。在本系列的上一篇文章里「vue基础」Vue相关构建工具和基础插件简介我们介绍了单文件组件(single file componentsSFCs) 并且简单的介绍了如何声明组件通过这种方式声明的组件我们需要通过import的方式进行引用才能进行使用。在后面我会详细进行介绍。组件参数介绍通过Vue对象进行组件声明的设置相关参数和使用 new Vue 方式进行实例化的设置参数基本一致(这篇文章 「vue基础」新手快速入门篇(一)有介绍)但是还有两个重要的区别。首先组件不接受 el 这个参数你需要提供 template 属性进行设置模板的内容。字符串模板如果字符串内容以 # 开头Vue将会视为选择器并在 DOM 中查找匹配的元素然后将其内容作为模板的内容如下所示DOM模板如果你使用 SFCs 的方式创建组件你需要使用 这样的标记在你的.vue文件中如下所示HelloWorld.vue第二个不一样的地方就是组件的 data 参数属性必须是个函数声明通过return的形式返回数据每个组件包含一个数据对象实例。如下段代码所示亲自动手实践一个简单的自定义组件好了接下来我们重新回到 「vue基础」新手快速入门篇(一)这篇文章的一个示例我们来亲自动手将这个例子改写成一个 SFCs 方式的自定义组件首先我门来看下原先示例的代码关于代码的说明这里我就不多说了大家可以返会入门篇进行查看效果如下图我们将会新建个 .vue 文件首先你先通过构建工具创建一个Vue项目不知道怎么创建的朋友们可以看我的上一篇文章「vue基础」Vue相关构建工具和基础插件简介里面有详细介绍接下来我们按照默认的方式创建一个 Vue 项目。打开项目文件夹在 src/components 路径下我们来创建一个 StaffDirectory.vue 的文件按照如下的步骤添加代码示例如下template部分(src/components/StaffDirectory.vue)你可能会注意到我们基本没什么改动直接把对应的相关区域复制到 标签内但是有一点你需要各位注意最外层一定要有个闭合标签最外层不能多于1个因此我们模板的最外层标签是:脚本部分(src/components/StaffDirectory.vue )你会注意到我们使用了 export 这个关键词这是ES6的新语法允许我们通过模块导入的形式在其他的组件文件里进行使用。你可能还会注意到我们这里有个 name 的属性这个属性也很重要它将会比较方便的辅助我们进行调试定位问题稍后的文章会有介绍。因此千万别漏掉这个属性的设置。样式部分(src / StaffDirectory.vue)最后完成的组件代码如下图所示最后在 App.vue 文件引入我们的组件我们可以使用import语法进行引入我们的组件示例代码如下你可能会注意这里我们导入了一个CSS样式库在第一篇文章里我们是将CSS文件直接引入这里你需要通过 npm 的安装这个CSS框架相关命令npm install semantic-ui-css好了到这里我们就完成了上篇文章的例子通过 SFCs 的组件方式进行了改造你可以通过npm run serve 看看运行效果是否一致。小节由于文章篇幅有限关于组件的介绍今天就介绍到这里我们一起学习了如何编写一个简单的自定义组件下一篇文章我们将继续深入学习组件的相关内容比如组件的生命周期、属性传值、父子组件传值、槽(Slots)敬请期待。vue基础相关文章「vue基础」新手快速入门篇(一)「vue基础」Vue相关构建工具和基础插件简介
