VUE 语法

RaptorWE

已于 2023-08-23 13:48:03 修改

阅读量155

点赞数

分类专栏：常用笔记 VUE 文章标签： vue.js 前端 javascript

于 2023-03-08 00:24:15 首次发布

本文链接：https://blog.csdn.net/Ben_boba/article/details/129394459

版权

常用笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

VUE

6 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js应用程序中如何使用回调函数、设置路由、进行数据验证、状态保持以及响应式展示内容。涉及到的技术包括axios的拦截器用于处理请求和响应，以及使用localStorage进行状态管理。

摘要由CSDN通过智能技术生成

回调函数

声明方法：

@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();

<router-view /> 镶嵌

<div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
     这里是首页
        
    <router-view />
</div>

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

<div  v-show="shopShow">内容</div>
 
<span @click="toggleShopShow">
        <i class="el-icon-more"></i>
</span>
 
 
 export default {
    data () {
      return {
        shopShow: false, //默认内容不显示
      }
    },
    methods: {
      toggleShopShow () {
        this.shopShow = !this.shopShow //使false变为true显示
      },
    }
  }
</script>

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

默认头像和上传的头像
 
        <el-col :span="6">
          <!-- 修改头像 -->
          <el-upload action="http://127.0.0.1:5000/v1/upload" name="img" :show-file-list='false'
            :on-success="uploadAct">
            <el-avatar :size="60" v-if="userinfo.img" :src="userinfo.host + userinfo.img"></el-avatar>
            <el-avatar :size="60" v-else :src="require('@/assets/02.png')"></el-avatar>
          </el-upload>
        </el-col>

插值数据
 
    <div>
      <el-button @click="Yy" v-if="yuyue != ''">{{yuyue}}</el-button>
      <el-button @click="Yy" v-if="yuyue == ''">{{123}}</el-button>
    </div>

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

<div v-if="item.like_name != ''">
      <i class="el-icon-s-opportunity">11 </i>
</div>

false/true判断

    <div>
        <div v-if="data1 == false" class="a1">
            <button @click="xs" style="margin: 30px;">显示</button>
        </div>
 
        <div v-if="data1 == true" class="a1">
            显示的内容
        </div>
    </div>
 
 
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
})