11 2023 档案
摘要:官网 https://cn.vuejs.org/guide/quick-start.html 再vue3中采用的是组合式API风格(组合式 API (Composition API)) 通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与 <s
阅读全文
摘要:打包发布 目标:明确打包的作用 说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了,脚手架不参与上线 打包的作用: 将多个文件压缩合并成一个文件 语法降级 less sass ts 语法解析 .... 打包后,可以生成,浏览器能够直接运行的网页 命令:npm run build 打包完
阅读全文
摘要:概述 再日常开发中,对于组件内部的方法多处存在相同的特点,往往会抽离出一个公共的方法方便调用,但是由于多个组件可能都需要用到这个方法,所以通过mixin混入的方式,将该方法独立抽离出来,方便多个组件的使用。 步骤 再src目录下创建一个mixins 再该目录下创建一个xxxx.js文件 编写对应的j
阅读全文
摘要:Vue-加入购物车-判断token添加登录提示 目标:给未登录的用户,添加登录提示 说明:加入购物车,是一个登录后的用户 才能进行的操作,所以需要进行鉴权判断,判断用户token是否存在 若存在:继续加入购物车操作 不存在:提示用户未登录,引导到登录页,登录完回跳 addCart () { // 判
阅读全文
摘要:自定义数字框组件如下 <template> <div class="count-box"> <button @click="handleSub" class="minus">-</button> <input :value="value" @change="handleChange" class="
阅读全文
摘要:搜索-历史记录管理 目标:构建搜索页的静态布局,完成历史记录的管理 需求: 搜索历史基本渲染 点击搜索(添加历史) 点击搜索按钮 或底下历史记录,都能进行搜索 若之前没有相同搜索关键字,则直接追加到最前面 若之前已有相同搜索关键字,将该原有关键字移除,在追加(相当于置顶) 清空历史:添加清空图标,可
阅读全文
摘要:页面访问拦截 目标:基于全局前置守卫,进行页面访问拦截处理 说明:对于一个项目来说,大部分的页面,游客都可以直接访问,如遇到需要登录才能进行的操作,提示并跳转到登录,但是:对于支付页,订单页等,必须是登录的用户才能访问,游客不能进入该页面,需要做拦截处理 路由导航守卫-全局前置守卫 所有的路由一旦被
阅读全文
摘要:概述 在实际开发场景中,我们需要对每一次的请求做一个loading效果,使得让用户知道正在提交中,此时需要给用户添加loading提示 好处 节流处理:防止用户在一次请求还没回来之前,多次进行点击,发送无效请求 友好提示:告知用户,目前是在加载中,请耐心等待,用户体验会更好 步骤 请求拦截器中,每次
阅读全文
摘要:企业级项目目录 api接口模块:发送ajax请求的接口模块 utils工具模块:自己封装的一些工具方法模块 Vant 组件库 第三方组件库:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/ 引入组件 方式一. 自动按需引入组件 (推荐) babel-plu
阅读全文
摘要:概述 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 对于组件间的通信方式而言,vuex也是一个可以进行任意组件通信的方法。 使用场景: 某个状态在很多组件来使用(个人信息) 多个组
阅读全文
摘要:基于VueCli 自定义创建项目 顺序: 安装脚手架 vue create 项目名 选择自定义 Babel/Router/CSS/Linter Vue2.x VueRouter hash模式 CSS预处理 ESlint:Standard & Lint on Save 配置文件 dedicated c
阅读全文
摘要:概念 1)理解: 一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 2)前端路由:key是路径,value是组件 3)作用:设定访问路径,并将路径和组件映射起来(就是用于局部刷新页面,不需要请求服务器来切换页面) Route(路由) Route
阅读全文
摘要:开发分类 实现方式 页面性能 开发效率 用户体验 学习成本 首屏加载 SEO 单页 一个html页面 按需更新性能高 高 非常好 高 慢 差 多页 多个html页面 整页更新性能低 中等 一般 中等 快 优 场景 单页面应用 系统类网站 内部网站 文档类网站 移动端站点 多页面应用 公司官网 电商类
阅读全文
摘要:插槽-默认插槽 作用:让组件内部的一些结构支持自定义 需求:要在页面中显示一个对话框,封装成一个组件,但是组件的内容部分,不是写死的,希望能使用时自定义。 插槽的基本语法 组件内需要定制的结构部分,改用<slot></slot>占位 使用组件时,在组件中传入结构替换slot,例如<组件名>xxxxx
阅读全文
摘要:自定义指令 根据自定义的指令,可以封装一些dom操作,扩展额外的功能 全局注册-语法 全局注册是在min.js文件中去定义的 Vue.directive('指令名',{ // inserted: 钩子是一个自定义指令的生命周期钩子函数之一。它会在被绑定的元素插入到父节点时调用。 "inserted"
阅读全文
摘要:场景引入 需求:当用户点击编辑按钮后,显示一个弹窗,该弹窗有一个文本框,使得文本框自动聚焦 看似代码如下: this.isShowEdit = true; // 显示输入框 this.$refs.inp.focus(); // 获取焦点 代码看似没有问题,显示文本框后,让文本框聚焦,但是在vue中却
阅读全文
摘要:ref 和 $refs 作用:利用ref 和 $refs 可以用于获取dom元素,或组件实例 特点:查找范围 -> 当前组件内(更精确稳定) 注意:在操作ref获取dom元素时,最快也得是mounted时期获取,也就是页面渲染之后 使用步骤: 目标标签-添加ref属性 <div ref="chart
阅读全文
摘要:父子通信流程图: 父组件通过props将数据传递给子组件 子组件利用$emit通知父组件修改更新 父组件传递子组件 注意点 但是需要注意的是,通过props传递的数据是只读状态的,也就是说,我们不能去修改这个值。 注意:props是只读的,如果直接对props中的数据进行修改,Vue就会发出警告。如
阅读全文