Vue 基础-总览(第零章)

1. js 基础

1. 函数的形式

• Function声明 : 使用关键字 function 声明函数，function foo(){...}
• 匿名函数 : 省略名称声明函数，function(){...}
• 箭头函数 : ()=>console.log("hello")，将它存储在变量中，像普通函数一样调用
• 构造函数 : 使用带有 new 关键字的 Function 构造函数，new Function("arg1","arg2",...,"函数体")，将它存储在变量中，像普通函数一样调用

2. 对象的形式

2. .vue 文件

Vue 自定义了一种后缀名名字为 .vue 文件, 其等于单独组件, 它将 html, js, css 文件整合成一个文件, 并与其中 template, script, style 三个分别依次对应.

.vue 文件本身浏览器不识别, 所以需要进行解析, 在 webpack 构建中, 需要安装 vue-loader 对 .vue 文件进行解析.

<template>
  <!-- 这里写 html -->
</template>
<script>
  export default {};
  <!-- 这里写js -->
</script>
<style lang = "css" scoped>
  <!-- 这里写 css -->
</style>

• template: 最外层必须是只有一个容器
• script: export default {} 即导出这个组件, 使外部可以引用
• style: lang 表明书写 css 的样式类型, scoped 指这里写的 css 只适用于该组件

3. export/import

• export: 用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块
• import: 在一个模块中导入另一个含有 export 接口的模块

注意：

• export default 和 export 都能导出一个模块里面的常量、函数、文件、模块等，但前者只能有一个
• 通过export 方式导出，在导入的时候需要加大括号({})，export default 就不需要

// export default
function service(){}
export default service;
// 不带 { } 导入，且只能导入一个
import service from 'file1.js'

// export
function service1(){}
function service2(){}
export {service1, service2};
// 需要 { } 导入，且可以导出多个
import {service1, service2} from 'file1.js'

4. 路由

1. 路由懒加载

路由懒加载指的是当路由被访问的时候才加载对应组件。

传统路由写法：

import Home from "../views/Home.vue";
Vue.use([
  {
    path:'/',
    name:'Home',
    component: Home 
  }
]);

路由懒加载写法：

Vue.use([
  {
    path:'/',
    name:'Home',
    component: ()=> import('../views/Home.vue')
  }
]);

二级路由写法：

Vue.use([
  {
    path:'/',
    name:'Home',
    component: ()=> import('../views/Home.vue'),
    children: [
      {
          path: '/home',
          name:'home',
          component:() => import('../views/home/index')
      },
      {
          path: '/home/user',
          name:'user',
          component:() => import('../views/user/index')
      }
    ]
  }
]);

2. 路由重定向

// 从 /a 重定向到 /b
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
// 重定向到名字为 foo 的组件
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

3. 使用

• 在 html 中，可以在 template 中设置 <router-link> 即可

// 不带参数跳转
<router-link :to="{name:'index'}">跳转链接1</router-link>
<router-link :to="{path:'/index'}">跳转链接2</router-link>
// 带参数跳转
<router-link :to="{name:'index',params:{id:1}}">跳转链接3</router-link>
<router-link :to="{name:'index',query:{id:1}}">跳转链接3</router-link>

• 在 js 中，可以在函数中调用 this.$router.push() 即可

// 不带参数跳转
this.$router.push('/home');
this.$router.push({name:'home'});
this.$router.push({path:'/home'});
// 带参数跳转
this.$router.push({name:'home',query: {id:'1'}}) 
this.$router.push({path:'/home',query: {id:'1'}}) // 参数接收：this.$route.query.xxxxxxx
this.$router.push({name:'home',params: {id:'1'}}) // 参数接收：this.$route.params.xxxxxxx

5. Axios

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，使用前需要安装 npm install axios。

1. 拦截器

为了组件之间代码复用，将接口解耦出来，形成 api文件直接引入，并在其中编写全局拦截器，方便进行一些公共操作，如 token 检查、登录鉴权等。

一般首先定义 request.js 工具类，在其中编写全局拦截器，并在各个 api 文件中进行调用。

实例：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

6. Promise

主要用于异步计算，它将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。

当通过 new 创建 Promise 实例时，需要传入一个回调函数，称为 executor，它会被立刻执行，并传入两个回调参数 resolve、reject

• 当调用 resolve 回调函数时，会执行 Promise 对象的 then 方法传入的回调
• 当调用 reject 回调函数时，会执行 Promise 对象的 catch 方法传入的回调

let promise = new Promise((resolve, reject) => {
    // resolve('success')
    // reject('fail')
})
// then 参数是一个函数，函数中携带一个参数，是 resolve(res) 返回的数据
// catch 参数是一个函数，函数中携带一个参数，是 reject(err) 返回的数据
promise.then(response => {
    console.log('成功')
    console.log(response)
}).catch(error => {
    console.log('失败')
    console.log(error)
})

Promise 是一个状态机，分为 3 种状态：

• pending: 进行状态，执行了 executor 后，处于该状态
• fulfilled: 成功状态，表示执行成功，在调用 resolve() 后，状态更改为它，且无法再次更改
• rejected: 拒绝状态，调用 reject() 后，状态更改为它，且无法再次更改

7. 环境变量与模式

默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于开发环境
• production 模式用于生产环境（项目上线）
• test 模式用于测试

通过 process.env.NODE_ENV 的值表明所在环境，并且根据当前环境来进行不同配置。

在项目根目录创建一个名为 .env.xxx 的文件，那么在该文件里声明的变量就只会在 xxx 模式下被载入。