vue第14天:昨天的补充说明,项目基础配置:公共样式、rem插件以及配置、目录别名配置,登录页:布局、封装输入框以及按钮组件:基本结构、传参处理、校验规则、输入框提示信息的显示和隐藏

补充说明

  1. 自动保存关掉

    vscode 左上角 => 自动保存不要勾

    以后注意: ctrl + s 保存代码

  2. 缩进用两格缩进

在这里插入图片描述

  1. 默认自动补逗号, 在 .prettierrc 加一行配置代码

在这里插入图片描述

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

在这里插入图片描述

  1. vue create 创建项目失败, 报错

原因: node-sass 仓库资源下载失败, 默认这个资源在国外

在这里插入图片描述

解决:

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
  1. vue.config.js 里面补充说明, 关闭弹出来的提示框
module.exports = {
  devServer: {
    open: true,
    overlay: {
      warnings: false,
      errors: false
    }
  },
  lintOnSave: false,
}

在这里插入图片描述

在这里插入图片描述

项目基础配置

公共样式处理

引入中提供的base.css, 在main.js中引入

在这里插入图片描述

在线图标库

在这里插入图片描述

2倍图

以后同学在工作的过程中,从UI那拿到的设计图通常都是640的设计图或者是750的设计图或者720的设计图

实际: 640 => 设计的是 320px 的屏幕, 750 => 设计的是 375px 的屏幕

这是为了在移动端为了在高清屏手机上显示得更加细腻,通常会使用更大的图片,比如2倍图

在这里插入图片描述

css 像素: 就是平时设置的 width: 200px

物理像素: 真实的手机设备的像素光点

设备像素比: dpr => css像素 和 物理像素的比例, dpr = 物理像素 / css 像素

设备像素比越高, 手机清晰度越高!

rem 布局 - 插件 postcss-pxtorem的配置

rem布局的关键点:

  1. 动态的修改 html 的 font-size (lib-flexible插件解决, 通过 js 动态修改html的font-size)
  2. 盒子的大小, 要用 rem为单位 (postcss-px2rem插件解决, 写px自动转rem)

https://www.cnblogs.com/lml2017/p/9953429.html


步骤:

  1. 安装插件

    yarn add lib-flexible postcss-px2rem
    
  2. 在 public 中的 index.html 中删除 meta 标签

    • 先删除 public 中的 index.html 中 meta 标签
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    1. flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。
  3. 在 src / main.js 中导入插件包

    // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size
    import 'lib-flexible'
    
  4. 配置 vue.config.js

    module.exports = {
     devServer: {
     	open: true,
     	overlay: {
       		warnings: false,
       		errors: false
    		}
      },
      lintOnSave: false,
       // rem 的配置
      css: {
        loaderOptions: {
         css: {},
    	   postcss: {
     	    plugins: [
      	     require('postcss-px2rem')({
     	     // 适配 360 屏幕, 设计图720中量出来的尺寸要 / 2
             // 适配 375 屏幕, 设计图750中量出来的尺寸要 / 2
             // 值 = 设计图设计的手机屏宽 / 10  360/10
             remUnit: 36
           })
          ]
        }
      }
     },
    }
    
  5. 重起开发服务器 yarn serve

目录别名的配置

导入组件路径麻烦, 可以配置别名 https://www.cnblogs.com/zhouyingying/p/11382157.html

配置路径别名,方便引用,不用写那么长

配置前(示例):

import Test from '../../components/Test.vue'

配置后(不用再关心文件层级关系)(示例):

import Test from 'components/Test.vue'

import Test from '@/components/Test.vue'   // 默认不配置, 就可以用的

配置 vue.config.js

const path = require('path')// 引入path模块
function resolve (dir) {
  return path.join(__dirname, dir)// path.join(__dirname)设置绝对路径
}


module.exports={
  // 别名的配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('pages', resolve('./src/pages'))
      .set('assets', resolve('./src/assets'))
      .set('styles', resolve('./src/styles'))
    // set第一个参数:设置的别名,第二个参数:设置的路径
  }
}

小注意点:

template结构中的文件地址和style中的文件地址, 如果想用目录别名, 需要加 ~ 前缀, 而 js 中不需要

<template>
  <div>
    <img src="~assets/banner01.jpg" alt="">
  </div>
</template>

<style>
  h3 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: url('~assets/bg.jpg');
  }
</style>
import HmButton from '../../../../components/hm-input.vue'

import HmInput from '../../../../components/hm-input.vue'

import HmButton from 'components/hm-input.vue'

登录页

登录页面布局

scoped属性的说明

当标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

默认情况下, 单文件组件中的样式, 是会互相影响的
只要给style标签, 添加上scoped属性, 就可以保证样式只作用于当前组件的模板了
如果希望样式只作用于当前组件, 推荐大家加上 scoped 属性
scoped原理:
1. 只要style标签, 加上了scoped属性, 就会给当前组件模板的所有元素, 都加上一个自定义属性
   data-v-1f24bdc7
2. 给style标签中的所有选择器, 都加上了属性选择器
   div   =>   div[data-v-1f24bdc7]
  • 基本结构(在 pages文件夹里的 Login.vue 里面写)

在这里插入图片描述

  • 样式

在这里插入图片描述

App.vue中挂载:
在这里插入图片描述

封装输入框组件

在这里插入图片描述

基本结构

  • src 文件夹下 创建 components
  • components中创建hm-input.vue组件

    <template>
      <div class="hm-input">
        <input class="inp" type="text" />
        <span class="tips">这是提示</span>
      </div>
    </template>
    
  • Login.vue组件中局部注册 (这里全局注册也行)

在这里插入图片描述

  • Login.vue组件中使用组件

