凯小默的博客_Vue 技术栈(2)

Syntax Error: TypeError: this.getOptions is not a function

安装完成运行之后，就没有报错了。会报错，所以选择了这个版本。我使用的 node 版本是。vue 项目里使用了。

vue.js

sass-loader

node-sass

github

css

原创 2022-09-25 00:00:25 736 阅读

vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题

当我们使用el-select选择器下拉数据很大的时候，会出现页面卡顿，甚至卡死的情况，用户体验很不好。我目前采取的

vue.js

虚拟列表

数据

输入框

github

原创 2022-09-25 00:00:24 3721 阅读

【Vue 开发实战】实战篇 # 28：如何自定义Webpack和Babel配置

这个问题有下面两种方式：第一种是降低less版本，另一个是配置css的 less-loader，我们使用第二种。我们可以看到小了很多，但是这样还是很不方

vue.js

自定义样式

css

按需加载

原创 2022-09-25 00:00:21 108 阅读

【Vue 开发实战】实战篇 # 26：Ant Design Pro介绍

ANT DESIGN PRO：开箱即用的中台前端/设计解决方案。【Vue 开发实战】学习笔记。

vue.js

ant design pro

typescript

解决方案

最佳实践

原创 2022-09-25 00:00:20 205 阅读

【Vue 开发实战】实战篇 # 29：如何设计一个高扩展性的路由

只需调用 start() 和 done() 来控制进度条。【Vue 开发实战】学习笔记。设计嵌套路由跟文件夹匹配。安装 nprogress。

vue.js

嵌套

进度条

css

原创 2022-09-25 00:00:17 76 阅读

【Vue 开发实战】实战篇 # 27：使用Vue CLI 3快速创建项目

安装 ant-design-vue moment 库。【Vue 开发实战】学习笔记。

vue.js

创建项目

开发实战

依赖库

原创 2022-09-25 00:00:15 78 阅读

【Vue 开发实战】基础篇 # 11：指令的本质是什么

show " > 销毁 < button v-if = " show " v-append-text = " `hello ${number}` " @click = " number++ " > 按钮 < script > export default {bind() {return {} };

vue.js

html

语法糖

开发实战

原创 2022-09-17 02:56:33 126 阅读

【Vue 开发实战】基础篇 # 12：常用高级特性provide/inject

EF节点不会变化，只有A节点的按钮点击了I节点才会变化颜色，这个跟冒泡很类似。就像在C节点阻止了冒泡事件一样。

vue.js

ide

结点

函数式

原创 2022-09-17 02:56:06 111 阅读

【Vue 开发实战】基础篇 # 13：如何优雅地获取跨层级组件实例（拒绝递归）

这个指令，用于通知上层节点更新了。我们可以找一下依赖 vue-ref 这个包。比如E节点更新就通知A组件，A组件进行ref的缓

vue.js

结点

点更新

ide

原创 2022-09-17 02:55:44 125 阅读

【Vue 开发实战】生态篇 # 16：如何在Vue中使用Vuex

进入 vuex-demo 文件夹，安装 vuex。【Vue 开发实战】学习笔记。

vue.js

sed

开发实战

新建工程

原创 2022-09-17 02:55:23 110 阅读

【Vue 开发实战】基础篇 # 14：template和JSX的对比以及它们的本质

更抽象一点来看 ,我们可以把组件区分为两类：一类是偏视图表现的(presentational) , 一类则是偏逻辑的(logical)。我们推荐在ue 开发实战】学习笔记。

vue.js

h5

数据绑定

语法糖

原创 2022-09-17 02:55:19 295 阅读

【Vue 开发实战】生态篇 # 15：为什么需要Vuex

与数据存储不同，Vuex 解决的主要问题是不同组件间的通信，以达到对当前页面数据状态的管理。既然是状态，它不会是持久

vue.js

数据

页面刷新

ide

原创 2022-09-17 02:55:00 124 阅读

【Vue 开发实战】基础篇 # 8：如何触发组件的更新

因为 name 不是响应式，info 对象才是响应式，b 没有被视图使用。"this.name 发生了变化，但是并

vue.js

数据

响应式

开发实战

原创 2022-09-11 00:11:03 90 阅读

vue template 里使用可选链操作符( ?. )报错：Errors compiling template:invalid expression: Unexpected token ‘.‘ i

template 不支持可选链操作符，在可以升级 vue 版本的情况下，我们可以升级到。以上的几，也是可行的。我使用的node 版本是。这个问题主要是 vue。

vue.js

node.js

可选链

操作符

版本升级

原创 2022-09-11 00:03:08 4044 阅读

【Vue 开发实战】基础篇 # 10：生命周期的应用场景和函数式组件

