vue框架视频学习第二天笔记

2019-08-17 本文已影响0人果木山

vue视频学习第二天笔记

复习

vue单文件方式 xxx.vue
- 格式：template script style(scoped)
创建基本文件
- 1）配置文件：package.json + webpack.config.js
  - package.json：呈现下载的依赖包信息 + 设置scripts简化运行命令
  - webpack.config.js：配置webpack打包工具；
- 2）index.html：html模板；
- 3）main.js：入口文件
- 4）app.vue和其他子组件
- 5）设置main.js：引入vue模块，实例创建，引入.vue文件渲染到挂载点中；
vue实例方法及使用
- new Vue(options)
  - el：挂载点
  - data:变量
  - methods：事件函数
  - components：声明子组件
  - props：声明父组件传递给自己的自定义属性名，属性名为字符串类型；
- 实例变量调用
  - template中使用{{xxx}}，调用xxx变量；
  - script实例中使用this.xxx，调用xxx变量；
- 实例原型上的方法
  - this.$on(事件行为，回调函数（形参）)：绑定后，可多次触发，接收多次子组件传递来的实参；
  - this.$emit(事件行为，实参)：子组件设置，触发后传递实参
  - this.$off(事件行为)：取消事件行为
  - this.$once（事件行为，回调函数（形参））：绑定后，只触发一次；
  - 注：同一个事件行为的绑定和解绑等操作，前提必须是同一个实例this调用；
- 父子组件中传递参数
  - 父传子：属性值作为参数
    - 父组件：在子组件标签中，设置自定义属性（也可以是系统属性），绑定属性值参数；
      - 1）属性值xxx为常量，通过title="xxx"设置；
      - 2）属性值xxx为变量，通过:title="xxx"设置；
    - 子组件：设置根属性props，值为数组，数组元素为父组件设置的属性名字符串，用于声明接收的属性名；如props:["title"]
      - 使用：与data定义的变量使用方式相同；
  - 子传父：通信vuebus
    - 思想：
      - 前提：必须设置同一个实例，来调用原型上的$on,$emit方法；所以，可以封装一个js文件，返回一个Vue实例；
      - 父组件先通过$on来监听一个事件行为，设置回调函数；父组件的事件行为必须先触发；
      - 子组件在通过$emit给同一个事件行为发射参数数据，触发$on绑定的回调函数；
    - 父组件：引入Vue实例，调用原型$on方法，绑定一个事件行为，设置回调函数
    - 子组件：引入同一个Vue实例，调用原型$emit方法，绑定同一个事件行为，传递参数，触发后父组件中回调函数就能接收到子组件传递的实参；

vue属性解读

过滤器filters
- 创建：全局创建和组内局部创建
  - 组内局部创建：在export default {}对象中设置filters属性，属性值为对象；
    - 对象中设置过滤器的key和value值；value值为函数；通过形参接收过滤的参数值；
    - 创建代码：
```
 export default {
    filters: {
        capitalize: function(value) {
            //value接收到message值
            return value+"meihao";
        }
    }
 }
```
  - 全局创建：调用Vue类原型上的filter方法；
    - 代码：Vue.filter("过滤器名字":function(val){})
    - 注：在main.js中，在new Vue()实例之前，创建全局过滤器
    - 创建代码：
```
 import Vue from "vue";
 import App from "./app.vue";
 
 //filters全局创建，必须在实例创建之前设置；
 Vue.filter("mynote",function (val) {
     return "我是全局创建的filters过滤器"
 });
 //实例创建
 new Vue({
     el: "#app",
     render: createEle => createEle(App)
 });
```
- 调用执行：template中使用
  - 通过{{}}调用执行，格式{{ message | capitalize }}，message为变量值，传送给capitalize的函数体内，返回一个值作为此处的值；
  - 标签中通过v-bind绑定属性，格式<div v-bind:titile="message | capitalize"></div>,message为变量值，传送给capitalize的函数体内，返回一个值作为此处的属性值；
