vue基础学习笔记（三）

最新推荐文章于 2024-09-28 11:17:11 发布

winter wang

最新推荐文章于 2024-09-28 11:17:11 发布

阅读量206

点赞数

分类专栏： vue 文章标签： vue axios 计算属性项目相关

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

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