当前位置:首页 » 《我的小黑屋》 » 正文

将HTML页面改写到vue项目中

19 人参与  2024年09月13日 14:41  分类 : 《我的小黑屋》  评论

点击全文阅读


安装配置vue环境

1.下载安装node.js https://nodejs.org/en/download/

2.安装vue及脚手架 npm install vue -g或者cnpm install vue -g

3.安装webpack模板 npm install webpack –g

4.安装脚手架vue-cli npm install vue-cli -g

一、创建Vue组件

HTML页面中的每个主要部分,都可以创建一个Vue组件。代码中有头部、主体和底部,你可以创建三个组件:App.vue、home.vue和login.vue

views文件夹通常用于存放视图文件,这些视图文件代表了项目中的不同页面或屏幕。每个视图文件都是一个Vue组件,它们定义了页面的结构、样式和行为。 

二、引入element-plus

在 main.js 中引入 Element Plus

使用 Element Plus 组件

在需要使用组件的地方,直接引用组件

三、v-model双向数据绑定

v-model 是 Vue.js 中用于实现表单元素和 Vue 实例数据之间的双向数据绑定的指令。确保输入或选择框的值与 Vue 实例的数据保持同步

通过 Vue 的 v-model 指令实现了数据的双向绑定。用户输入的内容会实时更新到 Vue 实例的 loginForm 对象中,同时若 loginForm 对象中的数据发生变化,输入框的内容也会相应更新。

四、表单验证

1、所用到的三个事件:onfocus(焦点聚焦事件)、onblur(焦点离开事件)、onclick点击事件)。
2、利用事件触发函数,函数中执行校验的信息。
3、使用butten按钮提交事件

这样就把上次我们做到登录注册页引用到vue项目中去了


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/159340.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1