- 比较：当全局创建的过滤器和组内创建的过滤器名字相同时，比较哪一个会使用
  - 权利：组内创建的过滤器 > 全局创建的过滤器
    - 若全局创建的过滤器和组内创建的过滤器名字相同时，在template调用时，会使用自己组内创建的过滤器；
  - 使用范围：全局创建的过滤器 > 组内创建的过滤器
    - 全局创建的过滤器，可以在任何子组件中使用；
    - 组内创建的过滤器，只能在自己的template中使用；自己的子组件都不能使用；
获取DOM结构
- 在指定元素上设置ref="名称A"
- 在获取的地方通过this.$refs.名称A获取
  - 若ref设置在原生DOM元素上，获取的就是原生DOM对象；
    - 可以对该DOM对象直接操作；
  - 若ref设置在子组件对象上，获取的就是该子组件对象；
    - 获取的是子组件对象，通过this.$refs.名称A.$el获取到子组件template模板最外围根标签元素原生DOM对象；
  - 对应的事件
    - created：完成了数据的初始化，此时还未生成DOM，无法操作dom；此时获取的$refs值为空；多用于操作数据；
    - mounted：将数据已经装载到了DOM之上，可以操作DOM，此时可以获取$refs值；多用于操作DOM；

移动端插件mint-ui

作用：用于移动端vue封装的插件
网址：Mint-UI
安装
- Vue 1.x:npm install mint-ui@q -S
- Vue 2.x:npm install mint-ui -S
引入模块：Vue
- 引入Vue：import Vue from "vue"

引入组件

引入全部组件：注：使用use方法，必须在new Vue{}之前使用定义；

 import Mint from "mint-ui";
 Vue.use(Mint):

按需引入部分组件：引入Cell和Checklist组件；

 import { Cell, Checklist } from "mint-ui";
 Vue.component(Cell.name, Cell);
 Vue.component(Checklist.name, Checklist);

引入mint-ui样式
- 代码：import "mint-ui/lib/style.css"，相当于在html文件中使用link来引入css文件；
- 需要下载url-loader插件
引入位置：在main.js中引入以上的模块和css样式文件；
重点：
- 无论是引入全部组件还是按需引入组件，在所有子组件中都能在template模板中使用对应的组件对象标签；
  - 如：Switch,Tabbar等模块，只需在main.js中引入即可，直接在template模板中使用对应的标签；
- 若在script中使用，必须在该组件中，重新引入对应的模块；否则，不能使用；
  - 如：Toast,Indicator等模块，需要在script中设置js，所以必须在所在的export default {}中，再次引入该模块；

vue-router

前端路由核心：锚点值的改变，根据不同的路径，渲染指定DOM位置的不同数据
vue中，模板数据不是通过ajax请求来的，而是调用函数获取到模板内容；
核心：锚点值改变
Vue的核心插件
- vue-router 路由
- vuex 管理全局共享数据

使用方式

1）下载：npm i vue-router -S
2）在main.js中引入模块：import VueRouter from "vue-router"
3）安装插件：Vue.use(VueRouter)，挂载属性；
4）创建路由对象并配置路由规则
- 代码1：let routerRules=new VueRouter({ routes: [{},{}] });
- 代码2：let routerRules=new VueRouter(); routerRules.addRoutes([{},{}])
- routes对应的数组中元素为对象，每一个对象对应一个路由地址；如{path:"/home",component:Home}；
  - path为路由地址，component为地址对应的组件；
5）将路由规则设置Vue实例中，设置options，属性为router，属性值为路由规则
- options中设置router:routerRules;
6）在app.vue中留坑<router-view></router-view>；一个固定格式，必须添加；

代码：

main.js代码：

 //1）引入模块
 import Vue from "vue";
 import VueRouter from "vue-router";
 //引入自定义模块组件
 import App from "./app.vue";
 import Home from "./components/home.vue";
 import Yuan from "./components/yuan.vue";
 
 //2）安装插件，挂载属性
 Vue.use(VueRouter);//挂载属性
 
 //3）设置路由规则
 let routerRules=new VueRouter({
     routes: [
         {path: "/home",component: Home},
         {path: "/yuan",component: Yuan},
     ]
 });
 //4）创建Vue实例，设置路由规则
 new Vue({
     el: "#app",
     //设置路由规则，设置router属性
     router: routerRules,
     render: function (createEle) {
         return createEle(App);
     }
 });

