支配vue框架初阶项目之博客网站-注册页面-选择框

ArthurSlog

SLog-30

Year·1

Guangzhou·China

Aug 5th 2018

要越快 就需要越多的能量并需要承受更大的压力 当然也可以依附在快速运动的物体上

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

Slog1_如何使用nodejs与mysql进行数据交互

Slog4_使用后端框架KOA实现静态web服务器

Slog6_使用vue前端框架实现单页应用(SPA)

Slog24

Slog25

Slog26

前端部分：

统计页面-计算属性和侦听器、https://cn.vuejs.org/v2/guide/computed.html 主页：index.html

注册界面-条件渲染、https://cn.vuejs.org/v2/guide/conditional.html :signup.html

登陆界面 :signin.html

后台用户管理的界面-列表渲染、https://cn.vuejs.org/v2/guide/list.html 用户界面: account.hmtl

调查问卷-文本、多行文本、复选框、单选按钮、选择框、https://cn.vuejs.org/v2/guide/forms.html : form.html

离开页面提醒-事件处理、https://cn.vuejs.org/v2/guide/events.html

移动端样式兼容-Class与Style绑定、https://cn.vuejs.org/v2/guide/class-and-style.html

后端部分：

数据库数据交互模块-部署、配置

静态web服务器

用户注册模块

用户登陆模块

统计分析模块

用户状态模块-超时、无效、非法

关键思路开始编码

切换至 client 文件夹路径下

cd client

创建一个新的文件夹 “js” 用于存放前端的 js 文件

mkdir js

我们现在来更新 signup.html 注册页面的前端样式，在js文件夹里创建一个js文件 signup.js，这个，就是vue框架文件，指导客户端前端的js文件

cd js

signup.js

我们在 signup.html 里面引用这个新编写的js文件

signup.html

切换至server文件夹路径下

cd server

现在，启动静态web服务器

node index.js

现在打开浏览器，在地址栏输入 127.0.0.1:3000，正常显示主页后，点击 signup 链接，正常情况下，你会看到 age 选项变成选择框了

至此，我们使用 vue模版语言 更新了 signup.html 这个注册页面的 age 选项的样式为选择框。

如果你喜欢我的文章 欢迎点赞 留言

谢谢