从0到1—Vue项目失物平台的搭建（第二天）

本博客主要用于记录开发的过程以及开发问题处理方式，不粘贴开发代码。问题的解决原理我会单独做文章。

失物平台（邑丢丢）的开发代码的码云地址是https://gitee.com/MyKyle/yidd

1.今日完成进度 

1.完成对饭卡模块的丢失部分开发

2.构思了贵重物品模块的界面设计图

3.完成对贵重物品模块的开发

 2.今日问题以及处理 

2.1 created生命周期函数调用methods对象的方法获取请求数据

Vue生命周期中，一般用于做请求数据赋值的是在created以及mounted这两个生命周期。

这两个生命周期的主要区别在于created（vue实例创建完后被调用），mounted（实例已挂载到DOM上后调用）。所以一般把数据放在created，可以及早发请求获取数据，在页面挂载完之前请求完成的话就看到闪屏就少一些，但是如果有些数据需要以来DOM的话，比如按DOM排序之类的就放到mounted里面。

关于生命周期其它学习可以参考我的文章：思维导图学习Vue生命周期

  created () {
    this.pickList = this.getPickUpList()
  }
  methods: {
    getPickUpList () {
      const res = [['阿里巴巴', '奥力法狗'], ['哔哔叭叭'], [], ['Didi']]
      return res
    }
 }

 

 2.2 js中setTimeOut()的返回值

MDN官方说法：

返回值

返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。

需要注意的是setTimeout()和setInterval()共用一个编号池，技术上，clearTimeout()和 clearInterval() 可以互换。但是，为了避免混淆，不要混用取消定时函数。

在同一个对象上（一个window或者worker），setTimeout()或者setInterval()在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。

简单明了：是个定时器编号，用来取消定时器的。 

2.3 计算属性computed传参的用法

  <van-index-anchor :index="pickUpClass(index)"/>

  computed: {
    // 利用闭包思想实现传参
    pickUpClass () {
      return function (value) {
        return String.fromCharCode((value + 65)) // 实现的是一个0~25转A~Z的功能
      }
    }
  }

2.4 ASCAll码转换

string.split('') 字符串转数组
Array.join('') 数组转字符串
			
字符(string)转Ascii码：用string.charCodeAt();
Ascii码(num)转字符：用String.fromCharCode(num);
			
大写转小写 .toLocaleLowerCase()
小写转大写 .toLocaleUpperCase()

需要利用JS实现的是一个 0~25对应转A~Z 的功能，看网上的网友们各种天花乱坠的。下面一句话的事。

String.fromCharCode((value + 65)) // 实现的是一个0~26转A~Z的功能

原理：

060

48

0x30

0

字符0

0101

65

0x41

A

大写字母A

0132

90

0x5A

Z

大写字母Z

如何将0-26数字转换为A-Z

0对应65

25对应90

就是数字+65即可推出字母

 

 

 

2.5  switc用法

switch(expression){
    case value :
       //语句
       break; //可选
    case value :
       //语句
       break; //可选
    //你可以有任意数量的case语句
    default : //可选
       //语句
}

2.6 如何防止浏览器填充input

<input type="text"  autocomplete="off">

 2.7 拨打电话的代码

window.location.href = 'tel://' + date;