![](https://img-blog.csdnimg.cn/20210726094924464.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 75
主要涵盖Vue各方面的知识点和盲区,逐步探索深入了解。
慕筱佳丶
从不奢求生活能给予我最好的,只是执着于寻求最适合我的。
展开
-
❤️万字详解Vue知识体系❤️(建议收藏)
话说现如今都2021年了,Vue3都已经发布好长一段时间了,如今再来写这篇网络上随处可见的文章意义在哪里呢?其实在写之前我也一直在思考这个问题,最后我得出的原因主要有以下几点:用vue做过一些项目,也实现了一些功能,但是总感觉还是缺乏知识体系日常开发多数围绕业务需求展开,也没有仔细深入的细化一些知识点,导致有的东西可能时间长了会模糊正所谓温故而知新,虽然基础的东西可能看似简单,但是通过自己的想法输出出来,并且时长回顾,我认为还是会有意想不到的收获的。思维导图在开始正文之前,需要说明一下,文章中原创 2021-07-25 23:59:46 · 981 阅读 · 9 评论 -
浅谈Vue单页应用首屏加载速度优化方案
随着各大前端框架的诞生以及演变,由此衍生了一个的名词:SPA。那么什么是SPA?提到这个单词,很多人可能会第一时间想到养生会所,哈哈,当然了,毕竟如今的社会,当你走在琳琅满目的大街上,也会看到各种行行色色的养生会所的匾牌上会写这个名词,也属于正常现象了,那么对于在前端领域中,SPA到底指的什么呢?接下来让我们进入主题吧,奥利给!原创 2022-05-01 13:01:13 · 780 阅读 · 0 评论 -
vue之better-scroll处理滚动列表
心语:再长的路,一步步也能走完,再短的路,不迈开双脚也无法到达。在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,可以是竖向滚动的列表,也可以是横向的,用better-scroll可以帮助我们轻松的实现这个需求。那么better-scroll到底是什么呢?BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。为了满足这些场景,它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置原创 2021-09-21 22:47:47 · 517 阅读 · 0 评论 -
vue实现简易购物车案例
对于购物车这个需求,很多无论pc端还是移动端的电商项目中都会碰到,所以这篇文章我做了一个书籍购物车的小案例。主要实现业务需求:书籍的数量增加书籍数量的减少书籍总价格的计算接下来,让我们进入真正的代码实现过程吧,首先先实现静态页面的布局,这里为了简单简便,我使用了表格来布局页面。 <div id="app"> <div v-if="books.length" class="container"> <table> <thead&g原创 2021-08-22 18:06:19 · 991 阅读 · 2 评论 -
vue实现手风琴效果
在使用vue的过程中,我们难免会碰见各种各样的需求,本篇文章我将实现一个简单的手风琴效果首先先说一下手风琴实现的流程:1.设置一个布尔变量来控制二级列表的显示与隐藏2.同步的通过这个变量来控制展开或者隐藏的图标切换3.为一级选项创建点击事件,点击一级选项的同时要展开二级列表接下来,我们就使用代码具体实现HTML<div class="tree" id="my"> <ul> <li class="item" v-for="list in lists"&原创 2021-08-22 13:34:45 · 6140 阅读 · 0 评论 -
vue中v-for的最佳使用技巧
在vuejs中,v-for 的使用是比较常见的,它允许您在模板代码中编写for循环。那么在使用v-for的时候,可曾思考过使用这个指令的一些技巧吗?在介绍它的使用技巧之前,我先介绍下它的基本用法吧,在vue中v-for可以遍历数组、对象、字符串,但是用的最多的还是遍历数组,基本方法如下:<div id="app"> <ul> <li v-for='item in list'> {{ item.name }} </li></ul&g原创 2021-08-18 22:32:58 · 1569 阅读 · 0 评论 -
浅谈vue的数据响应式原理
首先,我们应该对于vue框架要有一个基本的认识,Vue 是一个基于MVVM而设计模式的渐进式框架, Vue 在背后做了大量工作。数据和 DOM 已经被建立了关联,所有东西都是响应式的。Vue.js 一个核心思想是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。——《Vue.js 技术揭秘》在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。Vue在视图初始原创 2021-08-03 22:41:43 · 416 阅读 · 0 评论 -
vue实现简易计时器组件
在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,刚最近基于业务需求,需要实现一个累加通话时长的计时器,这时候就需要定时器登上我们的代码舞台了,其实对于计时器,它的原理就是通过定时器来实现的,那么在写业务需求之前,我先说说关于定时器的一些知识。window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。在Javascript中,代码一般都是同步执行的,但定时器却是一般执行的。 window.setTimeout(cal原创 2021-08-02 20:39:42 · 1938 阅读 · 1 评论