文章分类 - Vue
摘要：核心响应式 API：创建响应式数据的基础。 计算属性与侦听器：派生状态和副作用处理。 Ref 相关工具：用于操作和转换 ref。 浅层响应式 API：用于性能优化，只处理浅层响应性。 原始值操作 API：与响应式系统交互的低级工具。 响应式工具函数：用于检查和判断响应式状态。 1. 核心响应式 AP
阅读全文
摘要： 案例： carver-child.vue【子组件】 <template> <view> <button @click="onClick">按钮</button> <input type="text" @input="onInput"></input> </view> </template> <s
阅读全文
摘要： 案例： partOne.vue <template> <view> <carver-index> // v-slot:header 简写方式: #header <template #header> carver1头部 </template> <template #main> carver1身体
阅读全文
摘要：在 Vue 3 中，Props 声明有两种主要方式：Options API 中的 props 选项和 Composition API 中的 defineProps 宏。以下是它们的详细对比和使用说明： 一、核心区别 特性 props (Options API) defineProps (Compos
阅读全文
摘要：一、总体时间线（一张图记一辈子） 二、四大阶段 8 个场景逐条拆解 阶段 1：实例创建（Initialization） 钩子 触发时机 能做的事 不能做的事 源码位置（vue2） 常见坑 beforeCreate 实例刚 new 完，inject、props、methods、data、compute
阅读全文
摘要：父组件index.vue： //父级更改子级的值 <myInfo name="娃哈哈" age="25"></myInfo> <myInfo :name="myName" :age="myAge"></myInfo> <script setup> import ref from "vue"; con
阅读全文
摘要：代码如下： <p>我的资料：姓名：{{name}} 年龄： {{age}}</p> import {ref,watch,watchEffect} from 'vue'; const name = ref("carver"); const age = ref(100); const people =
阅读全文
摘要：代码如下： //一般写法【写法比较复杂】 <p>我的资料：姓名：{{name}} 年龄： {{age}}</p> //普通方法【普通方法】,会调用三次 <p>我的资料：{{myInfo()}}</p> #调用一次 <p>我的资料：{{myInfo()}}</p> #调用二次 <p>我的资料：{{my
阅读全文
摘要：下面把「底层实现」和「差异」拆开讲，先给代码级流程，再给一个对照表，面试或源码阅读都能直接用。 一、底层实现（编译→运行时的两条链路） Vue 2• 编译阶段：模板编译器遇到 v-model，根据元素类型生成不同的 AST 指令对象。• 运行时指令：src/platforms/web/compile
阅读全文
摘要：更改前： { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/' } } ] } 更改后： { test:
阅读全文
摘要：直接上代码： .el-message { min-width: 100px !important; padding: 8px 10px 8px 10px !important; background: #fff !important; border-color: #fff !important; b
阅读全文
摘要：使用el-popover组件时，弹出框的动画默认是fade-in-linear，设置其他的方式如下： transition的值设置：el-zoom-in-left、el-zoom-in-top、el-zoom-in-bottom
阅读全文
摘要：在Element UI中，要使el-popover在点击空白处关闭，可以通过监听全局的点击事件，并在点击空白处时关闭el-popover。以下是实现这一功能的示例代码： <template> <el-popover ref="popover" placement="top" title="标题" w
阅读全文
摘要：一个有一项数据取一个范围，并做验证，但是UI的验证提醒文字是合并在一起的，并不是每个输入框有单独的验证提醒 <template> <div class="app-container"> <el-form ref="ruleForm" :model="ruleForm" :rules="rules"
阅读全文
摘要：如果想改动单元格的行的高度，不能缩小，存在原来的高度 解决方式： 表格中设置 :cell-style="{padding:'0px'}" :row-style="{height:'20px'}" 这样就可以设置单元格的高度为20px或者更小 感谢源博主的方案：https://blog.csdn.ne
阅读全文
摘要：前端代码： <el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" style="width: 400px" type="datetimera
阅读全文
摘要：Vue在线引入地址 vue2 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> vue3 <script src="https://unpkg.com/vue@3/dist/vue.global.j
阅读全文
摘要：在安装时可以手动指定从哪个镜像服务器获取资源，我们可以使用阿里巴巴在国内的镜像服务器，命令如下： npm install -gd express --registry=http://registry.npm.taobao.org npm install --registry=https://regi
阅读全文
摘要：error:0308010C:digital envelope routines::unsupported出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响. 在node.js V
阅读全文
摘要：1. elementui自带的方式： <template> <div id="app"> <el-table :data="tableData" border style="width: 100%" ref="table"> <el-table-column fixed type="index" a
阅读全文
浙公网安备 33010602011771号