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：

数据发生改变，并且界面也渲染完毕触发

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：设置请求头