面向新手的vue教程（第二版） 极速！

书接上回

11 class与style的绑定
在实际的css使用中，经常会遇到一个元素有多个class的情况，这个时候单独的v-bind显然就捉襟见肘。这个时候就需要强大的类与style绑定功能来实现了
直接上例子(来自官网)
<div :class="{ active: isActive }"></div>
这个的意思是这个元素的类 如果isActive为true则为active，如果isActive为false则为空。值得注意的是这里的isActive一般是一个ref()
可见在<template>中，响应式的数据并不需要使用isActive.value 而是isActive就够了。

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
在这个例子中，元素必定拥有一个static类，另外active类是否存在也取决于isActive，text-danger 因为是自己的定义的，所以 text-danger 要有''引号包裹起来

值得注意的是，如果你去观察一些vue代码会发现<style scoped> 这个的意思就是只在这个.vue里面生效，如果没有的话，你如果定义了比如body，这样就会所有的.vue都有这个样式

剩下的我觉得你最好能需要的时候去官网看看，学到这里已经能写出一个能用而且有点特效的页面了

12 路由的使用 router

但我们在设置好了/router/index.js 中的路由之后，能手动通过调整浏览器路由来更改页面，而为了做到点击跳转等操作就需要用到一下内容
在<template>中，跳转页面主要使用类似<router-link to="/login" class="link">已有账号？登录</router-link>来跳转，你如果想一个按钮，按下就跳转，就适合这样做，把这个router-link包裹在一个button里

实际上更多的情况中我们是需要等待后端返回结果之后再决定是否跳转的，这个时候就需要在script中使用 useRouter() 和 useRoute() 来访问路由器实例和当前路由
具体提用法应该参考vue router的官网，这里只做基础介绍
import { useRouter } from 'vue-router';
const router=useRouter()
需要使用时   router.push({path:"/resource"})
这样就可以跳转了 //router.push("/resource")这样也可以

route是用来知道目前是哪个界面的

在学习vue一段时间之后你可能会接触到pinia，但是实际上在一些小型项目中，使用好路由就可以不去使用pinia
！！！因为路由实际上也在存储信息

13 持久化存储
推荐使用localStorage ，几种存储的不同可以自行查阅，这是基本知识
localStorage.setItem('userName', '张三')；

14 发起请求
使用axios，npm install axios就可以下载了，这里会遇到问题，就是墙，只需要执行npm config set registry=https://registry.npmmirror.com 就好了
实际上这个可以当成一个函数，接受一个对象，then和catch接受一个函数。then是当请求成功的时候给出的，catch是失败的时候给出的
axios({
        method:"post",
        url:server+"registerStudent",
        data:{
            account:account.value,
            password:password.value
        }
    }).then(
        function(res){
            localStorage.setItem('token', res.data.token);
            if(res.status==200){
                router.push("/transition")
            }else{
                alert("注册失败，请联系管理员 :",admin)
            }
        }
    ).catch(
        function(err){
            if(err.response.data.error=="Account already exists"){
                alert("这个账号已经注册过了，请使用另外的账号")
            }
        })

15 自动调用
import { onMounted } from 'vue';
导入了onMounted就可以进行自动调用的操作了
onMounter接受一个函数作为参数，函数里面的内容会在页面开始的时候运行，这在实际项目中非常实用