说明【Vue 开发实战】学习笔记。生命周期创建阶段初始化事件和生命周期数据观测、属性、侦听器配置等模板编译到 render异步请求、操作DOM、定时器等更新阶段万万不可更改依赖数据，会造成死循环销毁阶段移除已经添加的事件监听器,计时器等<template> <div> {{ log("render") }} {{ now }} <button @c

vue.js

生命周期

函数式

数据

原创 2022-09-10 07:15:23 242 阅读

【Vue 开发实战】基础篇 # 9：合理应用计算属性和侦听器

"执行reversedMessage1""执行reversedMessage2"【Vue 开发实战】学习笔记。// 计算属性的 getter。

vue.js

sed

开发实战

数据

原创 2022-09-10 07:14:53 99 阅读

【Vue 开发实战】基础篇 # 6：双向绑定和单向数据流不冲突

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

vue.js

双向绑定

ico

复选框

原创 2022-09-10 07:13:47 260 阅读

【Vue 开发实战】基础篇 # 4：Vue组件的核心概念：插槽

删除删除删除没有使用，默认文字展示

vue.js

ico

html

插槽

原创 2022-09-10 07:13:27 157 阅读

【Vue 开发实战】基础篇 # 2：组件基础及组件注册

说明【Vue 开发实战】学习笔记。组件通常把可拆分的html，以及拆分后的逻辑，样式组合在一起称之为组件。在 Vue 中，通过 Vue.component 定义（注册）一个组件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=

vue.js

html

开发实战

函数返回

原创 2022-09-10 07:13:13 171 阅读

【Vue 开发实战】基础篇 # 3：Vue组件的核心概念：事件

button v-show="del" @click="handleClick">删除// 定义一个名为 todo-item

vue.js

html

事件绑定

原创 2022-09-10 07:13:07 84 阅读

【Vue 开发实战】基础篇 # 7：理解虚拟DOM及key属性的作用

数据变化，怎么尽可能的减少 dom 更新，就提出了虚拟 do

vue.js

jquery

树形结构

复用

原创 2022-09-10 06:19:32 49 阅读

Name expected [js/chunk-4b5816b5.0950b124.js:250,6] from UglifyJs

问题vue 项目可以正常启动运行，但是使用 vuecli3 打包时却 js 报错，项目里使用了 html2canvas 跟 jspdf，然后打包里面使用了 uglifyjs-webpack-plugin。原因跟解决方案因为 uglifyjs-webpack-plugin 不支持新的 es6 语法，解决方法就是使用 terser-webpack-plugin@4.2.3

vuecli3

html

解决方案

解决方法

原创 2022-09-03 07:13:30 366 阅读

【卡夫卡的岛上书店】：一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客

链接个人博客链接：【卡夫卡的岛上书店】目前版本首页总目录分类标签归档页面

vuepress

vuepress主题

个人博客

留言板

功能开发

原创 2022-08-19 01:24:24 222 阅读

vue 里怎么通过魔数（magic number）去限制上传文件类型？

魔数这个词在不同领域代表不同的含义。在计算机领域，魔数有两个含义，一指用来判断文件类型的魔数

vue.js

javascript

magic number

文件类型

数据

原创 2022-08-19 01:22:50 797 阅读

从 vue.js 源码角度再看数据绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0DZdKTf-1601365299586)(https://cn.vuejs.org/images/data.png)]这张图比较清晰地展示了整个流程，首先通过一次渲染操作

vue

数组

数据

数组方法

转载 2022-08-19 01:14:01 59 阅读

聊聊keep-alive组件的使用及其实现原理

keep-alivekeep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude两个属性，允许组件有条件地进行缓存。具体内容可以参考官网。使用用法<keep-alive> <component></compo

vue

缓存

edn

字符串

转载 2022-08-18 09:11:30 70 阅读

从template到DOM(Vue.js源码角度看内部运行机制)

从new一个Vue对象开始let vm = new Vue({ el: '#app', /*some options*/});很多同学好奇，在new一个Vue对象的时候，内部究竟发生了什么？究竟Vue.js是如何将data中的数据渲染到真实的宿主环境中的？又是如何通过“响应式”修改数据的？template是如何被编译成真实环境中可用的HTML的？Vue指令又是如何执行的？带着这些疑问，

vue

数组

初始化

数据

转载 2022-08-18 09:11:13 50 阅读

Vue.js异步更新DOM策略及nextTick

操作DOM在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样：<template> <div> <div ref="test">{{test}}</div> <button @click="handleClick">tet</button> </div></t

vue

回调函数

任务队列

推送

转载 2022-08-18 09:10:43 167 阅读

VirtualDOM与diff (vue.js 实现)

VNode在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。可以想象，最简单粗暴的方法

vue

子节点

github

数据

转载 2022-08-18 09:09:36 66 阅读

VNode 节点 (vue.js 实现)

抽象DOM树在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。可以想象，最简单粗暴的方

vue

html

数据

作用域

转载 2022-08-18 09:09:16 281 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

凯小默的博客