03-Vue.js-axios和fetch、计算属性、混入、组件

一、axios和fetch

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

2、分类：

• 原生js提供的fetch
• 使用第三方封装库axios
• Vue中可以统一对axios进行挂载
  Vue.prototype.$http=axios

3、请求方式

• 请求静态数据（模拟假数据—mock数据）
• 请求动态数据 （通过后端接口请求数据）

4、axios和fetch的区别

• axios对已获得的数据进行了封装，防止XSRF攻击
• axios底层自动对数据进行了格式化

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

POST方法
        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没有进行封装，得到的就是格式化后的数据
• fetch进行了多一层的格式化
• res.json()
  • es.blob()格式化二进制
  • res.text()

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

5、Vue发展历史

• Vue1.0     2014年
  • Vue1.0数据请求使用的是第三方的封装库 ，这个封装库叫做vue-resource
  • vue-resource现在已经淘汰，推荐使用axios
  • vue-resource使用形式和axios一样
    • this.$http.get
    • this.$http.post
    • this.$http({ })
  • vue-resource有jsonp方法，而axios没有
• Vue2.0     2016年
  • axios
  • fetch

二、计算属性

computed ：是Vue中的一个选项

1、使用方法

• 在选项中定义一个computed，在computed中定义一个属性方法，里面写业务逻辑
• 在VM实例范围内，直接当做全局变量使用这个方法名
• 方法名后不加( )

2、侦听属性

• watch ：是Vue中的一个选项
  • 监听数据的变化。当数据变化时，完成一些操作
  • deep：true深度监听

3、总结methods、computed、watch

• 项目中使用时
  • 事件处理程序methods
  • 有大量数据交互和异步处理时watch
  • 有逻辑处理computed

watch: {
      firstName ( val ) {
        this.fullName = val + this.lastName
      },
      lastName ( val ) {
        this.fullName = this.firstName + val 
      },
      num: {
        deep: true, // 深度监听      
        handler ( val ) {
          //  当num发生改变时，触发的方法
          console.log( val )
        }
      }
    }

三、混入

mixin

1、作用：

• 将某个或多个选项单独分离出去管理，让职能单一高效，符合模块化思想和MVC架构思想

2、形式

• 局部混入
  通过mixin选项引入一个对象
• 全局混入（不推荐）
  Vue.mixin( ) 会使所有的组件都拥有选项内容

四、组件

1、概念：
Vue中的组件属于扩展功能

• 通过Vue.extend( )来扩展
• VueComponet这个构造函数不进行new实例化
• 组件想要合法化，必须注册解析

2、注册（创建）：

• 全局注册
  Vue.component("组件名",{template:'<div>aaa</div>'})
• 局部注册
  component选项

3、命名规范

• 注册时使用大驼峰命名法，使用时，中间用-

4、使用规则

• 在HTML中，一些标签的父子级元素是规定的（比如ul>li、ol>li、table>tr>td、select>option），如果使用组件，就会打破这个规则

  • 解决：使用is属性来绑定组件

• template模板标签，直接子元素有且仅有一个

• is属性——动态组件——动态缓存组件

5、组件的嵌套

  <div id="app">
    <Father></Father>
  </div>

  <template id="father">
    <div>
      <h3> 这里是father组件 </h3>
      <Son></Son>
    </div>
  </template>

  <template id="son">
    <div>
      <h4> 这里是子组件 </h4>
    </div>
  </template>

  new Vue({
    el: '#app',
    data: {
      comp: 'UserLogin'
    },
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })