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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。