复习

  • 路由操作的基本步骤
引入对象
import VueRouter from 'vue-router';
安装插件
Vue.use(VueRouter);   挂载属性的行为
创建路由对象
let router = new VueRouter({
    routes:[
        { name:'xxx',path:'/xxx',组件  }
    ]
});
将路由对象放入到options中new Vue()
new Vue({
    router
})
  • 套路

    • 1: 去哪里 <router-link :to="{name:'bj'}"></router-link>
    • 2: 导航(配置路由规则) {name:'bj',path:'/beijing',组件A}
    • 3: 去了干嘛(在组件A内干什么)

      • 在created事件函数中,获取路由参数
      • 发起请求,把数据挂载上去
  • 参数

    • 查询字符串(#/beijing?id=1&age=2)

      • 1: 去哪里 <router-link :to="{name:'bj',query:{id:1,age:2} }"></router-link>
      • 2: 导航(配置路由规则) {name:'bj',path:'/beijing',组件A}
      • 3: 去了干嘛(在组件A内干什么)

        • this.$route.query.id||age
    • path(#/beijing/1/2)

      • 1: 去哪里 <router-link :to="{name:'bj',params:{id:1,age:2} }"></router-link>
      • 2: 导航(配置路由规则) {name:'bj',path:'/beijing/:id/:age',组件A}
      • 3: 去了干嘛(在组件A内干什么)

        • this.$route.params.id||age
  • 编程导航

    • 一个获取信息的只读对象($route)
    • 一个具备功能函数的对象($router)
    • 根据浏览器历史记录前进和后台 this.$router.go(1|-1);
    • 跳转到指定路由 this.$router.push({ name:'bj' });
  • 嵌套路由

    • 让变化的视图(router-view)产生包含关系(router-view)
    • 让路由与router-view关联,并且也产生父子关系
  • 多视图

    • 让视图更为灵活,以前一个一放,现在可以放多个,通过配置可以去修改
  • axios:

    • 开始:

      • 跨域 + 默认的头是因为你的数据是对象,所以content-type:application/json
      • 有OPTIONS预检请求(浏览器自动发起)
    • 最终:

      • 当我们调整为字符串数据,引起content-type变为了www键值对
      • 没有那个OPTIONS预检请求
    • 总结: 跨域 + application/json 会引起OPTIONS预检请求,并且自定义一个头(提示服务器,这次的content-type较为特殊),content-type的值
    • 服务器认为这个是一次请求,而没有允许content-type的头,
    • 浏览器就认为服务器不一定能处理掉这个特殊的头的数据
    • 抛出异常
    • node服务器 response.setHeader("Access-Control-Allow-Headers","content-type,多个");
    • formdata的样子: key=value&key=value
  • axios属性关系

    • options: headers、baseURL、params
      例如:

          axios.defaults.baseURL='http://www.baidu.com/'    
    • 默认全局设置(大家都是这么用)

      • Axios.defaults-> options对象
    • 针对个别请求来附加options
    • axios.get(url,options)
    • axios.post(url,data,options)

今日重点

  • axios
  • watch
  • 计算属性
  • 项目

axios

  • 合并请求
  • axios.all([请求1,请求2])
  • 分发响应 axios.spread(fn)
  • fn:对应参数(res)和请求的顺序一致
  • 应用场景:

    • 必须保证两次请求都成功,比如,分头获取省、市的数据
  • 执行特点: 只要有一次失败就算失败,否则成功

拦截器

  • 过滤,在每一次请求与响应中、添油加醋
  • axios.interceptors.request.use(fn) 在请求之前
  • function(config){ config.headers = { xxx }} config 相当于options对象
  • 默认设置 defaults 范围广、权利小
  • 单个请求的设置options get(url,options) 范围小、权利中
  • 拦截器 范围广、权利大

token(扩展)

  • cookie 和session的机制,cookie自动带一个字符串
  • cookie只在浏览器
  • 移动端原生应用,也可以使用http协议,1:可以加自定义的头、原生应用没有cookie
  • 对于三端来讲,token可以作为类似cookie的使用,并且可以通用
  • 拦截器可以用在添加token上

拦截器操作loadding

  • 在请求发起前open,在响应回来后close

监视

  • watch 可以对(单个)变量进行监视,也可以深度监视
  • 如果需求是对于10个变量进行监视?
  • 计算属性computed 可以监视多个值,并且指定返回数据,并且可以显示在页面
  • 都是options中的根属性

    • watch监视单个
    • computed可以监视多个this相关属性值的改变,如果和原值一样
    • 不会触发函数的调用,并且可以返回对象

相关命令

npm i mint-ui vue-preview axios vue-router monent vue - S;
npm i webpack html - webpack - plugin css - loader style - loader less less - loader autoprefixer - loader babel - loader babel - core babel - preset - es2015 babel - plugin - transform - runtime url - loader file - loader vue - loader vue - template - compiler webpack-dev-server - D

本文固定链接: http://www.js-code.com/vue-js/vue-js_27189.html