实习日记 01 运行项目
侧边栏壁纸
  • 累计撰写 29 篇文章
  • 累计收到 1 条评论

实习日记 01 运行项目

admin
2022-05-31 / 0 评论 / 48 阅读 / 正在检测是否收录...

熟悉项目

运行项目

  1. 删除 node_module 和 package_lock.json 这两个文件主要就是一些项目的依赖以及记录的模块的下载地址
  2. npm install,一键安装项目所需要的依赖包
  3. 核对node版本和node-sass、node-less之间的版本对应关系,安装适合的版本
  4. npm run serve

登录页面

  1. 项目采用了vant组件库,登录页面使用了 van-field输入框 van-button提交按钮 van-grid宫格(用于图片布局或导航) van-sticky 粘性布局 van-dropdown 下拉菜单 tab标签页以及标签所对应的不同内容
  2. vue中有一个provide,会返回一个对象。和data和methods是平级的,把父组件的方法或者其他属性放入provide内部后,子孙组件就可以使用inject直接获取了。
  3. 判断用户的输入是类型是数字,是的话就是输入的为手机号,需要在手机号前+86,猜测是调用发送接口验证码的时候需要。
  4. 根据输入的密码长度判断是否允许登录
  5. $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
    }
    }

    疑问:两个值完全一样为什么要分别定义

  6. this.$refs.xxx
    可以获取div的信息

首页

  1. 页面比较简单,很多变量不太懂有什么用处
0

评论 (0)

取消