app.vue代码：

 <template>
     <div title="gen">
         <router-view></router-view>
     </div>
 </template>
 <script>
     export default {
 
     }
 </script>
 <style></style>

命令路由 router-link

router-link作用：类似于a标签，点击标签，跳转不同路由，跳转不同页面
使用方式：
- 固定路由地址：<router-link to="/mymusic">跳往音乐</router-link>
- 赋值对象，对应设置路由的name值：<router-link :to="{name:'music'}">跳往音乐</router-link>
  - 赋值对象的形式更利于维护，如果修改规则中的path，对应的router-link中的to值就会改变；
- 以上两种方式对应的路由规则代码
```
 let routerRules=new VueRouter({
     routes: [
         {name:"music",path:"/mymusic",component:Music},
         {name:"movie",path:"/mymovie",component:Movie},
     ]
 });
```

通过router-link跳转到组件

在跳转的组件内，如何获取router-link用to绑定的关于路由地址的参数和地址
Vue类原型上存在两个属性：$route和$router
- $route：只读，具备信息的对象；
- $router：具备功能函数；
在跳转的组件内部通过this调用原型上的两个属性；获取指定的数据信息；
- 绑定：在router-link通过to来绑定数据时，绑定两个属性params和query
  - params属性值为对象，为了绑定地址中的变量值，用于拼接在path后，作为请求路由地址；注意：对象中的属性必须与规则中的路由:xxx后的xxx对应；
  - query属性值为对象，为了绑定地址中?后面的key=val&key=val参数值；
- 组件内获取：在created函数中获取数据，通过this.$route获取整个规则对象；

代码：

main.js中的规则代码：

 //3）设置路由规则
 let routerRules=new VueRouter({
     routes: [
         {name:"list",path:"/list",component:List},
         {name:"detail",path:"/detail/:name/:user",component:Detail},
     ]
 });

list.vue中代码：

 <template>
     <div>
         <p>我是列表页</p>
         <ul>
             <li v-for="(item,index) in stus" :key="index">
                 {{item.name}}
                 <router-link :to="{name:'detail',params:{name:'tian',user:'guo'},query:{id:'yu',keys:'kong'}}">查看</router-link>
             </li>
         </ul>
     </div>
 </template>
 
 <script>
     export default {
         data(){
             return {
                 stus: [
                     {name:"乔峰"},
                     {name:"郭靖"}
                 ]
             }
         }
 
     }
 </script>
 
 <style scoped>
 
 </style>

detail.vue中代码：

 <script>
     export default {
         //获取参数
         created() {
             console.log(this.$route);//打印对象
         }
     }
 </script>

控制台打印this.$route的结果： this.$route结果

编程导航 $router
- 作用：根据浏览器的记录进行后退和前进一页的加载，可以在js中设置路由跳转；
- 位置：Vue类的原型上的公有属性方法；通过实例调用；
- 属性：
  - 1）this.$router.go(1/-1)：根据浏览器记录，进行前进和后退；注：前进和后退的前提是存在浏览器的跳转记录，若无记录，不能完成跳转；
  - 2）this.$router.push(xxx)：进行路由跳转，与router-link中to绑定的参数类似；
    - 字符串："/music"，跳转对应的路由页面；
    - 对象：{name:"movie",query:{id:"mei"},params:{user:"tiantian"}
    - 注：进行路由跳转时，可以设置query传递参数；

vue-router原理

绑定hashchange事件，辨识hash变化，进而触发回调函数；
设置DOM标识，即<div id="xxx"></div>，相当于标签router-view的作用；
最终通过hash值的改变，触发回调函数，将制定的模板数据插入到DOM标识中；
代码：

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>验证vue-router原理</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         div{
             height: 150px;
             background-color: skyblue;
         }
         #flag div{
             background-color: hotpink;
         }
     </style>
 </head>
 <body>
 <div id="app">
     <div>我是头部</div>
     <!--DOM标识-->
     <div id="flag"></div>
     <div>我是底部</div>
 </div>
 <script>
     /*通过在地址栏中添加 #/music 或 #/movie来实现功能*/
     var domFlag=document.getElementById("flag");
     var musicHtml= `<div>我是音乐页面</div>`;
     var movieHtml= `<div>我是视频页面</div>`;
     window.addEventListener("hashchange",fn);
     function fn() {
         console.log(location.hash);
         switch (location.hash){
             case "#/music":
                 domFlag.innerHTML=musicHtml;
                 break;
             case "#/movie":
                 domFlag.innerHTML=movieHtml;
                 break;
         }
     }
 </script>
 </body>
 </html>

