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

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()}}
    
    

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

区别

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

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

模糊查询-计算属性实例

    

        
        

            

                {{data}}
            
        
    
    

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

（3）计算属性 VS watch（监听器）

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

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

    

        
单价 
        
数量 
        
总金额：{{sum}} （元）
    
    

实现效果：

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

    

        
单价 
        
数量 
        
总金额：{{computedsum}} （元）
    
    

实现效果相同。

区别

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

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

3、Mixins

正在学，待更新…