我们之前的博客中已经了解了如何创建一个 Vue CLI 项目,并且还简单介绍了项目的结构,今天我们就来看看如何自定义组件。
一、创建组件
我们去 components 目录下创建一个 TestComponent.vue 的组件
一个组件中包括三个部分:template、script、style
template 中是写一些 HTML 样式,好比定义一个 a 标签啊,p 标签啥的;
script 中是写一些方法,绑定的数据等
最后一个 style 是写样式的(这里我们是引入的 Less 预处理,下面我们会去说这个如何去使用)
创建完成后,我们这里还需要解决一个问题,就是 ESLint: Delete `␍`(prettier/prettier)
可以看到哈,这东西太烦了,这个就是 ESLint 的代码检查,这里大家看我的博客,自己去操作解决一下。
https://lemon1234.com/blog/4b14fcffd9d4a80325fc9a428aebf3fb
首先,我们先在 template 中添加一些 DOM
这里我们是有绑定一个 msg 的值,这里我们需要在 script 中添加 msg。
这里要说的是,这个和我们之前学习基础的时候写法不一样。
最后一个我们写一些简单的样式
二、使用组件
上面我们已经将这个组件创建好了,接下来我们来使用一下组件。
我们把组件引入到 Home.vue 中。
首先,我们需要将这个组件 import 到 Home.vue 中。
这里这个红线可以先不管,因为我们还没有使用
然后我们将引入的这个 TestComponent 注册到 Home 中。这里可以参考上面的 HelloWorld。
同样忽略红线~~~
注册的话,我们是需要将组件放到 components 中,这个 components 中就是可以定义注册的组件有那些。详细可以看官网:https://cn.vuejs.org/v2/guide/components.html
最后就是使用,使用的话很简单,我们只需要将这个注册的名字当做标签,写在当前页面(组件)中的 template 即可。
ctrl + s 保存项目,我们来看看效果
三、组件效果查看
丑是丑了点,但是也还好。
这一篇东西不多,大家自己操作一下~~
有问题可以联系我:QQ 2100363119,欢迎大家访问我的个人网站:https://www.lemon1234.com
最近网站已经做好,并且已经上线,欢迎各位留言~~~