vue第2天（vue生命周期钩子、日期格式化库|vue第2天（vue生命周期钩子、日期格式化库 moment.js、vue计算属性、网络请求库axios）
1、DEMO-聊天机器人 
文章图片
1、拿到文本框内容(v-model)，给它加keyup事件，只能由回车触发
2、给按钮加点击事件，点击事件触发的代码应该跟keyup一样，所以他们调用同一个函数就行了
3、把你输入的内容渲染成li标签
4、把内容发请求到服务器，拿到服务器的回答，再渲染成li标签
5、’把文本框内容清空
6、让界面自动滚到最后
文章图片
文章图片
文章图片
文章图片
文章图片
关于nexttick介绍：第三种解决办法
文章图片
文章图片
2 Vue生命周期钩子
传送门：https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
生命周期钩子：
beforeCreate：
vue实例刚刚创建完毕，但是还不能访问data中的数据
created：
vue实例创建完毕，并且可以访问data中的数据
beforeMount：
被Vue管理起来的DOM还没渲染完，但是快渲染了
mounted：
被Vue管理的DOM渲染完毕，所以在这个钩子里可以访问DOM元素了
beforeUpdate：
数据发生改变，但是界面还没渲染
updated：
数据发生改变，并且界面也渲染完毕触发
【vue第2天（vue生命周期钩子、日期格式化库|vue第2天（vue生命周期钩子、日期格式化库 moment.js、vue计算属性、网络请求库axios）】beforeDestroy
vue实例即将销毁之前调用
destroyed
vue实例销毁后调用
文章图片
文章图片
文章图片
----------------------------------------------------------------------------------------------------------------------------- 
文章图片
今天学习这两个
目前学的Vue的生命周期钩子
beforeCreate
数据发生改变，但是还没渲染到页面就会调用
vue刚刚创建调用的钩子，不能访问data和methods中的内容
created
vue创建完毕，可以访问data和methods中的内容
beforeMount
dom被vue重新挂载之前调用，不能访问dom元素
mounted
dom被vue重新挂载之后调用，可以访问dom元素
beforeUpdate
数据发生改变调用，但是此时dom还没重新渲染
updated
后面如果数据发生改变，并且界面渲染完毕都会触发（数据发生改变就会触发，会触发多次）
3 、日期格式化库 moment.js
[传送门](http://momentjs.cn/docs/#/parsing/)
作用：获取日期的，按格式来获取日期字符串
文章图片
moment() 获取当前时间
moment(时间) 以传入的时间为准
后面有个方法叫 format() 按格式输出日期字符串
YYYY:4位年
MM:2位月
DD：2位日
HH：2位小时（24小时，小写h为12小时制）
mm：2位分
ss：2位秒
文章图片
文章图片
4 、vue计算属性（computed:{}）
传送门：https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
有的时候属性的值不是我们想要的，我们还需要经过计算得到结果，就可以用计算属性
特点：
可以当普通属性一样来用
只要计算出结果，都会缓存起来，其他地方要用，直接从缓存结果拿
如果它里面依赖的数据变了，会重新调用一次重新计算结果
复习字符串和数组方法
文章图片
计算属性：
计算属性本质上是函数，显示的值是函数的返回值，只不过可以让你像普通属性那么使用，所以我们称之为计算属性
文章图片
文章图片
计算属性例子：
它计算出一个结果后会缓存起来，后面要用就直接拿到这个缓存的结果
如果他里面用到的数据发生改变，它会重新调用一次，重新计算
文章图片
文章图片
文章图片
Demo-品牌管理
文章图片
文章图片
文章图片
5 网络请求库axios
传送门:https://github.com/axios/axios
专门用来发ajax请求的
axios更方便，库文件更小，让网页打开速度更快，因为它仅仅只是发ajax请求所以比较单纯简洁
文章图片
文章图片
文章图片
文章图片
用法： 
文章图片
axios发的post请求，请求报文里的提交的参数，默认使用的JSON格式(FormData)，如果想用以前的
Content-type:application/x-www-form-urlencoded这种形式
需要用到 URLSearchParams 这个对象
其他用法：
文章图片
5.1 axios的基本用法
文章图片
文章图片
文章图片
文章图片
5.2 axios的另外一种用法
文章图片
文章图片
5.3 表单传递
文章图片
axios.get('路径',{ params:{参数} })
axios.post('路径',{ 参数 })
注意：如果接口是application/x-www-form-urlencoded,那么需要配合URLSearchParams对象来传递数据，请求头要改成application/x-www-form-urlencoded
另外写法：
axios({})
method：请求方式
url：请求路径
data：请求体，一般是POST写
params：传递的数据，一般是GET请求写
headers：设置请求头
推荐阅读
- 第6.2章（设置属性）
- 2018-02-06第三天|2018-02-06第三天 不能再了，反思到位就差改变
- 第三节|第三节 快乐和幸福（12）
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- android第三方框架（五）ButterKnife
- 开学第一天（下）
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 第326天
- 跌跌撞撞奔向你|跌跌撞撞奔向你 第四章（你补英语，我补物理）