vue模板语法三

3.1 axios && fetch

目的： 是在框架中使用数据请求

回顾：

1. 封装ajax

1. jquery 【 $$.get $$ .post $$.ajax $$ .load 】

框架：

数据请求

1. 使用原生js提供的fetch

2. 使用第三方封装库： axios

• • Vue中可以统一对axios进行挂载

Vue.prototype.$http = axios

1. fetch vs axios

• • axios 对已获得的数据进行了一层封装 XSRF

• • • axios底层自动对数据进行了格式化

• • fetch并没有进行封装，拿到就是格式化后的数据

• • • fetch进行了多一层的格式化

• • • • res.json()

      • res.blob() 格式化二进制

      • res.text()

Axios总结

1.get方法

 

 

A: 无参数

axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))

B: 有参数

axios({

url: 'http://xxx',

method: 'get' //默认就是get,这个可以省略，

params: {

key: value

}

})

 

2.post

注意： axios中post请求如果你直接使用npmjs.com官网文档， 会有坑

解决步骤：

\1. 先设置请求头

\2. 实例化 URLSearchParams的构造器函数得到params对象

\3. 使用params对象身上的append方法进行数据的传参

 

 

// 统一设置请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let params = new URLSearchParams()

 

// params.append(key,value)

 

params.append('a',1)

params.append('b',2)

 

axios({

url: 'http://localhost/post.php',

method: 'post',

data: params，

headers: { //单个请求设置请求头

'Content-Type': "application/x-www-form-urlencoded"

}

})

.then(res => {

console.log( res )

})

.catch( error => {

if( error ){

throw error

}

})

 

 

Fetch

1.get

 

fetch('http://localhost/get.php?a=1&b=2')

.then(res=> res.text()) // 数据格式化 res.json() res.blob()

.then(data => {

console.log( data )

})

.catch(error => {

if( error ){

throw error

}

})

 

注意事项：

A: fetch 的 get 请求的参数是直接连接在url上的， 我们可以使用Node.js提供的url或是qureystring模块来将

Object --> String

B: fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个， 第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据

格式化处理方式有

fetch('./data.json')

.then(res=>{

res.json() //res.text() res.blob()

})

.then( data => console.log(data))

.catch( error => console.log( error ))

 

 

2.post

fetch 文档

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82

 

fetch项目使用的博客

https://blog.csdn.net/hefeng6500/article/details/81456975

历史

• Vue1.0

• • Vue1.0数据请求我们使用的是一个第三方的封装库，这个封装库叫做 vue-resource

  • vue-resource现在已经淘汰了,它的作者也推荐我们使用axios

• • • vue-resource使用形式和axios一样的

• • • • this.$http.get

      • this.$http.post

      • this.$http({})

      • vue-resource有jsonp方法,而axios是没有的

• Vue2.0

• • axios [ 可以说是目前最好的数据请求的封装库 ]

  • fetch

3.2 计算属性

computed 是Vue中的一个选项

作用： ？

业务： 如果我想让一个字符串反向，如何实现？

分析： 反向 -> 数组【 reverse 】

 

3.2.1 侦听属性

watch 是Vue中一个选项

作用： ？

监听数据的变化，当数据发生改变时，我们完成一些操作

业务：

watch: {

firstName ( val ) {

this.fullName = val + this.lastName

},

lastName ( val ) {

this.fullName = this.firstName + val

},

num: {

deep: true, // 深度监听

handler ( val ) {

// 当num发生改变时，触发的方法

console.log( val )

}

}

}

• 总结： methods vs computed vs watch

• • 项目中如何使用

1. 事件处理程序： methods

1. watch

有大量数据交互和异步处理时进行

1. computed

• • • • • 有逻辑处理

        • V中像全局变量一样使用

3.3 混入 【 青铜 】

minxin

1. 混入的形式

• • 全局混入 【 不推荐 】

  • 局部混入

1. 混入的作用：

1. 将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想

1. 局部混入的使用

选项 minxins

1. 全局混入

Vue.mixin({})

3.4 组件 【 王者 】

1. 了解前端组件化发展历史

• • 前后端耦合

• • • 前后端不分离项目

1. 找后台搭建项目开发环境

1. 寻找项目目录中的静态资源目录

• • • • • • js

          • img

          • css

1. 同步修改css

• • 前后端分离

  • 前端团队合作项目的出现

• • • 组件化为了解决多人协作冲突问题

    • 复用

1. 组件的概念

• • 组件是一个html 、 css 、js 、img 等的一个聚合体

1. Vue中的组件属于扩展性功能

• • 通过 Vue.extend() 来扩展的

ƒ Vue (options) {

if (!(this instanceof Vue)

) {

warn('Vue is a constructor and should be called with the new keyword');

}

this._init(options);

}

ƒ VueComponent (options) {

this._init(options);

}

• • VueComponet这个构造函数我们不进行new实例化，我们希望组件是以标签化的形式展示

<Hello/> --> <div></div>

<Banner></Banner>

• • 组件要想合法化，必须注册解析

  • 组件的注册 【 创建 】

• • • 全局注册

    • 局部注册

3.5 作业

1. 面试题： ajax 和 fetch 有什么区别？ 【 提问率： 60% 】

2. 了解前后端耦合，前后端分离

转载于:https://www.cnblogs.com/zjp-com/p/11397217.html