随笔分类 - 07-Vue全家桶
摘要：一. toRefs/toRef 1. 背景 我们都知道reactive处理的对象是响应式的，但是使用ES6的解构语法对reactive对象进行处理，那么之后无论是修改解构后的变量name、age，还是修改reactive返回的原始对象info1，数据都不再是响应式的。 2. 使用 (1). toRe
阅读全文
摘要：一. Vue2.x的mixin和extends 1. mixin简介 (1). 目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。 (2). 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成： A. M
阅读全文
摘要：一. 动态组件和keep-alive 1. 背景 比如我们要做一个动态组件的切换，传统的做法是通过v-if进行判断切换，核心代码如下： 2. 动态组件 (1). 基本使用 动态组件是使用 component 组件，通过一个特殊的attribute is 来实现： 代码分享： <template> <
阅读全文
摘要：一. 简介及基本用法 1. 简介 (1). 什么时候使用插槽？ 插槽的使用过程其实是抽取共性、预留不同； 我们会将共同的元素、内容依然在组件内进行封装； 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素； (2). 如何定义插槽？ 在封装组件中，使用特殊的元素<slot>就可以
阅读全文
摘要：一. Vue Cli复习 (在Vue2.x章节中，详细整理过，基本没变化，详见：https://www.cnblogs.com/yaopengfei/p/14506321.html) 1. 相关指令 Vue的脚手架就是Vue CLI：CLI是Command-Line Interface, 翻译为命令
阅读全文
摘要：一. webpack本地服务器搭建 1. 为什么要搭建本地服务器？ 我们之前通过【npm run build】，编译相关的代码； 然后需要在浏览器中运行，每次修改修改代码，都需要重新编译运行，很麻烦。我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示 。 2. watch mode模
阅读全文
摘要：一. Babel的使用 1. 为什么要用babel？ 比如我们想使用ES6+的语法，想要使用TypeScript，但是很多旧浏览器又不支持这些新语法，这个时候就需要使用babel了。 Babel是一个工具链，主要用于旧浏览器或者环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的Ja
阅读全文
摘要：一. 资源模块(asset model) 1. 说明 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。 (1). 在 webpack 5 之前，通常使用： （需要npm来安装） raw-loader 将文件导入为字符串 url-lo
阅读全文
摘要：一. 简介 1. Webpack背景 (1). 事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了： A. 比如开发过程中我们需要通过模块化的方式来开发； B. 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑， 通过sass、l
阅读全文
摘要：一. 组件入门 1. 命名方式 (1). 使用kebab-case（短横线分割符）【推荐！】 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>； (2). 使用PascalCase
阅读全文
摘要：一. 引用类型赋值 1. 原理 (1). js中对象和数组都是引用类型。 (2). 内存分为两个区域，栈区域 和 堆区域。 (3). 引用类型，在栈区域中存放的堆的二进制地址，这个地址指向 堆区域中的实际值。 (4). 将一个对象A赋值给另一个对象B，实际上是将A的地址赋值给了B，A和B共同指向同一
阅读全文
摘要：一. 分析diff算法中的key 二. Computed源码剖析 1. 剖析 计算属性可以有两种写法，一种直接传入一个方法，另外一种，写set和get对象进行处理？ 问题：Vue内部是如何对我们传入的是一个方法，还是说是一个包含set和get的对象进行处理的呢？ 解析：Vue源码内部做了一个简单的逻
阅读全文
摘要：一. 基本指令 1. v-for 数据准备 data() { return { userInfo: { name: 'ypf', age: 18, school: '北大' }, movies: ["星际穿越", "盗梦空间", "大话西游", "教父", ], userList: [ { name
阅读全文
摘要：一. 常用指令1 1. Mustache语法(双大括号) 如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。并且我们知道，data返回的对象是有添加到Vue的响应式系统中； 当data中的数据发生改变时，对应的内容也会发生更新。
阅读全文
摘要：一. 代码片段制作 （PS：已经迁移到单独的分类下，详见：https://www.cnblogs.com/yaopengfei/p/17162646.html） 1. 复制自己所需要的代码 比如要把下面的代码制作成代码片段 Vue.createApp({ template: '#myApp', da
阅读全文
摘要：一. 简介 1. 说明 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用
阅读全文
摘要：一. 需求/技术分析 1. 需求分析 (1).实现默认数据的加载，可以分类显示全部、未完成、已完成的数据。 (2).可以添加新数据、删除列表数据。 (3).点击可以选中 和 取消选中，实时显示多少条未选中。 (4).清除已完成 2. 技术分析 使用Vuex对数据统一管理，state维护数据，muta
阅读全文
摘要：一. 项目优化 1. 生成发布包 根目录下运行指令【npm run build】，会生出一个dist文件夹，该文件夹就是项目生成的发布包，可以直接放到IIS中部署即可。 2. 生成/分析打包报告 A. 命令行形式生成打包报告 【 vue-cli-service build --report 】 B.
阅读全文
摘要：一. 扩展组件 1. lodash深拷贝 主要用于对象的深拷贝。 (1). 通过指令【npm i lodash -S 】安装 (2). 在需要的页面中进行导入 import _ from 'lodash' (3). 调用 cloneDeep方法进行深拷贝 const form = _.cloneDe
阅读全文
摘要：一. 基础组件 1. Cascader级联选择器 这里以省市区控件为例，效果如下图： 实现思路： 通过option绑定数据源，通过v-Model获取选中后的值即可。 数据代码和导入 实现代码 <el-cascader :options="cityData" v-model="addressForm.
阅读全文
浙公网安备 33010602011771号