熟悉项目
运行项目
- 删除 node_module 和 package_lock.json 这两个文件主要就是一些项目的依赖以及记录的模块的下载地址
- npm install,一键安装项目所需要的依赖包
- 核对node版本和node-sass、node-less之间的版本对应关系,安装适合的版本
- npm run serve
登录页面
- 项目采用了vant组件库,登录页面使用了 van-field输入框 van-button提交按钮 van-grid宫格(用于图片布局或导航) van-sticky 粘性布局 van-dropdown 下拉菜单 tab标签页以及标签所对应的不同内容
- vue中有一个provide,会返回一个对象。和data和methods是平级的,把父组件的方法或者其他属性放入provide内部后,子孙组件就可以使用inject直接获取了。
- 判断用户的输入是类型是数字,是的话就是输入的为手机号,需要在手机号前+86,猜测是调用发送接口验证码的时候需要。
- 根据输入的密码长度判断是否允许登录
$emit通常用于子组件调用父组件方法,实现子组件主动与父组件通信。实现方式是在子组件上使用this.$emit,然后父组件在子组件标签中使用@将方法传递过去。项目中实现该功能 是利用了.sync。具体实现方式如下:
<son :age.sync="age"></son> //父组件 //子组件触发事件 mounted(){ console.log(this.$emit('update:age',123)); }
项目中的.sync主要是实现数据的双向绑定,因为一个input框中只能使用一次v-model及逆行双向数据绑定,而.sync可以实现多个双向绑定。具体实现方式如下:
watch:{ mValue1: { //首先监听mValue1变量(v-model绑定的变量) handler(newVal){ this.$emit('update:value1,'newVal) //mValue1只要变动就传递给value1 } }, value1: { handler(newVal){ this.mValue1 = val }, immediate: true } }
疑问:两个值完全一样为什么要分别定义
- this.$refs.xxx 可以获取div的信息
首页
- 页面比较简单,很多变量不太懂有什么用处
评论 (0)