重定向和404页面

重定向页面：通过加载某个路由地址后，重定向加载到其他路由地址，渲染相对应的组件；
- 代码：{path: "/", redirect: "/home"}或{path: "/", redirect: {name: "tohome"}，即：当路由地址为"/"，跳转到"/home"的路由地址；
- 用于默认页面的加载，重定向成其他新的地址；
404页面：当出现错误路由地址时，加载对应的一个组件，显示页面加载错误；
- 代码：{path: "*", component: NoFound}，即：接盘侠，路由地址从上到下加载，若无对应路由，则加载404页面；
- 用于页面的报错展示；

多视图 router-view

视图、路由、组件
- 一个视图 + 一个路由 + 一个组件
  - 一个router-view + 一个routes + 一个组件component
- 多个视图 + 一个路由 + 多个组件
  - 多个router-view + 一个routes + 多个组件components
components 多视图，值为一个对象，对象中有多个key和value
- key：对应router-view的name值，若router-view未设置name值，则对应的key为default；
- value: 视图对应显示的组件对象；

代码：

main.js中设置路由规则代码：

 import Header from "./components/header.vue";
 import Footer from "./components/footer.vue";
 import Middle from "./components/middle.vue";
 //设置路由规则
 let routerRules=new VueRouter();
 routerRules.addRoutes([
     {
         path: "/",
         components: {
             h: Header,
             default: Middle,
             f: Footer
         }
     }
 ]);

app.vue中设置router-view代码：

 <template>
     <div>
         <div>我是头部</div>
         <hr>
         <!--多个DOM标识-->
         <router-view name="h"></router-view>
         <router-view name="h"></router-view>
         <!--对应default设置的组件-->
         <router-view></router-view>
         <router-view name="f"></router-view>
         <hr>
         <div>我是底部</div>
     </div>
 </template>

嵌套路由

用单页实现多页应用，复杂的嵌套路由；
视图包含视图
- 一个视图router-view中渲染的组件中，再次包含router-view
路由嵌套路由
- 一个路由规则中的设置，在routes中设置的路由对象中，这是children属性，属性值为数组，数组元素为子路由中的规则路由；
代码：
- main.js中路由嵌套规则设置：
```
 //设置路由规则
 let routerRules=new VueRouter();
 routerRules.addRoutes([
     {name: "index", path: "/"},
     {name: "music", path: "/music", component: Music, children: [
             {name: "oumei", path: "/oumei", component: Oumei},
             {name: "guochan", path: "/guochan", component: Guochan},
         ]}
 ]);
```
- 解析子路由的path设置
  - 若path中设置"/"，则为绝对路径，与父级path无关；
    - 例：若父级path为"/music"，子级路由path设置为"/oumei"，则跳转页面后地址栏中只显示"#/oumei"地址，为绝对路径，与"/music"无关；
  - 若path中未设置"/"，则为相对路径，总路径为拼接父级路径得到；
    - 例：若父级path为"/music"，子级路由path设置为"oumei"，则跳转页面后地址栏中会显示"#/music/oumei"地址，为相对路径，拼接"/music"得到；

vue-resource

作用：发送请求，提交/获取数据
get请求
- 服务器预留接口，通过this.$http.get("/xxx").then(res => {},err =>{})发送get请求，然后通过res.body来获取服务器响应的数据对象；
post请求
- 服务器预留接口，通过this.$http.post("/xxx",{key:value},{options}).then(res => {},err => {})发送post请求，提交数据；
- 注：
  - 在post提交数据时，会存在跨域请求的问题，服务器端需设置跨域请求代码；
  - vue-resource发送post请求提交数据时，可能会报错：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response，此时报错的原因是post请求头content-type类型为application/json，为最新类型，一般浏览器不支持，所以需要修改为application/x-www-form-urlencoded;
    - 设置post请求中的options参数：{emulateJSON: true}
options预检请求：当浏览器发现跨域 + application/json的请求，就会自动发起预检请求，并且携带一个content-type的请求头，类型为application/json;；

vue-resource基本使用代码：

main.js中引入模块，挂载属性

 //引入模块
 import Vue from "vue";
 import VueResource from "vue-resource";
 //挂载属性
 Vue.use(VueResource);

app.vue中script设置钩子函数created发起请求

 <script>
     export default {
         created(){
             this.$http.get("http://localhost:5555/getdata").then(
                 res=>{
                     console.log(res.body.msg);
                 },
                 err=>{
                     console.log(err);
                 }
             );
             this.$http.post("http://localhost:5555/postdata",{name:"mei",sex: "nan"}).then(
                 res => {
                     console.log(res.body.msg);
                 },
                 err => {
                     console.log(err);
                 }
             )
         }
     }
 </script>

app_server.js服务器代码：进行跨域请求

 //创建服务器
 const express=require("express");
 const bodyParser=require("body-parser");
 const app=express();
 app.listen("5555",function () {
     console.log("5555 server is running");
 });
 //设置body-parser中间件
 app.use(bodyParser.urlencoded({extended:false}));
 app.use(bodyParser.json());
 
 //设置跨域请求
 const cors=require("cors");
 app.use(cors({
     origin: ["http://localhost:8888"],
     methods: ["GET","POST"],
     allowHeaders: ["Content-Type", "Authorization"]
 }));
 //创建初始数据库
 var dataAry=[
     {
         name: "乔峰",
         sex: "nan"
     },
     {
         name: "郭靖",
         sex: "nan"
     },
     {
         name: "小龙女",
         sex: "nv"
     }
 ];
 
 //创建请求路由
 app.get("/getdata",function (req, res) {
     res.send({"bok":true,"msg":dataAry});
 });
 app.post("/postdata",function (req, res) {
     //获取post请求提交的数据
     var data=req.body;
     console.log(data);
     dataAry.push(data);
     res.send({"bok":true,"msg":"提交数据成功"})
 });

axios

axios中文文档：axios中文文档
下载axios：npm i axios

在main.js中引入模块，挂载到Vue类原型上，原型上设置一个公有属性，这样就可以通过Vue实例this调用

代码：

 //1.引入模块
 import Vue from "vue";
 import Axios from "axios";
 import App from "./app.vue"
 
 //2.挂载属性，挂载到Vue原型上
 Vue.prototype.$axios=Axios;
 
 //3.实例创建
 new Vue({
     el: "#app",
     render: createEle => createEle(App)
 });

在app.vue的scirpt中，通过this.$axios.xxx调用；

get请求：this.$axios.get(url,options).then(res=>{}).catch(err=>{})
- get请求向服务器传参数时，两种方法：
  - 通过"?"来拼接键值对在url后面；
  - 通过设置options中的params属性，属性值为对象，对象中的key和value，也会通过"&"拼接在url后面；效果与上面一样；
post请求：this.$axios.post(url,data,options).then(res=>{}).catch(err=>{})
- data的类型：字符串或对象
  - 字符串：在发送post请求后，在Request Headers中Content-Type为：application/x-www-form-urlencoded；如：name=guo&age=12;键值对的形式；
  - 对象：在发送post请求后，在Request Headers中Content-Type为：application/json；如：{name:"guo",age:12}；
- 服务器端通过body-parser插件来获取post请求的参数数据，通过代码req.body来获取数据，不管传的是字符串还是对象，得到的都是对象形式；
options：{ params: {id:1}}//查询字符串，headers:{"content-type":"xxxx"},baseURL:" "}
- params设置对象,在get请求中将作为键值对的形式通过"?"拼接在url后面
- baseURL：为该请求，私有的默认url地址；
默认全局设置
- Axios.defaults => options对象，即可以设置headers,params,baseURL等属性；
全局设置默认url地址：Axios.defaults.baseURL="http://localhost:8888"；
接收服务器端响应的值，通过res.data接收；

代码：

main.js代码：

 //1.引入模块
 import Vue from "vue";
 import Axios from "axios";
 import App from "./app.vue"
 
 //全局设置默认url
 Axios.defaults.baseURL="http://localhost:5555";
 
 //2.挂载属性，挂载到Vue原型上
 Vue.prototype.$axios=Axios;
 
 //3.实例创建
 new Vue({
     el: "#app",
     render: createEle => createEle(App)
 });

app.vue代码：

 <template>
     <div>
         我是主页
         <p>数据：{{dataAry}}</p>
         <button @click="handleTo">提交数据</button>
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
                 dataAry: []
             }
         },
         created(){
             this.$axios.get("/getdata",{
                 params: {
                     name: "guomushan",
                     age: 27
                 }
             }).then(res => {
                 this.dataAry=res.data.msg;
             }).catch(err => {
                 console.log(err);
             });
         },
         methods:{
             handleTo(){
                 this.$axios.post("/postdata","name=meihao&sex=nan").then(res => {
                     alert(res.data.msg);
                     this.$axios.get("/getdata").then(res => {
                         this.dataAry=res.data.msg;
                     }).catch(err => {
                         console.log(err);
                     });
                 }).catch(err => {
                     console.log(err);
                 })
             }
         }
     }
 </script>
 <style>
 
 </style>