在这里插入图片描述

  • hm-input.vue组件基本样式
<style lang="scss">
.hm-input {
  position: relative;
  padding-bottom: 20px;
  .inp {
    width: 100%;
    height: 40px;
    background-color: transparent;
    border-bottom: 1px solid #666;
    font-size: 18px;
    &.success {
      border-color: green;
    }
    &.error {
      border-color: red;
    }
  }
  .tips {
    color: red;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
</style>

props传参处理

props验证: https://cn.vuejs.org/v2/guide/components-props.html#Prop

我们可以为组件的 prop 指定验证要求 , 规定props的类型

  1. type

  2. placeholder

    接收type 和 placeholder

  • hm-input.vue 里面写:
export default {
  props: {
    // type类型可以是 String Boolean Object Array, Function
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    type: {
      type: String,
      defalut: 'text'
    }
  }
}
  • hm-input.vue 里面写修改组件的结构
<div class="hm-input">
  <input class="inp" :type="type" :placeholder="placeholder">
  <span class="tips">这是提示</span>
</div>

v-model语法糖

v-model 实际是vue帮你封装好的语法糖,帮你做了一些封装,可以简化你的代码

v-model 实质是一个语法糖, 对于input文本框, 等价于 value值的设置 和 input 事件的监听。注册input事件,监听输入框的变化,一旦变化就更新数据

v-model 会将事件触发后, 得到的值, 赋值给绑定的变量

<h1>vue的例子</h1>
<input type="text" v-model="username"> <br><br>
<input type="text" :value="password" @input="password = $event.target.value">

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      username: '10086',
      password: '123456'
    }
  })
</script>

v-model

  1. 设置了 value 值
  2. 添加了 input 事件的监听

v-model 应用于组件封装

1: 给 Login.vue组件传入 value 值 (利用prop进行传入) 安装 vue-devtools 可以查看组件的数据

<hm-input placeholder="请输入用户名" :value="username"></hm-input>

2: hm-input.vue组件中接收value值

  props: {
    ...
    value: {
      type: String,
      default: ''
    }
  },

结构中使用

  <div class="hm-input">
    <input class="inp" :type="type" :placeholder="placeholder" :value="value">
    <!-- <span class="tips">提示消息</span> -->
  </div>

3: 我们希望输入框变化时, 父组件的username也更新

​ 给input框注册input事件

  <div class="hm-input">
    <input class="inp" :type="type" :placeholder="placeholder" :value="value" @input="handleInput">
    <!-- <span class="tips">提示消息</span> -->
  </div>

4: 用户输入内容时, 通过this.$emit, 触发input事件, 修改回父组件的 username

  methods: {
    handleInput(e) {
      // 输入框被修改了, 希望value值能同步修改
      this.$emit('input', e.target.value)
    }
  }

5: 注册 input 事件, 接收参数

<hm-input placeholder="请输入用户名" :value="username" @input="inputChange"></hm-input>

6: 用v-model 把第5步简化

<hm-input placeholder="请输入用户名" v-model="username"></hm-input>

记得写上去,不然会报错
在这里插入图片描述

props处理 - 校验规则

  • rules 校验规则
  • err-msg: 错误提示信息

在这里插入图片描述

  1. 使用组件的时候,需要传入 rules和err-msg

在这里插入图片描述

  1. hm-input.vue组件中接收rules和errMsg

在这里插入图片描述
或者

rules: {
  type: RegExp,
  default: ''
},
// 'err-msg'
errMsg: {
  type: String,
  default: ''
}
  1. hm-input.vue组件中需要在用户输入的时候,校验value值是否符合正则, 记得在data中提供status

在这里插入图片描述

每次用户修改内容时, 实时的根据传入的校验规则 rules, 进行校验, 并把校验结果, 存到 status 中

methods: {
  handleInput(e) {
    // 输入框被修改了, 希望value值能同步修改
    this.$emit('input', e.target.value)

    // 根据传入过来的规则 和 错误提示,进行判断输入框的值是否符合校验规则
    if (this.rules.test(e.target.value)) {
      this.status = 'success'
    } else {
      this.status = 'error'
    }
  }
}
  1. 根据 status 的值, 控制input框的类名(下边线)
<template>
  <div class="hm-input">
    <input
      class="inp"
      :type="type"
      :placeholder="placeholder"
      :value="value"
      @input="handleInput"
      :class="[status]"
    />
    <!-- <span class="tips">这是提示</span> -->
  </div>
</template>

控制提示信息的显示和隐藏

只有当 errMsg传递了,并且校验失败了,才显示错误信息

<span class="tips" v-show="isShowTips">{{ errMsg }}</span>
computed: {
	isShowTips() {
		return this.status === 'error' && this.errMsg
	}
},

封装按钮组件

基本结构

  • 在components中创建hm-button.vue组件

在这里插入图片描述

  • 样式

在这里插入图片描述

  • Login.vue组件中导入
<script>
import HmInput from 'components/hm-input.vue'
import HmButton from 'components/hm-button.vue'

export default {
  data() {
    return {
      username: '10086',
      password: '123456'
    }
  },
  components: {
    HmInput,
    HmButton
  },
  methods: {
    loginFn() {
      console.log('要登录了')
    }
  }
  • Login.vue组件, 这边的 click 可以换成其他的, 但是不太推荐 (可读性就不高了)
<div class="login-btn">
  <HmButton @click="loginFn">登录</HmButton>
</div>
  • hm-button.vue支持click事件, 这里绑定的是原生的click事件, 不能改
<div class="hm-button" @click="handleClick">
  <slot></slot>
</div>
  • hm-button.vue里写: this.$emit 和 组件上注册的事件要统一
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值