Vue中的计算属性和axios基本使用回顾

目录
  • 1. 什么是计算属性
  • 2. 计算属性的特点
    • 计算属性
  • 3. 如何声明计算属性
  • 4. 计算属性的使用注意点
  • 5. 计算属性 vs 方法
  • 6. axios
    • 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)

   })

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue Axios异步与数据类型转换问题浅析

    目录 axios 请求中异步与否问题 不使用异步的例子 使用异步的例子 对象与数组转换 axios 请求中异步与否问题 众所周知,axios 请求有些请求需要配合异步函数来实现,我大概总结了两种适配场景: 不使用异步:后端响应值对后续操作无影响,我们仅需要判断这个请求是否成功的情况下 使用异步:我们需要存储后端响应值并使用它进行某些渲染操作 不使用异步的例子 参考我们上一节的最后一块,我们抽离了登录校验的 axios 请求,这是具体代码 可见,我们只需要把本地 token 传递给后端,经过后端

  • Vue.js axios响应拦截如何获取返回状态码

    目录 axios响应拦截获取返回状态码方式整理 方法一 方法二 方法三 Vue的axios拦截器用法 总结 axios响应拦截获取返回状态码方式整理 方法一 axios.interceptors.response.use( response => { console.log('拦截器响应成功') return response }, error => { console.log('拦截器响应失败') console.log(error) if(error.request){ console.l

  • 浅谈Vue知识系列-axios

    目录 axios基础知识 axios应用场景 axios基础知识 axios是独立于vue的一个项目,基于promise用于浏览器和node.js的http客户端. 在浏览器中可以帮助我们完成ajax请求的发送在node.js中可以向远程接口发送请求 axios应用场景 axios的使用 第一步:创建html文件,在body中引入两个js文件: <script src="vue.min.js"></script> <script src="axi

  • vue axios接口请求封装方式

    目录 vue axios接口请求封装 总结 vue axios接口请求封装 简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index

  • Vue如何处理Axios多次请求数据显示问题

    目录 Vue处理Axios多次请求数据显示 服务端代码 客户端代码 vue axios多次请求一个接口取消前面请求 方法一 方法二 总结 Vue处理Axios多次请求数据显示 场景: 一个搜索框,要求用户输入内容改变之后立即进行搜索 遇到的问题: 用户频繁的进行搜索词修改,会触发很多次搜索请求,如果请求有延时,就会出现显示不正确的现象 比如下面这个例子: 请求1发出后,存在延时大,响应1后返回: 请求2发出后,延时小,响应2先返回: 最后显示的内容是响应1: 而我期待的显示内容,是最后一次的请求

  • Vue封装axios的示例讲解

    1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 (1)在node.js中使用的原生的http模块 (2)在浏览器中使用的XMLHttpRequest 2.vue中的使用方法 (1)安装:npm install axios (2)引用方法: 原生的方式(不推荐使用) axios({ url:'http://127.0.0.1:9001/students/test', //远程服务器的url method:'get', //请求方式

  • Vue中的计算属性和axios基本使用回顾

    目录 1. 什么是计算属性 2. 计算属性的特点 计算属性 3. 如何声明计算属性 4. 计算属性的使用注意点 5. 计算属性 vs 方法 6. axios axios的基本使用 总结 1. 什么是计算属性 计算属性本质上就是一个function 函数,它可以实时监听data 中数据的变化,并 return 一个计算后的新值,  供组件渲染 DOM 时使用. 计算属性指的是通过一系列运算之后,最终得到一个属性值. 这个动态计算出来的属性值可以被模板结构或methods 方法使用. 示例代码如下:

  • vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有依赖的那个值发生改变,他才会重新计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

  • Vue中使用计算属性的知识点总结

    计算属性 有些时候,我们在模板中放入了过多的逻辑,从而导致模板过重,且难以维护.例如: <div id="app"> {{ message.split('').reverse().join('') }} </div> 碰到这样的情况,我们必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,而且,一旦我们想要在模板中多次使用翻转字符串时,会更加麻烦. 所以,当我们处理复杂逻辑时,都应该使用计算属性. 基础用法 计算属性是Vue配置对象中的属性,

  • vue中的计算属性的使用和vue实例的方法示例

    本文介绍了vue计算属性的使用和vue实例的方法示例,分享给大家,具体如下: 计算属性 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用计算属性. vue 计算属性 当我们想要根据一端业务代码的执行结果来返回属性的值,就可以使用计算属性computed了, 计算属性是一个有结果的函数,有get方法和set方法,get方法,

  • 简单聊聊Vue中的计算属性和属性侦听

    目录 1. 计算属性 语法:  1.简写方式: 语法:  2.完整写法: 2. 监视(侦听)属性 1. 监视属性watch: 2. 深度监视 3. 区别和原则 总结 1. 计算属性 定义 计算属性:要用的属性不存在,要通过已有属性计算得来,计算属性要有一个全新的配置项computed 对Vue来说,data里面的数据就是属性,只要Vue中的数据改变,就会重新解析模板,遇到插值语法里的方法会重新调用 原理 底层借助了Objcet.defineproperty方法提供的getter和setter.

  • Vue中的计算属性与监听属性

    Vue中的计算属性与监听属性

    目录 一.为什么要使用计算属性 什么是计算属性 二.计算属性和方法的区别 1.区别 2.计算属性使用场景 三.修改计算属性的值 总结 四.监听属性 1.监听普通属性 2.监听属性和计算属性的区别 3.监听复杂对象 一.为什么要使用计算属性 什么是计算属性 计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程. 依赖固定的数据类型(响应式数据),不能是普通的传入的一个全局数据. 在数据量比较大的时

  • Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    目录 计算属性computed 侦听属性watch 计算属性computed 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,

  • vue中的计算属性传参

    目录 vue计算属性传参 我们来看看下面的示例 vue计算属性传参,根据值不同,渲染相应的内容 业务描述 vue计算属性传参 最近很多小伙伴问到,计算属性怎么做到像普通函数一样传参呢? 针对这个问题 我们来看看下面的示例 <template>     <p>{{ getCallerName }}</p>  </template> <script> export default {     props: {         callRecord:

  • vue中的计算属性实例详解

    vue中的计算属性实例详解

    什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理. 计算属性(computed)用于处理复杂逻辑 computed:{ } compu

  • Vue中computed计算属性和data数据获取方式

    Vue中computed计算属性和data数据获取方式

    目录 computed计算属性和data数据获取 解决方法一 解决方法二 computed计算属性取对象的值,第一次报错undefined 报错和打印值 解决方案 computed计算属性和data数据获取 获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"> <h1 class="detailHead">{{ActiveData.tit

随机推荐