vue.js+koa2项目实战(三)登录注册模态框

登录注册模态框

注:

[Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog

原因:diaLog 组件名 与 HTML元素名称 重复,将 组件名 改为 diaLoger 即可。

1.封装 可复用 DiaLog 组件

DiaLog.vue



注:

此处,currentView 为 Login.vue

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 js 特性扩展。

vue.js+koa2项目实战(三)登录注册模态框_第1张图片

 

2.登录/注册 表单 组件

Login.vue




 

3.引用

HeadBar.vue




 

4.主页面

App.vue






 

5.效果图

vue.js+koa2项目实战(三)登录注册模态框_第2张图片

你可能感兴趣的:(vue.js+koa2项目实战(三)登录注册模态框)