vue3实战
文章平均质量分 84
vue3知乎日报实战
前端 贾公子
博主写了对element-plus的表格和表单的封装
[表格]https://gitee.com/childe-jia/table-vue3
[表单] https://gitee.com/childe-jia/form-render
大家支持一下
展开
-
particles在vue3中的基本使用
1.安装插件2.在main.js中引入。原创 2023-03-02 16:18:13 · 1165 阅读 · 1 评论 -
vue3组件通信方式一
在vue框架中事件分为两种:一种是原生的DOM事件,另外一种自定义事件。原生DOM事件可以让用户与网页进行交互,比如click、dbclick、change、mouseenter、mouseleave....自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件<template><div><h1>我是子组件2</h1>原创 2023-06-13 16:51:18 · 504 阅读 · 0 评论 -
vue3 ---- 递归组件生成menu菜单 && 路由守卫鉴权
对于一些有规律的DOM结构,如果我们再一遍遍的编写同样的代码,显然代码是比较繁琐和不科学的,而且自己的工作量会大大增加,那么有没有一种方法来解决这个问题呢?答案是肯定的,我们可以通过方式来生成这个结构,当然在 Vue 模板中也是可以实现的,我们可以在 Vue 的组件中调用自己本身,这样就能达到目的。一个单文件组件可以通过它的文件名被其自己所引用。例如:名为FooBar.vue的组件可以在其模板中用引用它自己。原创 2023-06-05 11:20:38 · 3759 阅读 · 1 评论 -
Vue3二维码生成
⚠️ 如果你正在使用 Vue 3,请升级。🔒 如果你正在使用 Vue 2,请保持。一款 Vue.js 二维码组件.或者,在独有单文件扩展。在 Vue 3 中配合。原创 2023-08-23 13:49:13 · 505 阅读 · 0 评论 -
搭建后台管理系统模板(v3+ts+vite)
一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。会在根目录下生成个一个.husky目录,在这个目录下面会有一个pre-commit文件,这个文件里面的命令在我们执行commit的时候就会执行。顾名思义,开发使用的环境,每位开发人员在自己的dev分支上干活,开发到一定程度,同事会合并代码,进行联调。原创 2023-05-30 11:53:21 · 1507 阅读 · 0 评论 -
在vue3+ts+vite中使用svg图片
SVG(Scalable Vector Graphics)是一种用于描述二维矢量图像的XML语言。它可以实现图像的高质量缩放和无损放大,因此被广泛应用于Web开发和图形设计领域。SVG的优点之一是它具有跨平台和跨浏览器的兼容性。由于SVG图像是基于XML的,所以可以在任何支持SVG的浏览器中进行渲染和显示。这使得开发人员能够创建只需一次编码就能在各种设备上完美呈现的图像。与其他图像格式(如JPEG和PNG)相比,SVG的文件大小较小,因为它使用的是矢量图形而不是像素。原创 2023-08-22 23:10:59 · 633 阅读 · 0 评论 -
vue3基础------ 下
更改快照是没有意义的,因此计算属性的返回值应该被视为只读的,并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。若我们将同样的函数定义为一个方法而不是计算属性,两种方式在结果上确实是完全相同的,然而,不同之处在于计算属性值会基于其响应式依赖被缓存。watch选项期望接受一个对象,其中键是需要侦听的响应式组件实例属性(例如,通过data或computed声明的属性)——值是相应的回调函数。默认是浅层的:被侦听的属性,仅在被赋新值时,才会触发回调函数——而嵌套属性的变化不会触发。原创 2023-06-26 16:24:59 · 385 阅读 · 0 评论 -
vue3进阶-----单文件组件
{{item}}</li>原创 2023-06-27 15:15:54 · 1405 阅读 · 0 评论 -
vue3---模板引用 && nextTick
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。是HTML5中的新API,是个用来监视DOM变动的接口。钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进。钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题。想要一个异步API,用来在当前的同步代码执行完毕后,执行我想执行的异步回调,包括。原创 2023-06-10 11:56:01 · 7276 阅读 · 0 评论 -
vue3基础 ---- 上
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还 是复杂的界面,Vue 都可以胜任。原创 2023-06-23 10:25:33 · 545 阅读 · 0 评论 -
vue3组件通信方式 二
parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。既然可以在父组件内部通过ref获取子组件实例VC,那么子组件内部的方法与响应式数据父组件可以使用的。但是需要注意,如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”,外部不能访问。在父组件内部提供结构:Todo即为子组件,在父组件内部使用的时候,在双标签内部书写结构传递给子组件。//pinia:集中式管理状态容器,可以实现任意组件之间通信!原创 2023-06-14 09:42:06 · 703 阅读 · 0 评论 -
v3+element管理系统----主题定制 && 刷新 && 全屏
/ document.documentElement 是全局变量时// 获取 css 变量// 设置 css 变量。原创 2023-06-07 17:29:41 · 589 阅读 · 0 评论 -
vue3项目实战---知乎日报----收藏页
目录vuex网络请求列表页收藏功能页面如何获取vuex的值vue3 vs vue2computedvueximport { createStore } from "vuex";import { CheckLogin, UserLnfo, StoreList } from '../api/index'const store = createStore({ state: { isLogin: null, info: null,原创 2022-04-29 15:24:49 · 474 阅读 · 0 评论 -
Vue3新特性全面剖析
一款框架诞生需要的阶段查看版本:npm view vue versions开发 alpha版:内部测试版 α beta版:公开测试版 β rc版:Release Candidate(候选版本) stable版:稳定版npm i vue@lasted:下载的是vue2vue2 vuex3 vue-router3 element-ui 2npm i vue@next:下载的是vue3vue3 vuex4 vue-router4 element-plus 1 npm i.原创 2021-12-20 22:18:48 · 1530 阅读 · 0 评论 -
VUE3快速上手
目录1.Vue3简介2.Vue3带来了什么1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性一、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建项目结构介绍二、常用 Composition API1.拉开序幕的setup2.ref函数3.reactive函数4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式5.reactive对比ref6.setup的两个注意点原创 2022-04-20 18:01:21 · 309 阅读 · 0 评论 -
vue3项目实战---知乎日报----个人中心
登录态校验通过beforeEach 路由导航守卫实现 (to 从哪来,from:去哪, next执行)通过to.path 判断要去的页面 为个人中心,编辑个人信息,收藏 做拦截判断vuex中isLogin是否为登录 true不做拦截 false跳转到登录页如果为null 跳转登录页 同时调取接口校验是否登录通过commi同步vuex管理的状态import { createRouter, createWebHashHistory, } from "vue-router";imp...原创 2022-04-27 00:44:16 · 2207 阅读 · 0 评论 -
vue3项目实战---知乎日报----项目搭建
目录基础框架和响应式布局项目介绍接口文档vue.configpagejson初始化公共样式vuex模块路由模块utils公共类库axios 二次封装响应式处理 && vant ui组件库基础框架和响应式布局项目介绍知乎日报@1 技术栈:@vue/cli、vue3、vuex4、vue-router4、vant3、axios(qs)... + postcss-pxtorem & amfe-flexible 基于这两个模块..原创 2022-04-24 00:43:30 · 1856 阅读 · 0 评论 -
vue3项目实战---知乎日报----详情页
目录组件缓存网络请求详情页$nextTick&&scoped组件缓存当首页跳转详情页应该做缓存vue2 <keep-alive include="Home"> <router-view></router-view> </keep-alive>vue3<!-- Component 为渲染的组件 is控制是否--> <router-view v-slot=".原创 2022-04-25 23:40:09 · 1128 阅读 · 0 评论 -
vue3项目实战---知乎日报----首页功能
header用类库处理时间格式(不传为当前时间,传递字符串返回数组格式)通过计算属性 处理数组对应月份(计算属性有缓存)// 日期格式化export const formatTime = function formatTime(time, template) { if (typeof time !== "string") { time = new Date().toLocaleString('zh-CN', { hour12: false }); }原创 2022-04-25 18:07:12 · 1247 阅读 · 0 评论 -
vue3项目实战---知乎日报----登录页
目录网络请求vuex封装标题栏登录页网络请求poist请求通过body主体发送 (对象)默认json 其他格式在transformRequest中配置每次发送请求 携带token axios.interceptors.request.use配置 获取本地存储的token接口需要在请求头中携带TOKEN信息authorzation:token「客户端登录成功后存储在本地的令牌信息(从服务器获取)」临时测试:生成的验证码可在「后端程序 -> code.tx..原创 2022-04-26 17:40:44 · 591 阅读 · 0 评论 -
vue3项目实战---知乎日报----首页样式结构
页面效果模块拆分 header头部 swiper轮播图 items文章列表 loading/deep/ 设置vant样式固定图片大小一般写min-height: 100%;//渐变色background: rgba(0, 0, 0, .4);background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));//两行显示省略号 overflow: hidden; display: -w...原创 2022-04-24 20:03:34 · 1202 阅读 · 0 评论