抱歉，您的浏览器无法访问本站

重制版在没有写完的情况下弃坑了，后来在写另一个 Vue3 的练手项目时想起来这个曾经入手 Vue2 的入门项目。 所以打算使用 Vue3 + TypeScript 重构一下。 仓库地址 TypeScriptVuex在 Vuex 中正确的使用了 TypeScript 可以直接静态提示 state 的类型以及属性。而在 Vuex 中为 state 注解需要用到官方的泛型。 第一步，为 state...

早期学习 Vue3 API 的笔记。 setupsetup 方法在实例被创建（created）之前。 ref直接在 setup 中定义变量无法自动成为响应式，需要使用 ref 将其通过 proxy 代理为响应式变量。 const name = ref('xfy') 上述是xfy变为Proxy({value: 'xfy'})这样一个响应...

迫害移动端继上次的经典轮播图的实现方案，这次配合了TouchEvent来实现了移动端的触摸轮播图。 这次原生的实现方式和 Vue 基本相同，由于需要实现触摸滑动，仅仅靠absolute定位和 Vue 的过渡动画是不够的。所以使用了经典的图片队列，然后克隆两张图片来调换队列。 封装组件这次把整个轮播图图都尝试封装成一个单独的组件，图片的队列和动画延时都由父组件传递 props 过来。 <...

为什么要迫害 ToDoList摸鱼了也挺长时间，是时候该尝试写个小案例安慰下自己了。 组件划分对于 ToDoList 来说，没有多少组件化的东西。主要还是对一些基本知识的练习。所以我将其划分了一个父组件和两个子组件，他们分别是：用于输入的 Button 和用于展示数据 List。 两个子组件分别对存在于父组件内保存的列表进行增删改的操作。 整体功能目录结构： $ tree -l 4 --i...

传统方式项目地址 传统方式实现轮播也算一个不小的工程量了，基本布局就是将所有的图片横向布局，并在首位分别克隆最后和第一张图片。当切换到克隆的图片时，并在动画播放快结束时，将这个图片队列复位。 当整个队列切换完了之后，会切换到克隆的 #1 图片上，再动画完成之后，我们悄悄的将其切换为真正的第一张图片。 传统方式的实现为了给各种数量的图片做适应，所以整个队列的宽度就不固定死了，而使用 Jav...

真正的动态组件<keep-alive>经常配合componentIs来动态的切换组件，当组件再次被切换回来的时候，组件的状态依然被保存。 <keep-alive> <component :is="tabName" :postLists="postLists"></component> </kee...

实时渲染在学习 Vue2.x 的过程中，做过一个更改数据从而触发实时渲染 DOM 的小实例。期间很顺利，而后在同样方法测试 Vue3 的时候发现遇到了一些不同的行为。根据查阅了一些文档以及源码，做出了一些推测。 数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应...

在我打算学习vue的时候，正是其3.0版本发布不久的时候。很庆幸生活在这个时代，但困扰我的是是否应该由旧版本的2.x开始学习？一向选择困难的我最终打算两个版本一起学习，从2.x开始入门，顺便还能一睹其与3.0版本的变化。 起步Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关...