vue
关注
分享
扫一扫
文章平均质量分 74
vue学习
清梦压星河_Ciao
想要技术支持、获取源码请关注公众号：橙晴丰Ciao
展开
-
Vue3路由配置、跳转
Vue3中路由的使用跟Vue2不同，因为vue3中没有。//此处this为undefined。原创 2023-11-23 15:44:03 · 779 阅读 · 0 评论 -
Vue3 状态管理 - Pinia
Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品提供更加简单的APl（去掉了mutation，Pinia 中对state数据的修改可以直接通过action，Vuex中则是通过mutation)提供符合组合式风格的API（和Vue3新语法统一)去掉了modules的概念，每一个store都是一个独立的模块配合TypeScript更加友好，提供可靠的类型推断。原创 2023-11-23 11:19:08 · 328 阅读 · 0 评论 -
Vue3入门（与Vue2进行对比）
如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的<script> 标签。当传递参数为ref对象时，可以在子组件中进行参数修改，注意修改值要加上.value，但最好还是在父组件进行数据修改，将对应的方法传递给子组件，便于状态的管理。但是用了<script setup> 后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep。原创 2023-11-21 13:54:26 · 114 阅读 · 0 评论 -
06.智慧商城——历史搜索记录、搜索页面实现
01. 搜索 - 静态布局准备静态结构和代码<template> <div class="search"> <van-nav-bar title="商品搜索" left-arrow @click-left="$router.go(-1)" /> <van-search show-action placeholder="请输入搜索关键词" clearable> <template #action>原创 2023-11-16 14:40:50 · 369 阅读 · 0 评论 -
05.智慧商城——路由前置守卫、首页动态渲染
说明：智慧商城项目，大部分页面，游客都可以直接访问, 如遇到需要登录才能进行的操作，提示并跳转到登录。但是：对于支付页，订单页等，必须是登录的用户才能访问的，游客不能进入该页面，需要做拦截处理。2.只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容。1.所有的路由一旦被匹配到，都会先经过全局前置守卫。// 主题 padding。// 导航条样式定制。// 搜索框样式定制。原创 2023-11-16 10:34:23 · 183 阅读 · 0 评论 -
04.智慧商城——短信验证码倒计时、登录请求、响应拦截器统一处理、请求loading效果
数据流转站”，可以在里面统一处理错误，只要不是 200 默认给提示，抛出错误。响应拦截器是咱们拿到数据的。提供登录 Api 函数。原创 2023-11-16 10:00:50 · 226 阅读 · 0 评论 -
03.智慧商城——封装请求模块、登录静态页面、图形验证码
接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080。基地址：http://cba.itlike.com/public/index.php?演示地址：http://cba.itlike.com/public/mweb/#/利用 axios.create 创建一个自定义的 axios 来使用。一般项目开发中, 都会对 axios 进行基本的。, 单独封装到一个模块中, 便于使用。原创 2023-11-16 09:34:59 · 357 阅读 · 0 评论 -
02.智慧商城——vant组件库使用和vw适配
官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage。1.全部导入会引起项目打包后的体积变大，进而影响用户访问网站的性能。vant-ui提供了很多的组件，全部导入，会导致项目打包变得很大。组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。比如日历组件、键盘组件、打分组件、下拉筛选组件等。2.按需导入只会导入你使用的组件，进而节约了资源。viewportWidth:设计稿的视口宽度。main.js中进行导入。原创 2023-11-16 09:14:15 · 256 阅读 · 0 评论 -
01.智慧商城——项目介绍与初始化
接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080演示地址：http://cba.itlike.com/public/mweb/#/原创 2023-11-16 09:05:26 · 337 阅读 · 0 评论 -
Vux购物车案例
本案例主要针对Vuex共享数据的练习以及父子组件数据的共享。请求获取数据存入 vuex, 映射渲染。当服务启动后，可以访问。原创 2023-11-10 10:37:15 · 420 阅读 · 0 评论 -
Vue路由(router-link)——高亮、动态传参
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）原创 2023-11-07 16:45:36 · 6779 阅读 · 0 评论 -
Vue路由介绍及使用
单页应用程序：SPA【Single Page Application】是指所有的功能都在一个html页面上实现，当切换不同的功能时，页面不会进行刷新，类似Ajax请求，但请求地址会发生部分变化。单页面应用程序，之所以开发效率高，性能好，用户体验好页面按需更新比如当点击【发现音乐】和【关注】时，只是更新下面部分内容，对于头部是不更新的访问路径和组件的对应关系！访问路径 和 组件的对应关系如何确定呢？路由生活中的路由：设备和ip的映射关系路径和组件的映射关系什么是路由Vue中的路由是什么。原创 2023-11-07 15:06:30 · 199 阅读 · 0 评论 -
vue实现商品列表，组件抽离
(4) 内容修改，回车 → 修改标签信息。 (1) 双击显示输入框，输入框获取焦点。 (2) 失去焦点，隐藏输入框。 (1) 动态传递表格数据渲染。 (2) 表头支持用户自定义。 (3) 主体支持用户自定义。 (3) 回显标签信息。原创 2023-11-07 14:12:32 · 315 阅读 · 0 评论 -
Vue实现消费清单明细饼图展示
功能可以进行消费项增删消费额大于500会标红消费金额合计饼图展示消费项代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>原创 2023-11-02 14:31:35 · 591 阅读 · 0 评论 -
vue中插槽slot
场景：组件内某一部分结构不确定，想要自定义怎么办使用：插槽的步骤分为哪几步？组件内 有多处不确定的结构 怎么办?具名插槽的语法是什么？v-slot:插槽名可以简化成什么?原创 2023-11-07 13:48:42 · 521 阅读 · 0 评论 -
组件局部注册和全局注册
A组件内部注册的局部组件能在B组件使用吗局部注册组件的步骤是什么使用组件时 应该按照什么命名法1.全局注册组件应该在哪个文件中注册以及语法是什么？2.全局组件在项目中的任何一个组件中可不可以使用？原创 2023-11-02 16:23:47 · 308 阅读 · 0 评论 -
vue实现图片分页
【代码】vue实现图片分页。原创 2023-10-30 16:05:11 · 452 阅读 · 0 评论 -
vue中ref和$refs
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例，也可以在父组件获取子组件，从而调用子组件的方法。之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子，2.获取时通过 $refs获取 this.$refs.chartRef 获取。如果Good.vue中有一个class=“box”,在App中通过。示例代码在父组件中直接调用子组件的方法进行数字的更新。的方式只能获取到第一个class="box"的元素。1.给要获取的盒子添加ref属性。原创 2023-11-06 15:47:22 · 139 阅读 · 0 评论 -
computed计算属性
computed计算属性跟method的主要区别就是，计算属性会对计算出来的结果进行缓存，再次使用该数据时可以直接从缓存中读取，如果依赖的数据发生改变时，计算属性会自动重新计算并再次缓存。原创 2023-10-31 15:15:16 · 102 阅读 · 0 评论 -
vue工程化开发和脚手架
Vue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可main.js 入口文件App.vue App根组件index.html 模板文件整个应用最上层的组件，包裹所有普通小组件。原创 2023-11-02 15:53:04 · 590 阅读 · 0 评论 -
vue实现记事本(无样式版）
实现了增、删功能，任务统计，全删除功能。原创 2023-10-30 17:09:06 · 218 阅读 · 0 评论 -
v-bind动态改变样式
通过v-bind切换样式，为true展示样式，false不展示。也可以由动态控制宽度。注意后面是JS对象，所以后面的值不可以包含，比如会解析出错，应该写成，后面的值要有一对''包裹。原创 2023-10-31 14:16:22 · 253 阅读 · 0 评论 -
Vue生命周期
/ 接口地址：http://hmajax.itheima.net/api/news。Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁。// 3. 更新阶段(修改数据 → 更新视图)注意：这些都是钩子函数，所以写法为。3.更新阶段：修改数据，更新视图。// 1. 创建阶段（准备数据）// 2. 挂载阶段（渲染模板）1.创建阶段：创建响应式数据。4.销毁阶段：销毁Vue实例。// 请求方式：get。// 4. 卸载阶段。原创 2023-11-01 16:51:24 · 105 阅读 · 0 评论 -
自定义指令
这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能全局注册//在main.js中Vue.directive('指令名', {// 可以对 el 标签，扩展额外功能，inserted表示绑定的组件一经渲染就会触发相应的代码el.focus()})局部注册//在Vue组件的配置项中"指令名": {原创 2023-11-06 17:11:04 · 240 阅读 · 0 评论 -
非父子通信事件、数据传递
1.非父子组件传值借助什么？2.什么是事件总线3.发送方应该调用事件总线的哪个方法4.接收方应该调用事件总线的哪个方法5.一个组件发送数据，可不可以被多个组件接收。原创 2023-11-06 13:46:54 · 92 阅读 · 0 评论 -
v-model进行父子组件数据传递
实现子组件和父组件数据的双向绑定 （实现App.vue中的selectId和子组件选中的数据进行双向绑定）v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写。不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model。v-model其实就是 :value和@input事件的简写。底层处理的是 checked属性和change事件。用于在模板中，获取事件的形参。父组件通过v-model。，实现子组件和父组件数据。原创 2023-11-06 14:23:21 · 1243 阅读 · 0 评论 -
vue中sync修饰符
1.父组件如果想让子组件修改传过去的值 必须加什么修饰符？2.子组件要修改父组件的props值 必须使用什么语法？原创 2023-11-06 15:12:55 · 1073 阅读 · 0 评论 -
vue实现学生成绩管理案例
实现了学生成绩的管理，可以增加科目成绩，不及格的成绩自动标红，删除成绩，实现总分统计、平均分计算。原创 2023-10-31 16:12:52 · 1190 阅读 · 0 评论 -
父子组件通信
组件关系分类有哪两种父子组件通信的流程是什么？父向子子向父组件上 注册的一些 自定义属性。原创 2023-11-03 15:13:06 · 98 阅读 · 0 评论 -
vue实现记事本（含样式）
实现增加、删除、全删、合计功能。原创 2023-10-30 17:27:47 · 662 阅读 · 0 评论 -
vue中watch实现翻译案例
翻译案例需要向在线接口发起一个Ajax请求，所以需要引入axios库。当输入一个单词或者文字时自动发起翻译请求。所以可以使用watch监听器来监听属性是否变更，当发生变化即发起翻译请求。翻译接口提供：该接口会返回随机字符串作为翻译结果。原创 2023-10-31 17:14:50 · 398 阅读 · 1 评论 -
vue中异步更新$nextTick
方法中对dom的操作并不会每执行一行就立刻重新渲染一次，所以在执行第二句代码的时候第一句代码还没有执行到。原因：Vue 是异步更新DOM (提升性能)，在。，这样才能让函数内部的this指向Vue实例。“显示之后”，立刻获取焦点是不能成功的！this.$nextTick(函数体)$nextTick 内的函数体 一定是。,才会触发执行此方法里的函数体。编辑标题, 编辑框自动聚焦。原创 2023-11-06 16:56:49 · 180 阅读 · 0 评论 -
v-model应用于不同的表单元素
可以应用于输入框、单选框、多选框。原创 2023-10-31 14:43:14 · 148 阅读 · 0 评论 -
vue实现购物车案例
要求可以进行购物车水果删除可以进行水果数量增减可以进行总价计算、购物车商品计算选中所有水果也会一同勾选全选框，全选框勾选也能选中所有水果可以记录购物车状态，当页面关闭后重新打开可以看到原先的购物车数据功能代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="I原创 2023-11-01 15:15:53 · 1288 阅读 · 0 评论 -
vue实现图书遍历
和数组元素删除操作，注意。方法并不会改变原数组。原创 2023-10-30 16:27:26 · 143 阅读 · 0 评论