Vue
关注
分享
扫一扫
学习中
tengyuxin
1.坚持阅读元知识文档
2. 确定理解力 优先 纪录
3. 重点记录自己思考后抽象出的知识之间的逻辑关系
展开
-
vue3 搭建一个项目需要注意的内容
之后，在vite.config.js中添加 导入scss预编译程序。（3）scss 定义常量： 字体大小，标题大小，普通文本。后面有时间，将一个完整的项目案例放在这里，供以后巩固基础。按照scss时，yarn add sass -D。（2）屏幕如何缩小，内容同比列虽小，不会损坏。（1）字体比例为 1rem = 100px。引入 screenAuto.js 文件。原创 2023-07-18 15:39:53 · 102 阅读 · 0 评论 -
js 锚点定位（在vue中的使用）
那么在vue下，使用ref获取DOM节点调用该方法，如下是vue3中使用。其次还可以配置动画效果，例如这样。原创 2023-03-03 11:42:58 · 324 阅读 · 0 评论 -
Vue3 在setup组合式API 中 使用全局挂载的属性
中我们通常在main.js文件中使用Vue.prototype 来绑定全局属性，之后使用this来调用。在main.js文件中使用，如下在其它组件中使用（目前Vue3中该使用setup组合式API）vue3全局挂载属性方式要通过globalProperties，调用的方式注意：这种方式非常不好，Vue3官网中强烈建议不要把它当作在组合式 API 中获取 的替代方案来使用。...原创 2022-07-14 15:16:02 · 5060 阅读 · 4 评论 -
Vue3 对 模板、组件选项、实例化 等 名词 的理解
答：Vue使用的是基于HTML的模版语法，所以下面的固定结构就是模版本组件实例化目前Vue3组件的实例化，只能通过createApp 返回引用实例答：如下这种配置式方式原创 2022-06-30 15:26:48 · 408 阅读 · 0 评论 -
Vue3 通过 ref 获取DOM节点 和 通过组件实例化返回根DOM节点
获取DOM节点，属于vue 模板引用的知识点，1. 在组件选项的文件中，模板引用方式2. 在组合式API中模板引用发过誓下面的案例是在 组合式API文件中使用的方式目前Vue3组件的实例化，只能通过createApp 返回引用实例2. 通过实例属性 $el ，得到 该Vue实例的根DOM节点元素...原创 2022-06-30 15:26:30 · 2279 阅读 · 0 评论 -
Vue3 事件总线
答：一般父子组件通信，就直接使用事件抛出emit就好，但是如果两个组件没有关系 或者 关系嵌套层级很多，就要采用总线事件系统。A组件抛出事件名a，B组件里面，在mounted生命周期监听事件名a，并做出处理。在其它组件使用原创 2022-05-31 20:28:36 · 3618 阅读 · 0 评论 -
Vue3 从零开始 搭建 简单 干净 的 后台管理系统
前言：记得自己大二时（2017年），想搭建一个后台管理系统，当时头脑想的是用原生JS写的。我肯定干不出来，后来乖乖用了当时比较流行的layui，就算现在也真的难以做下去。这几天，有了需要后端管理系统的需求，我本想接着随便找一个框架改改算了。后来又改变主意了，决定自己从头搭建一个。（1）长期考虑，以后确实很多时候，都需要一个干净的、简单的后端管理系统（2）理解UI框架的搭建过程，尤其是知道细节，我讨厌模模糊糊的感觉一、下图就是系统首页框架结构：跟主流后台管理系统框架结构差不多原创 2022-05-22 17:39:15 · 18749 阅读 · 1 评论 -
Vue3 的基础内容
报错： Cannot read properties of null (reading 'clientWidth')您的JS运行的时候你的页面还没有加载完成，所以你的JS代码找不到你的页面元素，就会抛出这个问题，所以要放在生命周期函数mounted1. 在main.js文件/* vue3 写法 */import { createApp } from 'vue'import App from './App.vue'//导入路由import router from './route';原创 2022-05-18 10:08:34 · 4295 阅读 · 0 评论 -
前端 使用axios 直传 OSS
背景：图片、pdf、音频这些文件，我都放在了阿里云OSS上，前端需要从服务端请求生成的签名URL上传文件。 得到上传文件的url 后利用axios 直传具体代码如下let reader = new FileReader();reader.onload = function (e) { let fileBinary = e.target.result; axios({ method: "PUT",原创 2022-05-17 18:58:54 · 1152 阅读 · 0 评论 -
Vue 2.6 配置 多个proxy代理
vue-cli 文档上面，写的配置多个代理如下代码module.exports = { devServer: { proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } } }}具体还原创 2022-05-17 18:29:23 · 4835 阅读 · 0 评论 -
Irregular whitespace not allowed no-irregular-whitespace 不允许有不规则的空格
这个报错，大家都知道是Eslint 检测的问题，我的代码本身就是从另一个项目粘贴过来的，无论咋样都通不过语法检测，我直接采用最暴力的方法。将 "eslint:recommended" 删除该属性就是启动 空格检测规则的属性，直接删除就可以通过，详细查看Eslint 不规则空格检测的官方说明...原创 2022-05-13 10:02:53 · 3788 阅读 · 1 评论 -
数据响应 vue2 $set和vue3 reactive
vue 里面常用的就是数据响应，理解原理才是最重要的。下面是介绍，向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。vue2和vue3的不同实现方式手动实现数据响应，练习vue2的 Object.defineProperty，代码如下：案例思路：在input框中输入内容，p标签显示input框输入的内容<!DOCTYPE html><html lang="en"><head>原创 2022-04-12 08:46:44 · 1279 阅读 · 0 评论 -
Vue中使用ElementUI的pagination组件 实现分页
分页请求原理：很多情况，前端请求回来的数据是一个数组，这个数组数据量可以达到上万条，这样数据量过大，会导致前端卡顿，影响用户体验。所以就需要分页，后端从数据库查数据时通过 如下语句select * from article limit startNumber,pageSize后端需要计算从哪个索引开始，公式为startNumber = (页码-1)*pageSize前端分页还是后端分页？答：当然是后端做分页没有后端很难模拟分页请求，思路其实很简单，每原创 2022-02-22 18:24:36 · 1864 阅读 · 0 评论 -
vue 路由拦截
需求：用户未登陆时，可以通过修改地址栏，进行路由跳转，这时，我需要判断它是否，有权限，如果有则允许跳转，如果没有，则返回登陆页做这个小案例，都在前端vue项目里面，不依赖后台，好测试技术点：用到Vue路由守卫和localstorage逻辑思路：登陆成功时，通过localstorage设置一个标识，比如localStorage.setItem("islogin", 1);之后，就通过这个标识判断是否有权限下面就是我router.js代码import Vue from原创 2022-02-16 16:56:53 · 677 阅读 · 0 评论