Vue基础3

1. axios&&fetch
   • 目的：是在框架中使用数据请求
   • 回顾：
     • 封装ajax
     • jquery【get post .ajax .load】
   • 框架
     • 数据请求
     • 1.使用原生js提供的fetch
     • 2.使用第三方封装库：axios
     • 3.fetch vs axios
       • axios对已获得的数据进行了一层封装XSRF
         • axios底层自动对数据进行了格式化
       • fetch并没有进行封装，拿到就是格式化后的数据
         • fetch进行了多一层的格式化
           • res.json()
           • res.blob()格式化二进制
           • res.text()

Axios总结
    1.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
            }
        })

    2.post
        注意： axios中post请求如果你直接使用npmjs.com官网文档， 会有坑
        解决步骤： 
                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
1.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
    }
})

注意事项：
    A: fetch 的 get 请求的参数是直接连接在url上的， 我们可以使用Node.js提供的url或是qureystring模块来将
        Object --> String
    B: fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个， 第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据
        格式化处理方式有
fetch('./data.json')
.then(res=>{
    res.json() //res.text() res.blob()
})
.then( data => console.log(data))
.catch( error => console.log( error ))


2.post
fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82

fetch项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975

- 历史
    - Vue1.0
        - Vue1.0数据请求我们使用的是一个第三方的封装库，这个封装库叫做vue-resource
        - vue-resource现在已经淘汰了，它的作者也推荐我们使用axios
            - vue-resource使用形式合axios一样的
                - this.$http.get
                - this.$http.post
                - this.$http({})
                - vue-resource有jsonp方法，而axios是没有的
    - Vue2.0
        - axios[可以说是目前最好的数据请求的封装库]
        - fetch

2. 计算属性
   computed 是Vue中的一个选项
   作用

   • 业务：如果我想让一个字符串反向，如何实现？
     • 分析：反向->数组【reverse】

   <div id="app">
   <p> {{ msg }} </p>
   <p> 反向后的msg: {{ msg.split('').reverse().join('') }} </p>
   <p> 计算属性： {{ newMsg }} </p>
   </div>
   
   思考： 
       1. 上面这么写违背了 MVVM 
       2. 如果逻辑加重，那么这个就更不合适了
   
   解决： 计算属性 computed 
   
   使用： 1.在选项中定义一个computed 属性，属性值是一个对象，对象中存储都是方法，这些方法必须有返回值
         2. 在vm实例范围内，直接当做全局变量一样使用这个方法名称
         3. 注意，方法名后不加 （）
   
   经验： 帮助你确定何时是用计算属性
   
     具备两个条件
         1. 有逻辑
         2. 实例中直接当做全局变量处理
   

   1. 侦听属性
      • watch是Vue中的一个选项
      • 业务

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

      • 总结：methods vs computed vs watch
        • 项目中如何使用
          • 事件处理程序：methoods
          • watch
            • 有大量数据交互
          • computed
            • 有逻辑处理
            • v中像全局变量一样使用

3. 混入【了解】
   mixin

   1. 混入的形式
      • 全局混入
      • 局部混入
   2. 混入的作用
      • 讲选项中某一个或是多个单独分离出去管理，让智能更加单一搞笑，符合模块化思想
   3. 局部混入的作用：
      • 选项 mixin
   4. 全局混入
      • Vue.mixin（{}）

4. 组件【重要】

   1. 了解前端组件化发展历史
      • 前后端耦合
        • 前后端不分离项目
          • 找后台搭建项目开发环境
          • 寻找项目目录中的静态资源目录
            • js
            • img
            • css
          • 同步修改css
      • 前后端分离
      • 前端团队合作项目的出现
        • 组件为了解决多人协作冲突问题
        • 复用
   2. 组件的概念
      • 组件是一个html、css、js、img等的一个聚合体
   3. Vue中的组件属于扩展性功能
      • Vue.extend（）来扩展的

      ƒ Vue (options) {
          if (!(this instanceof Vue)
             ) {
              warn('Vue is a constructor and should be called with the `new` keyword');
          }
          this._init(options);
      }
      ƒ VueComponent (options) {
          this._init(options);
      }
      

      • VueComponet这个构造函数我们不尽兴new实例化，我们希望组件是以标签化的形式展示
      • 组件要想合法化，必须注册解析
      • 组件的注册
        • 全局注册

        Vue.component('Hello',{
            template: '<div> hello 组件 </div>'
          })
          new Vue({
            el: '#app'
          })
        

        • 局部注册

        new Vue({
            el: '#app',
            components: {
              // 组件的名称: 组件的选项
              'Hello': {
                template: '<div> hello </div>'
              }
            }
          })
        

      • 组件的命名规则

      <body>
        <div id="app">
          <Hello></Hello>
      
          <header-title></header-title>
      
          <movie-list></movie-list>
      
          
        </div>
      </body>
      <script>
      
        Vue.component('Hello',{
          template: '<div> hello </div>'
        })
        Vue.component('HeaderTitle',{              // background-color  backgroundColor
          template: '<div> HeaderTitle </div>'
        })
        Vue.component('movie-list',{              // background-color  backgroundColor
          template: '<div> 电影列表 </div>'
        })
        
        new Vue({
          el: '#app'
        })
          
      </script>
      

      • 组件的使用规则

      <table border="1">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <!-- <Hello></Hello>  这是错误的 -->
        <tr is = "Hello"></tr>
      </table>
      
      在 html / h5中有一些标签， 它的父子级元素是规定的，这个时候如果我们使用组件，那么久打破了这个规则，就会出错
      
      这类型标签有： 
          ul li
          ol li
          dl dt dd 
          table tr td 
          selcet  option 
          ...  
      解决： 使用is属性来绑定一个组件
      

      • 切换

      <div id="app">
      
         <button @click = " comp = comp === 'UserLogin'? 'PhoneLogin':'UserLogin'"> 切换 </button>
      
         <keep-alive>
          <component :is = "comp"></component>  
         </keep-alive>
          
      </div>
      
      is 属性  +  动态组件 component + 动态缓存组件  keep-alive
      业务：点击一个开关切换两个组件
      
      Vue.component('UserLogin',{
         template: '<div> 用户名密码登录 </div>'
       })
        
       Vue.component('PhoneLogin',{
         template: '<div> 短信验证码登录 </div>'
       })
      
        new Vue({
          el: '#app',
          data: {
            comp: 'UserLogin'
          }
        })