随笔分类 - vue3个人学习
Vue 的 nextTick 的原理是什么&生命周期
摘要：1、Vue 的 nextTick 的原理是什么? \1. 为什么需要 nextTick ， Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api
阅读全文
vite
摘要：项目痛点 我不会nodejs，无法自己做代理服务器 导入js文件的时候，还要写后缀 导入node_modules里面的文件的时候，居然要写具体的路径 我做的项目修改了代码以后，要自己刷新 项目最后写完以后要交给后端，后端去部署上线，代码要压缩 后期项目可能要用ts，可能要用sass，浏览器不能识别，
阅读全文
一次讲清Vue2和vue3中 v-model的变化
摘要：再一次讲清Vue2和vue3中 v-model的变化 在vue2中 v-model = "msg" 可以翻译为： :value="msg" @input="msg=$events" 在一个组件上，v-model 只能使用一次，如果想要对多个数据同步绑定，则可以使用.sync修饰符。 在vue3中 为
阅读全文
axios请求响应拦截器
摘要：axios使用请求响应拦截器 请求拦截器 在请求发出去之前 对请求配置做一些调整，决定请求继续还是请求终止 一般可以添加token请求头 响应拦截器 在响应返回以后，还没有执行then回调之前 对响应内容做一些调整，决定then回调函数接受的数据 一般可以统一提示，统一提取data // 添加一个请
阅读全文
nexttick的原理与应用
摘要：nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 使用nextTick的目的 即使在 Vue 中多么频繁地修改数据，最后 Vue 页面只会更新一次。 nextTick的作用 nextTick 就是设置一个回调，用于异步执行。
阅读全文
Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？
摘要：通常使用Vue2开发的项目，普遍会存在以下问题： 代码的可读性随着组件变大而变差 每一种代码复用的方式，都存在缺点 TypeScript支持有限 以上通过使用Composition Api都能迎刃而解 Composition Api 是Vue3.0新增的api， 一组基于函数的api， 可以更灵活的
阅读全文
vue中keep-alive的使用
摘要：vue中keep-alive的使用 什么是keep-alive keep-alive是vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive是一个抽象组件：它自身不会渲染成一个dom元素，也不会出现在父组件链中。 keep-al
阅读全文
hash和history
摘要：hash和history路由的区别 在了解路由模式前，我们先看下 什么是单页面应用，vue-router 的实现原理是怎样的，这样更容易理解路由。 SPA与前端路由 SPA（单页面应用，全程为：Single-page Web applications）指的是只有一张Web页面的应用，是加载单个HTM
阅读全文
Vue的computed和 watched的区别
摘要：Vue的computed和 watched 计算属性computed : 什么是computed ：通过属性计算而得来的属性 1、computed内部的函数在调用时不加() 2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，da
阅读全文
组件传值的方式
摘要：组件传值 vue3组件通信方式为以下几种 props $emit $expose / ref 父组件获取子组件的属性或者调用子组件方法 $attrs attrs:包含父作用域除class和style除外的非props属性集合 v-model 可以支持多个数据双向绑定 provide / inject
阅读全文
vue-router
摘要：vue-router vue的路由解决方案 点击指定标签(a),地址栏(hash/history)发生变化,在指定的元素内(路由容器)显示指定的html字符串(组件) 安装 npm install vue-router -S 创建并挂载路由实例 // @/router/index.js // 0 导
阅读全文
构建一个vue项目的安装流程
摘要：从0开始建一个vue项目 先在文件夹下用终端安装vite npm create vite@latest my-vue-app -- --template vue 这个运行完先别急着用 先根据指引进行打开vite看能不能使用 cd my-project npm install npm run dev
阅读全文
vuex
摘要：vuex vuex 是一个专为 vue.js 应用程序开发的状态管理模式库 状态: 响应式数据 集中式存储管理应用的所有组件的状态 存储在 store 中 以相应的规则保证状态以一种可预测的方式发生变化 不能直接修改store里面的数据，要使用预先定义的修改方式来修改 安装 npm install
阅读全文
axios完整配置请求数据
摘要：<script type="module"> import axios from './lib/axios.min.js' //axios完整配置请求语法：axios(config) axios({ url:'/admin/detail',// url会拼接在baseURL后面变成完整请求地址 ba
阅读全文
子父组件
摘要：父组件给子组件传值 1、在定义子组件的地方添加一个 props （英文翻译：支撑，维持）选项 这个选项是一个数组，数组里面是父组件内的自定义属性名 子组件直接从数组里面拿变量名来用，可以理解为：只要子组件的props找父组件要来了东西，就和自己的东西一样，父亲怎么用儿子也怎么用 实际用的时候 第一步
阅读全文
vue的核心原理解析
摘要：https://blog.csdn.net/weixin_43745003/article/details/107279159
阅读全文
类与样式绑定
摘要：类与样式绑定 先在css里面写好style，然后往代码里绑定就行 如果想要控制css的显隐，要在data里面设置一个布朗类型的变量，用v-if或v-show控制，两个标签使用同一个data变量就可以将两个标签关联起来类的对象写法 先用v-bind绑定然后才可以使用对象写法 对象写法： :class=
阅读全文
v-model
摘要：v-model v-model修饰符 .lazy 在input框输入时不获取值，失去焦点时才获取 .number 将框内的输入的值尽可能的转成数字格式，如果转后时NaN那么将原样输出（能转就转，转不了不转） .trim 默认自动去除用户输入内容中两端的空格,中间有空格会记录，但html只计算一个空格
阅读全文
vue3学习笔记
摘要：1.官方介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，V
阅读全文
