Vue组件学习笔记(一)之axios与fetch实现数据请求、计算属性

文章目录

    • 1、axios与fetch实现数据请求
      • (1)fetch
      • (2)axios
        • 与fetch的区别
        • Post/delete
    • 2、计算属性
      • (1)基础例子
      • (2)计算属性 VS methods
        • 区别
        • 模糊查询-计算属性实例
      • (3)计算属性 VS watch(监听器)
        • 区别
    • 3、Mixins

1、axios与fetch实现数据请求

(1)fetch


    
  • {{data.name}}

实现效果:

post格式

1

fetch("**",{
	method:'post',
	headers:{
		"Content-Type":"application/x-www-form-urlencoded"
  },
	body:"name=kerwin&age=100"
}).then(res=>res.json()).then(res=>{console.log(res)});

2

fetch("**",{
	method:'post',
	headers:{
		"Content-Type":"application/json"
  },
	body:JSON.stringify({
    name:"kerwin",
    age:100
  })
}).then(res=>res.json()).then(res=>{console.log(res)});

注意:

Fetch请求默认是不带cookie的,需要设置fetch(url,(credentials:'include))

(2)axios

data是真实后端数据

与fetch的区别

  • 要引入axios.min.js
handleClick(){
  axios.get('json/test.json').then(res=>{
    console.log(res.data);
    this.datalist = res.data.data.films;
  })
  
  //----此方法和上面axios.get相同-----
  axios({
    url:"json/test.json",
    method:'get' //get post根据method进行修改
  }).then(res=>{
    console.log(res.data)
  })
}

实现效果与fetch相同

Post/delete

axios.delete("****",{
  //可以在此处传参
                    myname:'zyy',
                    myage:18
                }).then(res=>{
                    console.log(res.data)
                })

2、计算属性

 

复杂逻辑,模版难以维护的放在计算属性内,使得模版、代码更好维护些。

(1)基础例子

用 computed


    
{{changeword}}

显示效果:

Zmy

(2)计算属性 VS methods


    
{{changeword}} {{changewordmethods()}}
  • 发现两者的实现效果相同
  • 计算属性是基于它们的依赖进行缓存的
  • 计算属性只有在它的相关依赖发生改变时才会重新求值

区别

  • 计算属性有缓存,访问第一次时会调用,第二次的时候会直接告诉结果。

  • 方法每次都需要重新调用。

Vue组件学习笔记(一)之axios与fetch实现数据请求、计算属性_第1张图片

模糊查询-计算属性实例


    
  • {{data}}

实现效果与之前“模糊查询实例”相同。

(3)计算属性 VS watch(监听器)

watch版----计算总金额简单例子

说明:如果金额小于1000,则添加10元邮费。


    

单价

数量

总金额:{{sum}} (元)

实现效果:

计算属性版----计算总金额简单例子


    

单价

数量

总金额:{{computedsum}} (元)

实现效果相同。

区别

无论有多个值,计算属性只需要写一次;而watch需要写很多次。譬如price和number,watch写了两次,而计算属性computed只写了一次。

因此,状态特别多的时候,计算属性优势就很突出了。

3、Mixins

正在学,待更新…

你可能感兴趣的:(Vue,vue.js,javascript,html)