CodePen小技巧原创

大家好，那我们今天就讲一下这个前端开发的一个例体，叫做Co，然后这个COP能干嘛呢？啊，就是一个在线的一个编辑器啊，可以让我们写代码，那其实我们这里点一下new pen，我们就可以看到这样的一个编辑器，然后我们在这边可以写一下个H1。那心无，那他就很快就会响应过来，就实时的反应一个页面，然后我们这里它还有一个控制台，我们可以设置一下I，那我们可以看到它这里控制台就答应了，可以去了，然后重新来一遍。

那其实最近这个网站也是有点卡的，我看到他GS也是可以直接就写到这边就会加载过去，然后讲这个的话，主要是有一些细节，就是说它这边它是可以导入一个CDN的，比如说他是可以用view的，我们可以在这里直接搜view，然后这里可以选版本，我们当然是选一个二就可以，然后我们现在就使用它，然后我们在这里把它换成一个类，那测试这个view的话，我们这里就六一个六。

然后我们绑定一个还有那其实这里就是一个APP，然后这边我们肯定是要挂载到PP上面的，对吧，那idpp，然后我们把he给移进去，然后我们可以定一个data，然我们就可以把这个梅西区给定义出来。那其实这里还是不会显示，我们可以看一下，他说这个没有办法引用。

这样这样。那我们来看一下吧。他这里是肯定是要加一个引号。好，我们可以看到它这个就呈现上去了，对吧，在心湖那当然我们也可以写一个按钮，Button的话，我们当然是要绑定一个事情。那这个事件就叫ad吧，这里是一个加号，那我们可以看到这个家就出来了，那我们，嗯。不要写加号弱了，然后我们定义一个方法，那定义方法这里的话，那DS，然后是一个ad的方法。

这里打错了，我们让他去打印一个，他我可以去试一下先。那我没看到他没反应，我看一下代码，那其实这里写错了C就不对了，CI。然后我们试一下打印打印打印打印打印，我们是可以引入字体的。

然后这个字体我们是可以用一个谷歌，谷歌的一个字体库我们进去。然后我们可以用一下这些字体。然后我们可以用一下这个。那这段CSS我们就复制过来，那当然是写着he，然后我们要引入这个字体。他的一个地址是这个，我们可以写到CSS里面这边，哦不对，这是搜索的，写在这里，然后保存。

那我们看到我们的字体应该就会，嗯，我们看到字体就展现了出来，对吧。那当然了，还有一些非常不错的设置，在这边一个setting，然后这个。那个setting里面有一个编辑，然后在这边我们可以选择一个。高亮或者说一个背景对吧，这边选，然后选择字体大小啊。还有这些快捷键呐。还有这些缩进之类的东西，那这边就可以添加一些常用的代码块啊，然后在CSCSS里面就直接输入这个，它就会弹出这么一串，对吧，那我们也可以回去试一下，就像这样B，然后按住table，它就会展现出来，那这些常用的样式就可以展现在这里，对吧，好吧，谢谢大家。