代码改变世界

随笔分类 - Vue3

初探 vite2 + vue3

2021-04-10 09:38 by 金色海洋(jyk), 19 阅读, 收藏, 编辑
摘要:vite2已经出来一段时间了,这几天没忍住尝试了一下,首先体验到的就是 —— 快,真的很快,再也不用痛苦的等待了。 然后就是踩坑,因为vite2还算是比较新,所以介绍文章不多,虽然已经出来官网文档了,但是现在的官网似乎侧重原理介绍,对于最初级的使用方式,似乎没有,或者是我还没有找到。 这里汇总一些基 阅读全文

全面了解Vue3的 ref 和相关函数和计算属性

2021-04-10 09:21 by 金色海洋(jyk), 169 阅读, 收藏, 编辑
摘要:基础类型的响应性 —— ref 在vue3里面,我们可以通过 reactive 来实现引用类型的响应性,那么基础类型的响应性如何来实现呢? 可能你会想到这样来实现: const count = reactive({value: 0}) count.value += 1 这么做确实可以实现,而且也很像 阅读全文

用 customRef 做一个防抖函数,支持 element 等UI库。

2021-04-03 14:20 by 金色海洋(jyk), 156 阅读, 收藏, 编辑
摘要:这几天学习Vue的官网,看到 customRef 提供了一个例子,研究半天发现这是一个防抖函数,觉得挺好,于是把这个例子扩展了一下,可以用于表单子控件和查询子控件。 需求 v-model 基于 element-plus 封装表单控件,同时也要封装一下表单子控件,还有查询控件。 由于 el-input 阅读全文

Vue组件(35)动态组件 component 的 is 到底可以是啥?

2021-04-01 18:56 by 金色海洋(jyk), 431 阅读, 收藏, 编辑
摘要:component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,那么这里的 is 到底是什么呢? 官网介绍的太分散了,这里尽量全面的列举出来。如果有遗漏欢迎补充。 原生HTML <component is="input" p 阅读全文

全面了解Vue3的 reactive 和相关函数

2021-03-31 16:17 by 金色海洋(jyk), 216 阅读, 收藏, 编辑
摘要:Vue3的 reactive 怎么用,原理是什么,官网上和reactive相关的那些函数又都是做什么用处的?这里会一一解答。 ES6的Proxy Proxy 是 ES6 提供的一个可以拦截对象基础操作的代理。因为 reactive 采用 Proxy 代理的方式,实现引用类型的响应性,所以我们先看看 阅读全文

Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

2021-02-22 14:34 by 金色海洋(jyk), 992 阅读, 收藏, 编辑
摘要:一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列、双列、多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创建 model 这个表单控件是基于 element-plus 的 el-form 做的二次封装,所以 阅读全文

Vue3(四)从jQuery 转到 Vue工程化 的捷径

2021-02-15 08:32 by 金色海洋(jyk), 526 阅读, 收藏, 编辑
摘要:不会 webpack 还想学 vue 工程化开发 的福音 熟悉jQuery开发的,学习vue的简单使用是没用啥问题的,但是学习vue的工程化开发方式,往往会遇到各种问题,比如: webpack、node、npm、cnpm、yarn、脚手架、开发环境、测试环境、生产环境、各种安装、各种创建。 好在 v 阅读全文

ES6(四)用Promise封装一下IndexedDB

2021-02-04 18:44 by 金色海洋(jyk), 291 阅读, 收藏, 编辑
摘要:indexedDB IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据,它可以被网页脚本创建和操作。 IndexedDB 允许储存大量数据,提供查找接口,还能建立索引,这些都是 LocalStorage 所不具备的。 就数据库类型而言,IndexedDB 不属于关系型数据库(不 阅读全文

Vue3(三)CND + ES6的import + 工程化的目录结构 = 啥?

2021-02-01 17:01 by 金色海洋(jyk), 394 阅读, 收藏, 编辑
摘要:突发奇想 这几天整理了一下vue的几种使用方式,对比之后发现有很多相似之处,那么是不是可以混合使用呢?比如这样: vue的全家桶和UI库,采用传统的方式加载(CND、script)。 自己写的js代码,采用ES6的 import 方式加载。 目录结构采用vuecli建立的项目的目录结构。 入口页面用 阅读全文

Vue3(二)工程化开发方式做项目

2021-02-01 17:00 by 金色海洋(jyk), 152 阅读, 收藏, 编辑
摘要:工程化的开发方式 这是开发中、大型项目的必备技能,网上资料也很多,这里只是一个简单的综合性的介绍。包括vue的全家桶、建立项目的几种方式、UI库的简单使用等。 可以和上一篇的cnd方式做项目做一下对比。 node.js,npm、cnpm、yarn node.js 执行 npm run serve , 阅读全文

Vue3(一) CND方式的安装以及简单使用

2021-01-29 16:06 by 金色海洋(jyk), 423 阅读, 收藏, 编辑
摘要:简介 感觉vue3的新特性很舒服,这样才是写软件的感觉嘛。打算用Vue实现自己的一些想法。 Vue3还有几个必备库,比如Vue-Router(负责路由导航)、Vuex(状态管理、组件间通信),还有第三方UI库,比如element Plus、Antdv、Vant 等。 这里会介绍他们的CND的安装方法 阅读全文
2