Vue3
文章平均质量分 79
Vue的知识点
Melody_kui
小葵加油,冲冲冲!!!
展开
-
Vue-router 实现权限控制
1.路由元信息(meta) 如果一个网站有不同的角色,比如 管理员 和 普通用户 ,要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ,只要 在访问的时候判断一下角色权限 。如果有权限就让访问,没有权限的话就拒绝访问,跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转。 可以在每一个路由的 meta 属性里,将能访问该路由的角色添加到 roles 里。用户原创 2022-03-08 14:51:30 · 4141 阅读 · 0 评论 -
Vite+TS搭建项目
1.搭建vite项目 1.安装vite npm i -g create-vite-app 2.创建vite项目 create-vite-app vue3-demo 3.安装依赖 npm install 4.运行项目 npm run dev 2.配置TS环境 使用vite搭建好的项目是没有使用typescript的,所以我们要去安装typescript并修改代码,以保证我们后续可以使用typescript 1.安装TS npm install typescript 2.在项目的根目录创建文件:tsconfi原创 2022-01-12 21:21:04 · 2655 阅读 · 0 评论 -
前后端分离登录
1.http无协议 因为HTTP是无状态的协议,也就是说,这个协议是无法记录用户访问状态的,其每次请求都是独立的无关联的,一笔是一笔。而我们的网站都是设计成多个页面的,所在页面跳转过程中我们需要知道用户的状态,尤其是用户登录的状态,这样我们在页面跳转后我们才知道是否可以让用户有权限来操作一些功能或是查看一些数据。 所以,我们每个页面都需要对用户的身份进行认证。为了实现这一功能,用得最多的技术就是浏览器的cookie,我们会把用户登录的信息存放在客户端的cookie里,这样,我们每个页面都从这个cookie里原创 2021-11-16 20:05:20 · 3960 阅读 · 0 评论 -
js重绘与回流
关于js的重绘与回流 1.浏览器的渲染过程 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点的几何属性(坐标和大小)(margin,pading,height,width等),生成Render Tree(不包含display: none的节点);这一过程叫回流或者布局; 在Render Tree进一步渲染其它属性。如:color等。 2.重绘 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘原创 2021-11-20 21:53:11 · 1486 阅读 · 0 评论 -
vuex教程
1.vue是什么? 它是一个程序里面的状态管理模式,它是集中式存储所有组件的状态的小仓库,并且保持我们存储的状态以一种可以预测的方式发生变化。 2. 什么时候用vuex呢? 如果你不需要开发大型的单页应用,此时你完全没有必要使用vuex,比如你的页面就两三个,使用vuex后增加的文件比你现在的页面还要多,那就没这个必要了。 假如你的项目达到了中大型应用的规模,此时您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。 3.vuex流程 4.使用uex 4.1安装 npm ins原创 2021-11-17 16:30:02 · 263 阅读 · 0 评论 -
Vue组件化
1.全局组件 <!-- 首页 --> <div id="home"> <span>首页</span> <button-counter></button-counter> </div> //注册全局组件 app.component('button-counter', { data() { retur原创 2021-11-08 20:37:12 · 111 阅读 · 0 评论 -
Vue-cli3配置项
1."export ‘createRouter’ was not found in 'vue-router’报错 出现这样的报错是因为我们使用的vue-router包不对,安装了2.x版本的,因为我们现在开发使用的是vue3,所以也要对应安装vue3版本的vue-router包。我们只需要将之前安装的 vue-router包卸载,然后重新安装vue3的vue-router包。 // 卸载 vue2.x 的vue-router npm uninstall vue-router --save // 安装 vue原创 2021-11-01 20:17:57 · 158 阅读 · 0 评论 -
vue3封装Button组件
Button.vue <template> <!-- 控制按钮显示不同样式 --> <button @click="handleClick" :class="[ type ? 'button-' + type : '', 'button_init', { 'is-plain': plain, 'is-circle': circle, }, ]" >原创 2021-10-15 16:47:48 · 695 阅读 · 0 评论 -
vue3封装tabbar组件
tabbar组件tabbarItem接收选项参数1.tabbarItem.vue2.tabbar.vue3.router.js4.main.js5.使用示例(App.vue)6.效果 tabbarItem接收选项参数 1.path(路由页面path) type:String 2.selectedColor(选中文字颜色) type:String 1.tabbarItem.vue <template> <div id="tabbar-item" @click="itemClick"&原创 2021-10-13 19:26:22 · 518 阅读 · 2 评论 -
Vue-Router
1.router.js // 1.引入 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'; /* import Home from '../components/Home.vue'; import Mine from '../components/Mine.vue'; import News from '../components/News.vue'; */ // 路由懒加载 const原创 2021-10-13 13:35:47 · 111 阅读 · 0 评论 -
vue3新特性
1.mixin 作用:定义一些公共的数据和方法,在多个组件都可以进行使用 1.1mixin初体验 // 定义一个Mixin对象(可以放任何东西) const myMixin = { data() { return { msg: "张三", } }, methods: { hello() { alert("hel原创 2021-10-06 16:37:23 · 241 阅读 · 0 评论