axios合并请求
- 格式：this.$axios.all([请求1，请求2]).then(this.$axios.spread(fn)).catch(err=>{})
- 其中fn为匿名函数，格式function fn(res1,res2){},其中res1为请求1响应的数据，res2为请求2响应的数据；按照发送请求的顺序，接收响应的数据；
- 要求：合并请求，即同时发送多个请求，当请求全部成功后，才会执行fn函数，否则，只要有一个失败，则执行catch函数；
- 代码：
```
 function fn(res1,res2) {
     console.log(res1.data);//打印get请求响应的数据；
     console.log(res2.data);//打印post请求响应的数据；
 }
 export default {
     this.$axios.all([
         this.$axios.get("/getdata?name=guomushan&age=28"),
         this.$axios.post("/postdata",{name: "meihao", sex: "nv"})
     ]).then(
         this.$axios.spread(getAll)//分发响应
     ).catch(err=>{
         console.log(err);
     })
 }
```

拦截器interceptors

作用：过滤，在一次请求与响应中，添油加醋
设置位置：在main.js中挂载属性之前进行设置；
格式：
- 在request请求之前拦截：axios.interceptors.request.use(fn) ,其中fn：function(config){ xxx; return config}；在函数中对config进行操作，然后返回config；
- 在response响应之后拦截：axios.interceptors.response.use(fn)，其中fn：function(data){ xxx; return data}；在函数中对data进行操作，然后返回data；
config和data获取的是options属性，可以设置headers,params,baseURL等参数；
- 如function(config){ config.headers={xxx}};设置请求头headers参数；
- 如function(data){ data.headers={xxx}};设置响应头headers参数；
代码：

 //1.引入模块
 import Vue from "vue";
 import Axios from "axios";
 import App from "./app.vue"
 
 //全局设置默认url
 Axios.defaults.baseURL="http://localhost:5555";
 
 //通过Axios.defaults进行设置options参数
 Axios.defaults.headers={
     accept: "defaults"
 };
 
 //设置拦截器interceptors，在请求之前拦截设置参数
 Axios.interceptors.request.use(fn1);
 function fn1(config) {
     //对config参数进行设置，相当于options
     config.headers.accept="interceptors";
     return config;
 }
 //设置拦截器interceptors，在响应之前拦截设置参数
 Axios.interceptors.response.use(fn2);
 function fn2(data) {
     //对data参数进行设置，相当于options
     data.headers.accept="interceptors";
     return data;
 }
 
 //2.挂载属性，挂载到Vue原型上
 Vue.prototype.$axios=Axios;
 
 //3.实例创建
 new Vue({
     el: "#app",
     render: createEle => createEle(App)
 });

