vue基础学习笔记（三）

0.vue学习笔记之axios补充，计算属性，项目之主页和新闻

1.准备开始

---

2.复习

• 路由操作的基本步骤

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

• 套路

  • 1: 去哪里
  • 2: 导航(配置路由规则) {name:'bj',path:'/beijing',组件A}
  • 3: 去了干嘛(在组件A内干什么)
    • 在created事件函数中，获取路由参数
    • 发起请求，把数据挂载上去

• 参数

  • 查询字符串（#/beijing?id=1&age=2）
    • 1: 去哪里
    • 2: 导航(配置路由规则) {name:'bj',path:'/beijing',组件A}
    • 3: 去了干嘛(在组件A内干什么)
      • this.$route.query.id||age
  • path(#/beijing/1/2)
    • 1: 去哪里
    • 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键值对(application/x-www-form-urlencoded)
    • 没有那个OPTIONS预检请求
  • 总结： 跨域 + application/json 会引起OPTIONS预检请求，并且自定义一个头(提示服务器，这次的content-type较为特殊)，content-type的值
  • 服务器认为这个是一次请求，而没有允许content-type的头，
  • 浏览器就认为服务器不一定能处理掉这个特殊的头的数据
  • 抛出异常
  • 在node服务器 response.setHeader(“Access-Control-Allow-Headers”,“content-type,多个”);
  • formdata的样子: key=value&key=value
  • http请求的options: headers, baseURL, params

• axios属性关系

  • options: headers、baseURL、params
  • 默认全局设置(大家都是这么用)
    • Axios.defaults-> options对象
  • 针对个别请求来附加options
  • axios.get(url,options)
  • axios.post(url,data,options)

3.今日重点

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

4.axio深入

• 合并请求
• axios.all([请求1,请求2])
• 分发响应 axios.spread(fn)
• fn:对应参数(res)和请求的顺序一致
• 应用场景:
  • 必须保证两次请求都成功，比如，分头获取省、市的数据
• 执行特点: 多次请求一起发送，只要有一次失败就算失败，否则全部成功才算成功
• 应用： 有关联的请求 省市的请求

...
created() {
    this.$axios.all([
        this.$axios.post('url', 'content=1111'),
        this.$axios.get('url', 'content=1111'),
    ])  //分发响应
    .then(
        this.$axios.spread((res1, res2)=>{
            console.log(res1,res2);
        });
    ).catch((err)=>{
        console.log(err);
    })
},

5.拦截器

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

Axios.interceptors.request.use((config)=>{
    //return false; //实际上不return config就是一个拦截
    config.headers = {
        accept: 'interceptors'
    };
    return config;  //返回修改之后的config
});

5.1 拦截器操作 token(扩展)

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

5.2 拦截器操作loadding

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

Axios.interceptors.request.use((config)=>{
    //请求发起之前显示loading
    Mint.Indicator.open();
    return config;  
});
Axios.interceptors.response.use((config)=>{
    //响应回来之后隐藏loading
    Mint.Indicator.close();
    return config;  
});

6. 监视 watch / computed

• watch 可以对（单个）变量进行监视，也可以深度监视
• 如果需求是对于10个变量进行监视？
• 计算属性computed 可以监视多个值，并且指定返回数据，并且可以显示在页面
• 都是options中的根属性
  • watch监视单个
  • computed可以监视多个this相关属性值的改变,如果和原值一样 不会触发函数的调用，并且可以返回对象

...
watch: {
    //监听text的改变  基本数据类型直接监视
    text(newValue, oldValue){
        console.log('值变了');
    }
    //引用数据类型的话 ==> 深度监视
    persons:{
        hander(newV, oldV){
        console.log('值变了');
        },
        deep: true
    }
}
...
computed: {
    //如果函数内涉及到的this.相关属性发生改变后触发，并返回一个值（也可以是对象）
    sum(){
        console.log('触发了');
        //return this.price * this.num * (this.rate/100);
        return {
            name: '龙井',
            price: this.price * this.num * (this.rate/100)
        }
    }
}

7. 项目相关

• 组件及效果：头部 轮播图 懒加载 上拉加载更多 mint-ui
• 布局：九宫格 可返回导航栏 底部导航栏 新闻列表 mui
• 图片预览 vue-preview
• 发起请求 axios
• 路由插件 vue-router
• 日期转换 momentjs
• 框架 vue

npm i mint-ui vue-preview axios vue-router moment vue - S;
npm i webpack html-webpack-plugin webpack-dev-server
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 - D

7.1 项目总体结构

|- project
|—| node_modules
|—| src
|—|---| components
|—|---| static
|—|---|—| css
|—|---|—| img
|—|---|—| vendor
|—|---| index.html
|—|---| app.vue
|—|---| main.js
|—| package.json
|—| webpack.config.js

7.2 注意事项

• 背景图片 background-repeat: round

div{
    background-repeat: round;
}

• router-link-active 可以通过路由的构造选项 linkActiveClass 来更改使得全局匹
• 时间显示相关 ==> moment (YYYY-MM-DD HH:mm:ss)
• moment().format(‘YYYY-MM-DD HH:mm:ss’)
• moment(‘20101011’, ‘YYYYMMDD’).formNow();
• moment.locale(‘en’);
• 定义全局日期过滤器 Vue.filter('formatDate', function(val){ return Moment(value).format('YYYY-MM-DD')})
• vue中可复用并且可变化的 ==> 父子组件 注册成全局组件
• 路由参数 去哪里 查询字符串 根据绑定的id去响应查询不同的页面 发起后端请求拼接url