Vue小记3

axios && fetch
目的：实在框架中使用数据请求
数据请求

1。使用原生js提供的fetch
2。使用第三方封装库：axios
3. fetch 与 axios
axios对以获得的数据进行了一层封装XSRF
fetch并没有进行封装,拿到就是格式化后的数据

axios

案例
请求静态数据 [模拟假数据 - mock数据]
              - 线上拷贝相似字段数据
              - 使用第三方 mock.js 来生成json数据[用代码来生成数据]
             - easy mock线上网站
请求动态数据【通过后端接口来请求数据】
              * php  *java  *node  *c  

我们本该写在vm中的逻辑性语句,写在的v中,如果逻辑加重,那么就不合适了

解决:计算属性   computed
使用:1.在选项中定义一个computed属性,属性值是一个对象
          2.在vm实例范围内,直接当作全局变量一样使用这个方法
          3.注意，方法名后不加（）

watch 是vue的一个选项

混入
mixin
混入的形式

           - 全局混入  Vue.mixin({})
                - 所有的组件都会加上去选项内容
           - 局部混入  

混入的作用

          - 将选项中某一个或是多个单独分离出去管理,让职能更加单一高效,符合模块化思想

组价
1.了解前端组件化发展历史
前后端耦合

• 前后端不分离项目

            1.找后台搭建项目开发环境
            2.寻找项目目录中的静态资源目录
                - js
                - img
                - css
            3.同步修改css  
  

前后端分离
前端团队合作项目的出现

             -  组件化为了解决多人协作冲突问题
             -  复用

2.组件的概念
组件是一个htnl,css,js,img等的一个聚合体
3.Vue中的组件属于扩展性功能
通过Vue.extend() 来扩展的
VueComponet这个构造函数我们不进行new实例化,我们希望组件是以标签化的形式展示
组件要想合法化,必须注册解析
组件的注册

         - 全局注册
         - 局部注册

4.组件的命名规则
大驼峰命名的在div中书写的要变成 ’ - ’
5.组件的使用规则

在html/h5中有一些标签,他的父子级元素是规定的,这个时候如果我们使用组件,那么就打破了  这个规则,就会出错
这类标签有:  ul li \  tr td 

6. is 属性 + 动态组件 component +动态缓存组件 keep-alive
   业务:点击一个开关切换两个组件
7. template 模板标签

template标签是放在实例模板范围外的   
template标签外在外层时是不会被解析的，也就是会在dom结构中出现,如果放在实例范围 内，会被解析，将来不会出现在dom结构中                
template中直接子元素必须有且仅有一个

Vue.component('Hello',{
    // template: '<div> 今年的目标： 找一个好的高薪工作  </div>'
    template: '#hello-box'
  })

  new Vue({
    el: '#app',
    data: {
      comp: 'UserLogin'
    }
  })

<template>
      <p> 模板template </p>
    </template>