2024-11-13 厉飞雨 阅读(11) 评论(0) 赞(4)

声明式和命令式 {#声明式和命令式} ================== 原生开发和 Vue 开发的模式和特点，我们会发现是完全不同的，这里其实涉及到`两种不同的编程范式`: 命令式编程声明式编程 命令式编程关注的是 `how to do`自己完成整个 how 的过程; 声明式编程关注的是 `what to do`, 由框架(机器)完成 `how`的过程; &...

2024-11-13 厉飞雨 阅读(13) 评论(0) 赞(3)

复杂 data 的处理方式 {#复杂-data-的处理方式} ============================== **我们知道，在模板中可以直接通过`插值语法`显示一些`data 中的数据`。** **但是在某些情况，我们可能需要`对数据进行一些转化`后再显示，或者需要`将多个数据结合起来`进行显示;** * 比如我们需要对`多个 data 数据进行运算、三元运...

2024-11-13 厉飞雨 阅读(13) 评论(0) 赞(2)

v-model 的基本使用 {#v-model-的基本使用} ============================== **表单提交**是开发中非常常见的功能，也是和用户交互的重要手段: * 比如用户在`登录、注册`时需要提交账号密码; * 比如用户在`检索、创建、更新`信息时，需要提交一些数据; 这些都要求我们可以在**代码逻辑中获取到用户提交的数据** ，我们通常...

2024-11-13 厉飞雨 阅读(8) 评论(0) 赞(1)

什么是响应式? {#什么是响应式} ================= > 我们先来看一下响应式意味着什么?我们来看一段代码: |---------------|---------------------------------------------------------| | ``` 1 2 3 ``` | ``` let m = 20; console.log...

2024-11-06 厉飞雨 阅读(31) 评论(0) 赞(5)

Preface {#preface} ------------------ 在 Vue 前端项目中不可避免的要使用 icon svg 图标组件，对于这个组件它需要两种能力： 1. 显示外部 svg 图标。 2. 显示项目内的 svg 图标。 基于以上概念，我们先来实现显示外部 svg 图标。 显示外部 svg 图标 {#显示外部-svg-图标} ------------...

2024-11-06 厉飞雨 阅读(31) 评论(0) 赞(3)

在做一个用vite构建的vue3项目时，动态拉取菜单导入页面，然后一直报错，偶尔可以，偶尔不行。  **问题描述** ----...

2024-11-06 厉飞雨 阅读(47) 评论(0) 赞(3)

动态路由 ---- 如果你的网页有管理员、普通用户等多种角色类型，不同的角色能看到的页面/菜单应该是不同的，所以不同的用户登录之后应该监听到不同的动态路由和渲染不同的菜单，这个时候就需要用到动态路由。 简单来说就是根据用户信息获取其对应的权限，生成对应的路由挂载，然后动态渲染有权限的菜单于侧边栏菜单。 实现思路图示： ![来自掘金：小绿与小蓝](http://stati...

2024-11-06 厉飞雨 阅读(33) 评论(0) 赞(4)

用脚手架安装的时候勾选了`eslint`，而`eslint`如果检测到跟他的规则不一致就会报错，`vue/multi-word-component-names`这个是用来检测当前的组件名称是否使用驼峰或多单词命名，`eslint`默认对其进行检测，所以需要修改一下eslint的检测规则。 在`.eslintrc.js`文件内增加如下规则即可。 ```lang-javascr...

2024-11-06 厉飞雨 阅读(30) 评论(0) 赞(4)

安装 --- npm安装 ```lang-bash npm install --save nprogress ``` 或CDN引入 ```lang-html <script src='nprogress.js'></script> <link rel='stylesheet' href='nprogr...

2024-10-30 厉飞雨 阅读(28) 评论(0) 赞(5)

**生命周期钩子** 我们可以直接看生命周期图来认识都有哪些生命周期钩子(图片是根据官网翻译后绘制的)： ![image.png](http://static.51tbox.com/static/2024-10-30/col/06f569ce47ace981d467e2e79070b2bc/8611bf09bec84cdcb273bfb908647469.png.jp...