随笔分类 - Vue
Vue3+ setup语法中报错 'defineProps' is not defined（eslint[no-undef]）
摘要：## 1. 问题 ### 1.1 场景 使用**Vue3 + setup**语法，使用`defineProps`时出现Eslint错误：  函数创建一个响应式对象或数组： import { reactive } from 'vue' const state = reactive({ count:
Vue3-CompositionAPI-响应式基础
摘要：一、响应式基础 前提：你会使用 setup 函数或 <script setup>语法 1.reactive 我们可以使用 reactive() 函数创建一个响应式对象或数组： import { reactive } from 'vue' const state = reactive({ count:
组件上的 v-model
摘要：💥💥💥 环境为：Vue3 1. 原生元素上的 v-model <p>{{ msg }}</p> <input v-model="msg" /> <!-- 上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)： --> <input :value="msg" @input="m
Vue CLI 和 Vite
摘要：一、Vue CLI脚手架 1. 安装和使用 1.1 系统全局安装 npm install @vue/cli -g 1.2 升级Vue CLI 如果是比较旧的版本，可以通过下面的命令来升级 npm update @vue/cli -g 1.3 创建项目 通过 vue 的命令来创建项目 vue crea
在使用React或Vue中，解决多级路由路径刷新页面，样式丢失的问题
摘要：前提： 路由使用 BrowserRouter 模式 在 index.html 中引入了样式 1. 修改路径1 public/index.html 中引入样式时不写./写 /（常用) 2. 修改路径2 在 React 中 public/index.html 中引入样式时不写 / 写 %PUBLIC_U
Vue中自定义Toast插件
摘要：Toast组件用于展示提示信息，属于项目全局都可以使用。 1. Toast.vue <template> <div class="toast" v-show="isShow"> {{ message }} </div> </template> <script> export default { na
Vue 的响应式原理
摘要：1. 前言 当data中的数据发生改变，Vue内部是如何监听message数据的改变？ 使用Object.defineProperty > 监听对象属性的改变 当数据发生改变，Vue是如何知道要通知哪些人？哪些页面进行更新？ 使用 发布订阅者模式 实现 2. 过程 2.1 首先new Vue() n
Vue的异步渲染和 nextTick
摘要：1. 什么是异步渲染？ **环境补充：**当数据在同步变化的时候，页面订阅的响应操作为什么不会与数据变化完全对应，而是在所有的数据变化操作做完之后，页面才会得到响应，完成页面渲染。 从一个例子体验一下异步渲染机制： import Vue from 'Vue' new Vue({ el: '#app'
解决Vue中，使用@keyup.enter 会触发两次事件的问题
摘要：问题: 在vue中，使用表单form，如下： <div id="app2"> <form action="" @submit.prevent> enter后，控制台输出(esc清空)：<br> <input type="text" v-model="value" @keyup.enter="ente
