前端
文章平均质量分 64
bying666
这个作者很懒,什么都没留下…
展开
-
vue实战-加入购物车一系列操作
为了使得能将成功添加到购物车的数据能取出来,必须要有一个身份标识,使用uuid来随机生成一个临时游客身份标识,这样在需要购物车数据时,才能从服务器中取出存入的含有身份标识的数据。在src中创建一个工具文件夹utils的uuid_token.js(为了设置获得uuid的存储以及为了它的唯一性)跳转到AddCartSuccess组件需要传临时的商品信息到该组件动态显示出来,所以用到会话存储。因为存在了临时id:uuid,在shopCart仓库中可以获得购物车的动态数据。成功在shopCart仓库中获得数据。原创 2022-10-12 21:54:31 · 3056 阅读 · 1 评论 -
vue实战-产品详情页(轮播图、放大镜)
在文件夹api下的接口统一管理中添加获得接口数据的函数reqDetailInfo,在Detail组件下派发actions,触发数据进库。因为它是路由组件,将其放入pages文件夹下。2)在Search页面处的产品点击跳转处,设置。通过getters处理,组件获得仓库中的数据。1)router中添加Detail的路由。放大镜逻辑设置、参数动态传递逻辑。传值以及逻辑控制、动态轮播图。在文件夹store下。原创 2022-10-02 17:30:30 · 2406 阅读 · 0 评论 -
vue实战-分页器
子组件传值给父组件判断父组件设置自定义事件回调函数。原创 2022-09-30 16:51:14 · 1217 阅读 · 0 评论 -
vue实战-排序
在public中的index.html中添加。原创 2022-09-29 11:03:43 · 470 阅读 · 0 评论 -
vue实战-面包屑的处理
父组件下绑定自定义事件处理从子组件传递过来的数据${.}${}${.}子组件触发事件并传递数据。原创 2022-09-28 10:55:32 · 2512 阅读 · 0 评论 -
vue实战-Search模块开发(大体步骤)
②传递的参数也要传给服务器用于筛选,不能只是空对象,可以在data中设置需要传递的值,将路由传递的参数动态的传递到data中的对象中,然后再发送给服务器,服务器返回符合的数据入仓库。于是需要在挂载调用派发actions时,就得将data中的对象确定好,可以用在生命周期mounted之前的beforeMount,或者beforeCreate。,当再次传参发请求时,不能再派发action改变仓库的值,这不符合搜索模块的特性,在接口统一管理的index.js中添加搜索模块的接口。获取计算属性得到的值用数组表示。原创 2022-09-26 17:28:54 · 516 阅读 · 0 评论 -
vue实战-轮播图的最佳方案/swiper的使用
因为在运行swiper实例之前,它的页面结构必须以及存在且完整,而此时由于轮播图的数据需要从store仓库中获得需要花费时间,所以此时的页面结构是不完整的,所以在mounted中书写没有效果。但是这个只能保证bannerList的数据以及有了,不能保证页面组件中的v-for以及循环结束,所以还需要nectTick。在mounted中使用setTimeout来实现过一段时间后执行,可以解决这个问题,但是不完美。因为不知一处用到轮播图,直接在入口文件引入一次即可。,立即使用这个方法,获取更新后的DOM。原创 2022-09-25 17:10:35 · 1906 阅读 · 0 评论 -
vue实战-mockjs模拟数据
在创建axios实例时的默认api改成’/mock’利用计算mapState。原创 2022-09-25 16:29:20 · 1217 阅读 · 0 评论 -
vue实战-合并参数
点击三级列表的链接触发事件传递query参数,而此时,若在搜索框中搜索一个属性,再进行三级列表点击会使得搜索框处params参数被覆盖,而实际上是需要这两者的参数判断得到商品信息的,所以需要合并参数。点击搜索某个属性时,若存在query参数则会被params覆盖,所以需要合并参数。判断如果$route中的params存在则添加到location中传递参数。原创 2022-09-25 12:20:38 · 1040 阅读 · 0 评论 -
vue实战-vuex模块化开发
对象类型,当state内容比较多时,通过该属性分割成小模块,每个模块都拥有自己的 state、mutation、action、getter。在home小仓库中将接口的数据获取处理好,放进state中便于组件获取。vuex是官方提供的插件,状态管理库,集中式管理项目中组件共用的数据。对象类型,类似于实例的 methods,但是不能处理异步方法。再进入已经创建好的home小仓库处理,得到数据放入仓库中。对象类型,类似于实例的 methods,可以处理异步方法。对象类型,类似于实例的 data属性,存放数据。原创 2022-09-21 20:47:25 · 885 阅读 · 0 评论 -
vue实战-路由传递参数
声明式导航:router-link(务必要带有to属性),可以实现路由的跳转编程式导航:利用的是组件实例的$router.push | replace方法,可以实现路由的跳转。(还可以写一些自己的业务)设置一个接收参数是为了能在回调函数中使用并传到search页面。原创 2022-09-20 08:43:55 · 910 阅读 · 0 评论 -
vue实战-路由元信息的使用
配置路由的时候,可以给路由添加路由元信息【meta】,路由需要配置对象,它的key不能瞎写。原创 2022-09-19 18:24:08 · 285 阅读 · 0 评论 -
vue项目实战-完成路由组件的搭建
1:路由组件一般放置在pages|views文件夹,非路由组件一般放置在components文件夹中2:路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用3:注册完路由,不管路由组件、非路由组件身上都有 ”route“、”route“ 、”route“、”router“属性$route: 一般获取路由信息【路径、query、params等】原创 2022-09-19 17:18:18 · 628 阅读 · 0 评论 -
【vue eslint】报错Component name “xxxxx“ should always be multi-word.eslintvue
我网上搜了很多都是让在.eslintrc.js文件里加东西来解决,但一个大问题就是我的项目根本没有这个文件,想创建一个新的还不让创建~于是我找了好多文章,发现是创建vue项目的时候选择了eslint,babel就没有这个文件,而是在。这里要添加一个overrides属性,根据自己项目结构来修改,我的是因为我的index.vue一定要遵循那个原则,导致我路由用不了,真的受不了,一定要命名,可是我index.vue有啥好命名的(不解。在进行vue项目开发中,这个eslint可谓是真能把人气死,我受不了了~原创 2022-09-11 16:01:54 · 459 阅读 · 0 评论 -
正则表达式
第七阶段over原创 2022-06-10 11:24:52 · 67 阅读 · 0 评论 -
BOM- 操作浏览器
源代码拓展第六阶段over原创 2022-06-10 11:07:15 · 89 阅读 · 0 评论 -
DOM- 网页特效篇
源代码2.2 offset家族源代码案例2源代码2.3 client家族源代码(JS)第五阶段over原创 2022-06-02 17:57:49 · 129 阅读 · 0 评论 -
DOM- 事件高级
DOM- 事件高级1.事件对象1.1 获取事件对象1.2 事件对象常用属性clientX/clientY、offsetX/offsetY与pageX/pageY的区别clientX/clientY:指在可视窗口的距离左上角的位置offsetX/offsetY:指在一个元素/盒子里的距离其左上角的位置pageX/pageY:指整个页面大小的距离左上角多少的位置案例源代码<!DOCTYPE html><html lang="en"><head>原创 2022-05-31 17:20:45 · 96 阅读 · 0 评论 -
DOM- 节点操作/时间戳
DOM- 节点操作/时间戳1.1.DOM节点1.2.查找节点1)父节点查找2)子节点查找3)兄弟关系查找1.3.增加节点1)创建节点2)追加节点3)克隆节点案例源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init原创 2022-05-30 23:11:31 · 186 阅读 · 0 评论 -
DOM-事件基础(案例源代码)
DOM-事件基础(案例源代码)案例1源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2022-05-30 20:49:56 · 149 阅读 · 0 评论 -
DOM-事件基础
DOM-事件基础1.事件①事件监听②事件类型2.高阶函数①函数表达式②回调函数3.环境对象环境对象指的是函数内部特殊的变量 this ,它代表着当前函数运行时所处的环境作用:弄清楚this的指向,可以让我们代码更简洁函数的调用方式不同,this 指代的对象也不同【谁调用, this 就是谁】 是判断 this 指向的粗略规则直接调用函数,其实相当于是 window.函数,所以 this 指代 window4.排他思想所有案例源代码见下篇每日一句今天多原创 2022-05-30 09:08:41 · 54 阅读 · 0 评论 -
DOM获取元素、修改元素
DOM获取元素、修改元素1.DOM①什么是DOM?作用?DOM是文档对象模型作用:操作网页内容,可以开发网页内容特效和实现用户交互。②DOM对象2.获取DOM元素① 根据CSS选择器来获取DOM元素 (重点)思考获取一个DOM元素我们使用谁?querySelector()获取多个DOM元素我们使用谁?querySelectorAll()querySelector() 方法能直接操作修改吗?可以querySelectorAll() 方法能直接修改吗? 如果不能可以原创 2022-05-28 19:41:51 · 511 阅读 · 0 评论 -
JS的一个小项目简易ATM实现
简易ATM实现JS源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2022-05-07 16:51:13 · 169 阅读 · 0 评论