Vue中的计算属性和axios基本使用回顾
更新时间：2023年01月20日 10:07:02 作者：努力学习前端的小陈
这篇文章主要介绍了Vue中的计算属性和axios基本使用回顾，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
1. 什么是计算属性
计算属性本质上就是一个function 函数，它可以实时监听data 中数据的变化，并 return 一个计算后的新值， 供组件渲染 DOM 时使用。
计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods 方法使用。
示例代码如下：
2. 计算属性的特点
① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算
计算属性
特点：
1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可
好处：
1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！
3. 如何声明计算属性
计算属性需要以function 函数的形式声明到组件的computed 选项中
示例代码如下：
注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有return 返回值！
4. 计算属性的使用注意点
① 计算属性必须定义在computed 节点中
② 计算属性必须是一个function 函数
③ 计算属性必须有返回值
④ 计算属性必须当做普通属性使用
5. 计算属性 vs 方法
相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。
因此 计算属性的性能更好：
6. axios
axios 是一个专注于网络请求的库！
axios的基本使用
1. 发起 GET 请求：
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://www.liulongbin.top:3006/api/getbooks',
// URL 中的查询参数
params: {
id: 1
}
}).then(function (result) {
console.log(result)
})
2. 发起 POST 请求：
document.querySelector('#btnPost').addEventListener('click', async function () {
// 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
// await 只能用在被 async “修饰”的方法中
const { data: res } = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 20
}
})
console.log(res)
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue.js+boostrap项目实践(案例详解)的相关资料,本文图文并茂介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了vue2如何获取上页的url地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了element-ui配合node实现自定义上传文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了VueJs里利用CryptoJs实现加密及解密的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面,饿了么前端团队基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件,本文给大家介绍Element UI安装全过程,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要为大家介绍了十个Vue.js中有用的自定义钩子，让我们的代码更加好看。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-04-04
这篇文章主要介绍了vue项目中使用postcss-px2rem的方法总结,在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue2+elementUI的el-tree的懒加载,文中给大家提到了element ui 中 el-tree 实现懒加载的方法，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
Vue+Video.js实现视频抽帧并返回抽帧图片Base64
这篇文章主要为大家详细介绍了Vue如何利用Video.js实现视频抽帧并返回抽帧图片Base64,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2024-01-01
最新评论