随笔分类 - vue相关 / vue3
vue3的开发过程整理
摘要：// debounce <template> <!-- 生效 --> <el-input v-model="value" @keyup="handelKeyUp"></el-input> <!-- 不生效 --> <el-input v-model="value" @keyup="debounce(
阅读全文
摘要：事件总线的概念： 事件总线（Event Bus）可以理解为一个全局的发布/订阅模式，可以通过它来实现不同组件之间的消息传递。在Vue实例或Vue组件中充当一个中央枢纽，通过它可以让一个组件发出事件，而其他组件监听并响应这些事件 事件总线的创建 Vue3版本中，我们不再使用new Vue()来创建事件
阅读全文
摘要：方式一：通过vue中的响应式对象可使用toRaw()方法获取原始对象 import { toRaw } from 'vue' const trueUserList=toRaw(dataObj) 方式二：通过json序列化 JSON.parse(JSON.stringify(dataObj))
阅读全文
摘要：### 一、v-model 的参数 默认情况下，`v-model` 在组件上都是使用 `modelValue` 作为 prop，并以 `update:modelValue` 作为对应的事件。我们可以通过给 `v-model` 指定一个参数来更改这些名字： ``` ``` 在这个例子中，子组件应声明一
阅读全文
摘要：Prop 校验 ``` export default { props: { // 基础类型检查 //（给出 `null` 和 `undefined` 值则会跳过任何类型检查） propA: Number, // 多种可能的类型 propB: [String, Number], // 必传，且为 St
阅读全文
摘要：### 使用场景： 有些场景会需要在两个组件间来回切换，比如 Tab 界面： 我们可以通过 Vue 的` ` 元素和特殊的 `is` attribute 实现的：如 ``` ``` 在上面的例子中，被传给` :is `的值可以是以下几种： * 被注册的组件名 * 导入的组件对象 你也可以使用 `is
阅读全文
摘要：我从3A平台购买了云服务器。如果你在开发一个开源的组件或库，你有可能想保持一些内部方法的私有性。在Vue 3.2之前，这并不容易实现，因为所有在选项API中声明的方法或数据等都是公开的，所以模板可以访问它。 组合API也是如此。我们从setup方法中返回的所有东西都可以被父类直接访问。 ### 组合
阅读全文
摘要：## 基本使用方式 ``` export default { watch: { someObject: { handler(newValue, oldValue) { // 注意：在嵌套的变更中， // 只要没有替换对象本身， // 那么这里的 `newValue` 和 `oldValue` 相同
阅读全文
摘要：# 全局修饰符 ## 使用场景： 在一些需要对某些事件进行阻止默认事件或者冒泡等等类似的操作的时候，就需要进行一定的处理，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀。包含以下这些： ``` .stop // 阻止事件冒泡 .prevent // 阻止浏览器的默认事件 .s
阅读全文
摘要：## 使用场景： 在封装或者面对需要绑定一些不确定值的时候，需要使用动态参数来绑定一个不确定的值，这个值会随时改变，[官网解释](https://cn.vuejs.org/guide/essentials/template-syntax.html#directives) ## 动态参数 同样在指令参
阅读全文
摘要：## 问题描述： 在项目开发有些时候，通过npm下载node_modules依赖后会出现个别依赖有问题，在开发和打包过程中需要修改node_modules中的依赖，但是这样是治标不治本的，等到下次重新获取依赖的时候本次修改的依赖会重新获取，导致修改的依赖需要重修修改。为解决这一问题，我们需要给nod
阅读全文
摘要：1.ref() 函数 ref() 函数用来根据给定的值创建一个响应式的数据对象，传入的为基本数据类型，例如字符串、数字、boolean 等,返回值是一个对象，这个对象上只包含一个 value 属性 ref定义的变量，改变值要.value,而且在template中不用写.value <div>{{ms
阅读全文
摘要：第一种解决方法：修改组件名称为大驼峰，不要用系统中命令常见的名称。 第二种解决方法： 在根目录下，打开【.eslintrc.js】文件，如果没有，就新建，内容 module.exports = { root: true, env: { node: true }, 'extends': [ 'plug
阅读全文
摘要：## 1、一般用法 **父组件：** ``` // 写法1 provide(){ // 使用函数的形式，可以访问到 `this` // 如果我们需要提供依赖当前组件实例的状态 (比如那些由 data() 定义的数据属性)，那么可以以函数形式使用 provide // 然而，请注意这不会使注入保持响应
阅读全文
摘要：vite项目的创建加快了打包和执行项目的速度，但是在创建项目的时候不像vue-cil那样方便的直接应用vue全家桶，创建vite项目后还需要单独引入相关的插件 1、vue3 + vite 2 2、TypeScript、TSX 3、ESLint Standard 4、Sass 5、Vue Router
阅读全文
摘要：1、vue项目中环境配置（.env.development文件和 .env.production文件）为： # 开发环境配置(本地) ENV = 'development' NODE_ENV = development # 开发环境 代理proxy VUE_APP_BASE_API = '/dev-
阅读全文
摘要：# 1.介绍 > 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的``标签。通俗的说是：slot 是在父组建控制了子组件显示或隐藏相关内容。 **插槽又分为三种，1.普通插槽 2.具命插槽 3.作用域插
阅读全文