options参数设置的位置
- 单个请求时，可以设置在请求中设置参数，进而设置options参数；
  - 代码：
```
 this.$axios.get("/getdata",{
     params: {
         name: "guomushan",
         age: 27
     },
     headers: {
         accept: "nei"
     }
 }).then(res => {
     this.dataAry=res.data.msg;
 }).catch(err => {
     console.log(err);
 });
```
- 通过Axios.defaults来设置options参数；
  - 代码：Axios.defaults.headers={accept: "defaults"};
- 通过拦截器中的config和data来设置options参数
  - 代码：
```
 Axios.interceptors.request.use(fn);
 function fn(config) {
     //对config参数进行修改设置，相当于options参数
     config.headers.accept="interceptors";
     return config;//必须返回config；
 }
```
- 三者优先级
  - 单个请求设置，只应用在一个请求中，其他请求中不存在；
  - Axios.defaults和拦截器二者设置，应用在所有的请求中；
  - 权利大小：拦截器 > 单个请求设置 > Axios.defaults
token(扩展)
- cookie和session的机制，cookie自动带一个字符串；
- cookie只在浏览器
- 移动端原生应用，也可以使用http协议，可以加自定义的头，但原生应用没有cookie
- 对于三端来讲，token可以作为类似cookie的使用，并且可以通用；
- 拦截器可以用在添加token上；

