随笔分类 - vue
摘要：1.让 vite.config.js 具备语法提示： 方法 1：使用 defineConfig 方法： vite.config.js 需要导出一个配置对象： export default { ... } 但是这样是不会具备配置提示能力的，defineConfig 是一个封装了导出类型的配置构建函数，
阅读全文
摘要：## 1. 这究竟是个什么问题 ？ 在Vue 中， 视图的渲染是由数据驱动的， Vue 不鼓励我们直接去操作 Dom，它让我们仅关注业务层面的逻辑。 数据驱动视图，也就意味着： graph LR 数据发生变动 > Dom发生改变 但是， Dom 的更新渲染是一个异步的过程，这也就意味着，当你在修改
阅读全文
摘要：下面将会实现这样的效果： 组件动态创建脚本： NotificationBanner.js import Vue from "vue"; import Notice from "@/components/Noticer/Notice.vue"; function create(Component, p
阅读全文
摘要： 引言 本篇文章总结了日常开发中，时长会处理的两类问题， 一个是，条件渲染， 这里的所说的条件渲染不仅仅包含了v-if ， 而是泛指，一个组件的渲染，需要具备一定的触发时机， 那么处理这种场景时， 通常有 v-if 、 手动挂载 、 以及 动态组件。 此外，第二种场景，是 某个组件中的某些方法的
阅读全文
摘要：1. 最简单的 Store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.store({ state:{ count:0 }, mutations:{ increment ( st
阅读全文
摘要：手动实现一个vue cli 1. 思考准备 最一开始：创建一个web项目，所以需要一个html 文件，又是一个Vue 项目，所以需要一个div，并指明一个id. 我们使用webpack 打包后的文件，需要被引入，bundle.js, 应该把它放在dist （分发）文件夹。 > 指明id 的 div
阅读全文
摘要：1. 强制更新 Vue 允许你强制更新： vm.$forceUpdate() 2. 阻止更新 - 通过v-once 创建低开销的静态组件 有时候你的组件中包含了大量不需要实时更新的静态内容。 这种情况下，你可以在根元素上加上一个v-once 属性，以确保这些内容仅被计算一次之后，被缓存起来。 具体就
阅读全文
摘要：1. 内联模板 即将要说的是一个很有意思的Vue边界应用。 Vue开发者，通常都有着很敏感的组件规则。 我们写的组件全部都是以一个个组件组装到一起的。 当涉及组件之间通信，调用时，会出现各种招数应对各种场景。 如果你要写一个嵌套组件。 你必然会先创建两个单独的组件，然后在其中一个引入注册另一个（当然
阅读全文
摘要：1. 组件的递归 如果期望你有以下实现： 这是一个嵌套了很多层的组件，你会有什么样的思路？ 1.1 递归组件 Vue 允许我们递归的调用一个组件，即在一个组件内部不断的嵌套调用自身。 为了实现组件的递归，Vue 要求我们必须指定组件的 name 属性。 此外，必须给渲染加上条件判断，在适当的时刻停止
阅读全文
摘要：1. 快速认识 一句话，来说，在同一个Vue实例中，$on、$once 用于设定监听器， 不同的是，$once 仅会被触发一次后立即失效。 而$off 则是一个主动的监听器销毁器。 $emit 则用于触发通过$on,$once 设定的监听器，即事件触发器/发射器。 以下是一个简单的例子： <temp
阅读全文
摘要：1. vm.$root 1.1 描述 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。 在Vue 中， 什么是一个组件树的根实例？ 实际上，通过Vue Devtools 能够很清楚的看到： 具体的，在代码中，Vue 项目的入口文件main.js 中，一般的会有这样的代码段：
阅读全文
摘要：1. 插槽内容 假设我们有这样一个组件： <template> <section class="eassy-container"> <header class="eassy-header"> lorem </header> <main class="eassy-main"> lorem </main
阅读全文
摘要：1.准备：先封装一个最基本的input组件 按照先前讲到的自定义v-model，我们可以轻松完成一个具备双向绑定的input元素： <template> <div>所有作用于当前 <BaseInput v-model="value"/> <br/> {{value}} </div> </templa
阅读全文
摘要：1. v-model 语法糖 当你希望一个自定义组件的值能够实现双向绑定。 那么就需要： 将值传入组件； 将变化的值逆传回父组件。 实际上，就可以利用 props 实现的父传子 + 通过自定义事件this.$emit实现的子传父。实现双向的数据流传递。 下面是一个示例： 有这样一个父组件： <tem
阅读全文
摘要：attribute 和 property 的区别 property 和 attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。 property是DOM中的属性，是JavaScript里的对象；
阅读全文
浙公网安备 33010602011771号