VUE 语法

回调函数

声明方法：

@finish=" (active) => { onFinish(active) } "

编写方法：（this.失效时，可以定义新的变量代替使用）

data() {
    return {
      lose_login: true,
    };
  },

methods: {
    onFinish: function () {
      var _that = this;
      _that.lose_login = false;
    },
 },

//

 当前时间+60秒

deadline: Date.now() + 1000 * 60

get查询参数

this.src = this.src + "?username=" + this.username + "&uuid=" + this.uuid;

正则匹配

let aa1 = /^[A-Za-z_]\w{5,16}$/.test(this.username);

方法中if 判断

if (!aa1)

uuid

import { v4 as uuid4 } from "uuid";

this.uuid = uuid4();

镶嵌

     这里是首页
        
    

import reg from '../components/reg'
import home from '../components/home'
import login from '../components/login'

var routes = [

  {
    path: '/',
    name: 'home',
    component: home,
    children: [
      {
        path: '/reg',
        name: 'reg',
        component: reg
      },
      {
        path: '/login',
        name: 'login',
        component: login
      },
    ]
  },
]

v-show

内容
 

        

 
 
 export default {
    data () {
      return {
        shopShow: false, //默认内容不显示
      }
    },
    methods: {
      toggleShopShow () {
        this.shopShow = !this.shopShow //使false变为true显示
      },
    }
  }

v-if 展示 默认值或传过来的数据

默认头像和上传的头像
 
        
          
          
            
            
          
        

插值数据
 
    

      {{yuyue}}
      {{123}}
    

如果数据为空列表 可使用 != 使div 不显示

      11 

false/true判断

    

        

            显示
        
 
        

            显示的内容
        
    
 
 
data() {
        return {
            data1: false,    // 展示 data1 == false
        };
    },
 
 
methods: {
        xs() { 
            this.data1 = true    // 设置点击事件 改为显示 data1 == true 的内容
        }
    },

状态保持

localStorage.setItem('user', this.username) // 用户名存入localStorage，以做状态保持
 
let username = localStorage.getItem('user')  // 取出user信息，可以判断用户是否登录
 
localStorage.removeItem('user')    // 删除本地存储

main.js 设置全局拦截器 

// ** 响应拦截器
axios.interceptors.response.use((resp) => {
    console.log(resp, '>>>>>>>>>>>>>>>resp')
    if (resp.data.code == 403) {
        router.push('/login')
    }
    return resp
})
 
// ** 请求拦截器
axios.interceptors.request.use((resp) => {
    console.log(resp, '>>>>>>>>>>>>>resp')
    resp.headers.token = localStorage.getItem('token')
    return resp
})