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