Vue
关注
分享
扫一扫
文章平均质量分 79
一套用于构建用户界面的渐进式 JavaScrip 框架
啵啵丶
https://blog.youkuaiyun.com/fhsbvs
展开
-
Vue 中 Axios 的封装和接口管理
一、Axios 的封装在 Vue 项目中，和后台进行数据交互是频繁且不可或缺的，刚开始没进行 Axios 封装的时候，每次请求后台数据都是写的完整的路径，特别长，尤其是基准地址，每次都要复制一遍加在前面，冗余特别大。封装完 Axios 后，调用接口就简短多了，如果后期出现基准地址的改变，只需要在配置中更改一次即可。安装 Axiosnpm install axios引入我们先在 src 文件夹下创建一个 utils 文件，再在该文件夹下创一个 requery.js 文件requ.原创 2022-03-21 14:47:32 · 1370 阅读 · 25 评论 -
Vue + elementUi 组件
一、树形控件(el-tree) + Icon 图标实现带图标的菜单栏1. 页面布局 <template> <!-- 菜单信息 --> <nav> <el-tree class="filter-tree" :data="items" node-key="path" :props="defaultProps"原创 2022-03-12 08:52:32 · 1323 阅读 · 0 评论 -
项目冲刺二总结
冲刺二相较于冲刺一，还是有进步的。可能是因为全身心投入项目了，即使一个 bug 不会或者弄了很久，但基本当天的任务也都能完成。在全员的积极配合下，顺利的完成了冲刺二所有的任务。在冲刺二里，我的任务是实现管理员界面对学科、阶段、项目的增删查改。其实增删查改功能的实现花不了多少时间，就是调个接口就能实现的事，但是我居然整整花了十天时间去完成这个功能！毫不意外，其中将近有一半多的时间在设计页面布局...最终我选择了用现成的 element Ui 组件库(但是页面看起来还是很平淡，噢，那一定不会是最终页面)，真原创 2022-02-07 12:51:10 · 544 阅读 · 0 评论 -
项目冲刺一总结
进入项目组后，可以说是压力不减反增，不仅每天要把握好时间，还要有成果。因为冲刺一是边学习边做项目，而且当时把重点也还是放在学习上，最后导致在规定时间内没有完成对应的任务，所以冲刺一的结果不算是理想的，但是也是收获了很多，为接下来的冲刺二做更好的准备。做了以下总结????遇到的问题：前端：边看边学导致实际做项目的时间不多 技术不熟练，磕磕绊绊，在解决 bug 的路上浪费的时间比较多 时间分配还有待提高后端：服务器问题下一个冲刺要注意的：做一个需求一次性做到底（若存在依赖，先完成被依原创 2022-01-25 22:16:19 · 940 阅读 · 0 评论 -
Vue3 技术分享
Vue3 生命周期Vue3 与 Vue2 的生命周期没有很大的不同Vue3 与 Vue2 对比：总结：其中 Composition API （通过组合式API的形式去使用生命周期钩子）即 on 打头的 都写在 setup() 函数中的原来的不变的（通过配置项的形式使用生命周期钩子）可以写在 setup() 并列外面这两种方式二选一，如果都存在，则 setup 中的(即 on 开头的) 会比写在 setup() 外面的先执行CompositionAPI 的优势：...原创 2022-01-10 11:19:43 · 1193 阅读 · 2 评论 -
框架学习之 Vue3
前面我们学习了 Vue2 相关的知识，Vue3 是在 Vue2 基础上的改进，虽然现在的主流还是 Vue2，但是也不妨碍我们先学习 Vue3Vue3 简介1. Vue3 新特性源码的升级 使用 Proxy 代替 defineProperty 实现响应式 重写虚拟 DOM 的实现和 Tree-Shaking 新的特性 1.Composition API(组合 API) setup 配置 ref 与 reactive watch 与 watchEffec..原创 2021-12-31 11:46:41 · 829 阅读 · 14 评论 -
Vue之路由（下）
在这篇博客中，我主要给大家分享路由中的路由守卫路由守卫的作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫全局前置_路由守卫写在配置路由的 index.js 文件中//全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用router.beforeEach((to, from, next) => { console.log(to, from); if (to.meta.isAuth) { //判断是否需要鉴权 if (l..原创 2021-12-23 16:34:44 · 620 阅读 · 10 评论 -
Vue之路由（上）
路由的简介vue-router 的理解vue 的一个插件库，专门用来实现 SPA 应用对 SPA 应用的理解单页面 Web 应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面，只会做页面的局部更新 数据需要通过 ajax 请求获取什么是路由？一个路由就是一组映射关系（key-value） key 为路径，value 可能是 function 或 component路由分类.原创 2021-12-21 15:12:02 · 546 阅读 · 18 评论 -
Vue之Vuex的使用
目录Vuex 简介Getters 配置项Vuex 的辅助函数1.mapState 与 mapGetters2.mapMutations 与 mapActionsVuex 模块化 + namespace（命名空间）总结Vuex 简介1. 概念在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间的通信2. 使用场景多个组件依赖于同一...原创 2021-12-15 08:43:30 · 2345 阅读 · 35 评论 -
Vue 组件之单文件组件
因为在前一篇讲了组件的相关知识点，所以这篇博客就不讲了，如果不知道的小伙伴先去看前一篇哟，这篇博客直接步入主题，讲单文件组件单文件组件：一个文件中只包含有1个组件每一个模块都有属于自己的 名字.vue 文件，里面配置属于模块的 <template>、<script>、<style>，配置完后然后再创建一个 App.vue 里面用来管理所有的组件，后创建 main.js 用来管理 App ，最后！创建 html 文件 把 main.js 引入即可...原创 2021-12-08 08:38:22 · 664 阅读 · 4 评论 -
Vue之动画和过渡
好玩的又来了~动画使用 <transition> 包裹要做动画的元素在当前组件的 style 标签中配置动画效果<template> <!-- 动画 --> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition appear> <h1 v-show="isShow"原创 2021-12-14 09:10:42 · 402 阅读 · 5 评论 -
Vue之全局事件总线和消息订阅与发布
之前我们实现了子组件向父组件传递数据，很明显，这是不够的，看完这篇博客，无论哪两个组件之间传递和接收数据都没有问题！全局事件总线（适用于任意组件间通信）原理：（看图理解）主要就是通过往 x 身上放事件，然后事件的回调要放在想要获取数据的组件身上，谁要传数据就调用 x 身上对应的事件并往里面存数据就可以了，相当于一个中间商（哎，不得不说，它一出生就被利用了）当然不是谁都能但此大任的，x 需要具备两个条件：1. 所有组件都可以看到2. x 身上有 $on 、$off 、$emit原创 2021-12-12 16:14:44 · 1685 阅读 · 11 评论 -
Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中，我们有涉及到要从子组件中把数据传递给父组件，当时我用的方法是，让父组件给子组件传递一个函数，然后子组件把要传过来的数据放在那个函数中，这样父组件就可以拿到数据了。当然方法不止这一种，这不，博主又学到新方法了，迫不及待给你们分享。一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中）组件自定义事原创 2021-12-09 11:24:53 · 2782 阅读 · 13 评论 -
Vue 组件之非单文件组件
非单文件组件：一个文件中包含有 n 个组件一、组件组件的定义——实现应用中局部功能代码和资源的集合组件：理解：用来实现局部（特定）功能效果的代码集（html/css/js...） 为什么：一个界面的功能很复杂 作用：复用编码，简化项目编程，提高运行效率组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用模块化：当应用中的 js 都以模块来缩写的，那这个应用就是一个模块化的应用（相当于把一个.js文件分成多个.js文件）二、Vue 中...原创 2021-12-05 19:05:45 · 2036 阅读 · 8 评论 -
Vue 框架学习之计算属性监视属性
计算属性 1. 定义：要用的属性不存在(不需要在 data 中定义)，要通过已有属性计算得来 2. 原理：底层借助了 Object.defineproperty 方法提供的 getter 和 setter 3. get 函数什么时候执行？ （1）初次读取时会执行一次 （2）当数据发生改变时会被再次调用 4. 优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调式方便 5. 备注： （1）计算属性最终会出现在 vm 上，直接读取使用即...原创 2021-11-27 09:47:09 · 845 阅读 · 23 评论 -
用 Vue 实现数据绑定和数据代理
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架Vue 模板语法Vue模板语法有2大类：1. 插值语法： 功能： 用于解析标签体内容 写法：{{xxx}}， xxx是 js 表达式，且可以直接读取到 data 中的所有属性<body><div id="root"> <h1>Hellow, {{name}}</h1></div><script> Vue.co...原创 2021-11-26 10:27:21 · 1510 阅读 · 48 评论 -
Vue 指令（内置+自定义）
一、v-text 指令1. 作用： 向其所在的节点中渲染文本内容2. 与插值语法的区别： v-text 会替换掉节点中的内容，{{xx}} 则不会，意思就是用了 v-text 之后，再在标签中间写内容就没有意义了，因为会被替换掉 ，而且如果 v-text 中的内容里面写了标签，它也当字符，不支持结构的解析，所以这种方法少用，不灵活<body> <div id="root"> <div v-text="name">你好</di..原创 2021-11-30 09:17:25 · 1141 阅读 · 22 评论 -
Vue 生命周期
生命周期：又名：生命周期回调函数、生命周期函数、生命周期钩子 是什么：Vue 在关键时刻帮我们调用一些特殊名称的函数 生命周期函数的名字不可更改，但函数的具体内容式程序员根据需求编写的 生命周期函数中的 this 指向的是 vm 或 组件实例对象Vue 生命周期????如果你要开一个定时器并且在另一个Vue函数中停止，那你可以用 this.timer 作为定时器名字，即创建 Vue.timer 对象，用于存放定时器，另一处使用也同理.注意事项：不要在before...原创 2021-12-01 09:17:32 · 1561 阅读 · 0 评论 -
用 Vue 构建 TodoList 案例
目录一、构思组件二、布置静态页面三、功能实现1. MyHeader.vue 组件2. MyList.vue 组件3. MyItem.vue 组件4. MyFooter.vue 组件5. App.vue 组件 四、总结这是学 Vue 来做的第一个比较完整的案例，可以说是前面知识点的验收阶段，不得不说，边学边忘，果然还是靠练习。怎么说，用Vue 框架实现 TodoList 的思路和以前操作 Dom 元素时做的有异曲同工之妙，但是...原创 2021-12-03 11:10:43 · 2948 阅读 · 20 评论