拦截器的应用

应用在操作loading
在请求发起之前拦截设置open，在响应回来之后拦截设置close；配合mint-ui使用；
代码：

 //设置拦截器interceptors，在request请求之前拦截
 Axios.interceptors.request.use(function (config){
     console.log(config);
     Indicator.open('加载中...');
     return config;
 });
 //在response响应之前拦截
 Axios.interceptors.response.use(function (data){
     console.log(data);
     setTimeout(function () {
         Indicator.close();
     },2000);
     return data;
 });

侦听器watch

作用：监视变量的改变，而触发，使用于监听一个变量的改变；
浅度监视：变量值为基本数据类型；
深度监视：变量值为引用数据类型，即数组和对象，他们中的属性发生改变，则需要深度监视
代码：

 <template>
     <div>
         <p>验证watch</p>
         <input type="text" v-model="text"/>{{text}}
         <p>{{data.name}}</p>
         <button @click="toChange()">改变值</button>
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
                 text: '',
                 data: {
                     name: "mengsi",
                 }
             }
         },
         methods:{
             toChange(){
                 this.data.name="mei"
             }
         },
         watch: {
             //浅监视，针对变量值为基本数据类型
             text: function(newV,oldV){
                 console.log(newV);//改变后的值
                 console.log(oldV);//改变前的值
                 console.log("text is changed")
             },
             //深度监视，针对变量值为引用数据类型
             data: {
                 handler: function (newV,oldV) {
                     console.log(newV.name);//改变后的新值，但此处为mei
                     console.log(oldV.name);//改变前的新值，此处为mei
                     console.log("data is changed")
                 },
                 deep: true
             }
         }
     }
 </script>
 <style>
 
 </style>

计算属性computed

作用：监听多个变量的改变，使用于多个变量值的改变；
特点：可以监听多个变量值的改变，并且可以定义变量，通过计算返回指定数据作为变量值，然后可以调用使用；
注意：如果变化值与原来的值形同时，不会触发函数；
属性值为对象，对象中为函数键值对；函数名为变量名，函数体的返回值为变量值，无需在data中再定义该变量，直接就可以使用；
代码：

 <template>
     <div>
         <p>验证计算属性computed</p>
         单价：<input type="text" v-model="price"/>
         数量：<input type="text" v-model="count"/>
         比例：<input type="text" v-model="bili"/><br>
         {{sum.name}}：{{sum.all}}
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
                 price: 0,
                 count: 0,
                 bili: 0
             }
         },
         computed: {
             //函数名即为变量名，不用在data中在定义该变量；
             sum(){
                 //可以返回对象和其他
                 //return this.price*this.count*this.bili/100;
                 return {
                     name: "总和",
                     all: this.price*this.count*this.bili/100
                 }
             }
         }
     }
 </script>
 <style></style>

vue框架视频学习第二天笔记

vue视频学习第二天笔记

复习

vue属性解读

移动端插件mint-ui

vue-router

命令路由 router-link

重定向和404页面

多视图 router-view

嵌套路由

vue-resource

axios

猜你喜欢

热点阅读