Vue.js
文章平均质量分 69
小小白学计算机
这个作者很懒,什么都没留下…
展开
-
基于Element-plus封装配置化表单组件(组件的v-model实现)
一、预备知识1.1 组件的v-model前面我们在input中可以使用v-model来完成双向绑定:这个时候往往会非常方便,因为v-model默认帮助我们完成了两件事;v-bind:value的数据绑定 和 @input的事件监听;如果我们现在封装了一个组件,其他地方在使用这个组件时,是否也可以使用v-model来同时完成这两个功能呢?也是可以的,vue也支持在组件上使用v-model;当我们在组件上使用的时候,等价于如下的操作:我们会发现和input元素不同的只是属性的名称和原创 2022-03-25 00:47:56 · 2968 阅读 · 0 评论 -
Vue权限控制——动态注册路由
需求:实现后台管理系统不同用户的权限控制根据登录的用户的角色动态展示后台管理系统的左侧菜单栏的菜单列表内容,然后还要动态注册对应子菜单的路由菜单列表内容应该通过后端接口返回:sort为1表示当前项有子菜单sort为2表示当前项没有子菜单,这个才是需要我们去动态注册的组件前端需要根据后端返回的菜单列表去动态的展示菜单列表:并且为每个菜单列表项注册对应的路由:在views/main文件夹下创建所有的页面(component)在router/main文件夹下创建每个页面对应的路原创 2022-03-24 14:23:47 · 4353 阅读 · 0 评论 -
手写实现简单的Vue事件总线
一、什么是事件总线自定义事件总线属于一种观察者模式,其中包括三个角色:发布者(Publisher):发出事件(Event);订阅者(Subscriber):订阅事件(Event),并且会进行响应(Handler);事件总线(EventBus):无论是发布者还是订阅者都是通过事件总线作为中台的;当然我们可以选择一些第三方的库:Vue2默认是带有事件总线的功能;Vue3中推荐一些第三方库,比如mitt;二、手写实现事件总线当然我们也可以实现自己的事件总线:事件的监听方法on:存储对原创 2022-03-16 16:33:43 · 1734 阅读 · 0 评论 -
Vuex4学习笔记
一、Vuex的状态管理二、Vuex的安装我们这里使用的是vuex4.x,安装的时候需要添加 next 指定版本;npm install vuex@next三、创建Store每一个Vuex应用的核心就是store(仓库):store本质上是一个容器,它包含着你的应用中大部分的状态(state);Vuex和单纯的全局对象有什么区别呢?第一:Vuex的状态存储是响应式的当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会被更新;第二:你不能直接改原创 2022-03-04 19:03:58 · 1027 阅读 · 0 评论 -
Vue-Router4 学习笔记
一、URL的hash前端路由是如何做到URL和内容进行映射呢?监听URL的改变。URL的hash也就是锚点(#), 本质上是改变window.location的href属性;我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新;hash的优势就是兼容性更好,在老版IE中都可以运行,但是缺陷是有一个#,显得不像一个真实的路径。二、HTML5的History三、认识vue-routerVue Router 是 Vue.js 的官方路由。它与 Vue.j原创 2022-03-04 09:09:11 · 844 阅读 · 0 评论 -
Vue3 高级语法(二)—— 自定义指令、Teleport、Vue插件
一、认识自定义指令在Vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等,除了使用这些指令之外,Vue也允许我们来自定义自己的指令。注意:在Vue中,代码的复用和抽象主要还是通过组件;通常在某些情况下,你需要对DOM元素进行底层操作,这个时候就会用到自定义指令;自定义指令分为两种:自定义局部指令:组件中通过 directives 选项,只能在当前组件中使用;自定义全局指令:app的 directive 方法,可以在任意组件中被使用;比如我们来做一原创 2022-03-02 19:25:44 · 897 阅读 · 0 评论 -
Vue3 高级语法(一)—— h函数、jsx
一、认识h函数Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用渲染函数 ,它比模板更接近编译器;前面我们讲解过VNode和VDOM的改变:Vue在生成真实的DOM之前,会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚 拟DOM(VDOM);事实上,我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode;那么,如果你想充分的利用JavaScri原创 2022-03-02 16:41:29 · 10702 阅读 · 0 评论 -
Vue3 Composition API(三)——生命周期钩子、Provide函数 和 Inject函数、封装Hook案例、setup顶层编写方式
一、生命周期钩子我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项,也可以替代生命周期钩子。那么setup中如何使用生命周期函数呢?可以使用直接导入的 onX 函数注册生命周期钩子;二、Provide函数 和 Inject函数事实上我们之前还学习过Provide和Inject,Composition API也可以替代之前的 Provide 和 Inject 的选项。我们可以通过 provide来提供数据:原创 2022-03-02 15:29:43 · 1071 阅读 · 0 评论 -
Vue3 Composition API(二)——computed、watchEffect、setup中使用ref
一、computed在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理在前面的Options API中,我们是使用computed选项来完成的;在Composition API中,我们可以在 setup 函数中使用 computed 方法来编写一个计算属性;如何使用computed呢?方式一:接收一个getter函数,并为 getter 函数返回的值,返回一个不变的 ref 对象;方式二:接收一个具有 get 和 set 的对原创 2022-03-02 13:37:07 · 1151 阅读 · 0 评论 -
Vue3 Composition API(一)——setup、reactive、ref、readonly
一、Options API的弊端在Vue2中,我们编写组件的方式是Options API:Options API的一大特点就是在对应的属性中编写对应的功能模块;比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变,也包括生命周期钩子;但是这种代码有一个很大的弊端:当我们实现某一个功能时,这个功能对应的代码逻辑会被拆分到各个属性中;当我们组件变得更大、更复杂时,逻辑关注点的列表就会增长,那么同一个功能的逻辑就会被拆分的很分散;尤其对于那些原创 2022-03-02 11:30:03 · 537 阅读 · 0 评论 -
Vue3过渡&动画实现
一、认识动画在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验:React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group;Vue中为我们提供一些内置组件和对应的API来完成动画,利用它们我们可以方便的实现过渡动画效果;我们来看一个案例:Hello World的显示和隐藏;通过下面的代码实现,是不会有任何动画效果的;没有动画的情况下,整个内容的显示和隐藏会非常的生硬原创 2022-03-01 17:08:59 · 2731 阅读 · 0 评论 -
组件的v-model && Mixin && extends
一、组件的v-model前面我们在input中可以使用v-model来完成双向绑定:这个时候往往会非常方便,因为v-model默认帮助我们完成了两件事;v-bind:value的数据绑定 和 @input的事件监听;如果我们现在封装了一个组件,其他地方在使用这个组件时,是否也可以使用v-model来同时完成这两个功能呢?也是可以的,vue也支持在组件上使用v-model;当我们在组件上使用的时候,等价于如下的操作:我们会发现和input元素不同的只是属性的名称和事件触发的名称而已原创 2022-03-01 11:25:37 · 230 阅读 · 0 评论 -
Webpack的代码分包&&Vue3中定义异步组件分包&&refs的使用
一、默认的打包过程:默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中);这个时候随着项目的不断庞大,app.js文件的内容过大,会造成首屏的渲染速度变慢;打包时,代码的分包:所以,对于一些不需要立即使用的组件,我们可以单独对它们进行拆分,拆分成一些小的代码块chunk.js;这些chunk.js会在需要时从服务器加载下来,并且运行代码,显示对应的内容;那么webpack中原创 2022-03-01 10:35:44 · 846 阅读 · 1 评论 -
Vue动态组件和组件缓存
一、切换组件案例比如我们现在想要实现了一个功能:点击一个tab-bar,切换不同的组件显示;这个案例我们可以通过两种不同的实现思路来实现:方式一:通过v-if来判断,显示不同的组件;方式二:动态组件的方式;动态组件是使用 component 组件,通过一个特殊的attribute is 来实现:这个currentTab的值需要是什么内容呢?可以是通过component函数注册的组件;在一个组件对象的components对象中注册的组件;二、动态组件的传值如果是原创 2022-03-01 09:30:03 · 2012 阅读 · 2 评论 -
Vue3 slot插槽——(默认插槽、具名插槽、作用域插槽)
一、认识插槽Slot在开发中,我们会经常封装一个个可复用的组件:前面我们会通过props传递给组件一些数据,让组件来进行展示;但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;比如某种情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片;我们应该让使用者可以决定某一块区域到底存放什么内容和元素;举个栗子:假如我们定制一个通用的导航组件 - NavBar这个组件分成三块区域:左边-中间-右边,每块区域的原创 2022-02-28 18:39:39 · 16962 阅读 · 3 评论 -
Vue3 组件通信学习笔记
一、父子组件之间通信父子组件之间如何进行通信呢?父组件传递给子组件:通过props属性;子组件传递给父组件:通过$emit触发事件;1.1 父组件传递给子组件在开发中很常见的就是父子组件之间通信,比如父组件有一些数据,需要子组件来进行展示:这个时候我们可以通过props来完成组件之间的通信;什么是Props呢?Props是你可以在组件上注册一些自定义的attribute;父组件给这些attribute赋值,子组件通过attribute的名称获取到对应的值;Props有两种常见的原创 2022-02-28 17:19:10 · 267 阅读 · 0 评论 -
Vite学习笔记
一、认识ViteWebpack是目前整个前端使用最多的构建工具,但是除了webpack之后也有其他的一些构建工具:比如rollup、parcel、gulp、vite等等什么是vite呢? 官方的定位:下一代前端开发与构建工具;如何定义下一代开发和构建工具呢?我们知道在实际开发中,我们编写的代码往往是不能被浏览器直接识别的,比如ES6、TypeScript、Vue文件等等;所以我们必须通过构建工具来对代码进行转换、编译,类似的工具有webpack、rollup、parcel;但是随着项目原创 2022-02-28 14:20:11 · 297 阅读 · 0 评论 -
二、uniapp项目(分段器的使用、scroll-view、视频下载、转发)
一、分段器组件的使用uniapp官方文档<template> <view class="category"> <view class="category_tab"> <view class="category_tab_title"> <view class="title_inner"> <uni-segmented-control :current="current" :values="原创 2021-07-31 15:10:34 · 1770 阅读 · 0 评论 -
uni-ui介绍&&uni-api
一、uni-ui介绍安装二、uni-api解决uni-app中的跨域问题:"h5" : { "router" : { "mode" : "hash" }, "devServer": { "https": false, "proxy": { "/web": { "target": "http://157.122.xx.xxx9:9088", "changeOrigin": true,原创 2021-07-28 11:56:43 · 831 阅读 · 0 评论 -
Uniapp学习笔记(数据展示、数据循环、条件编译、计算属性、组件的使用、组件插槽、生命周期)
1.项目准备1.1开发方式uni-app为我们提供2种开发方式:使用DCloud公司提供HBuilderX工具来快速开发;使用脚手架来快速开发(我们这次项目使用此方式);1.2脚手架搭建项目全局安装,如果你以前安装过就不需要重复安装了。npm install -g @vue/cli创建项目。vue create -p dcloudio/uni-preset-vue dnpicture启动项目(微信小程序)。npm run dev:mp-weixin原创 2021-07-27 21:27:49 · 517 阅读 · 0 评论 -
Vue项目中使用 路由导航守卫 处理页面的访问权限
参考Vue-Router官方文档Vue-Router导航守卫效果展示1、给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性{ // 小智同学 name: 'user-chat', path: '/user/chat', component: () => import('@/views/user-chat'), meta: { requiresAuth: true }},2、通过路由拦截器统一校验router.beforeEach((to, fr原创 2021-07-24 16:51:48 · 240 阅读 · 0 评论 -
Vue中使用axios的响应拦截器处理请求失败的情况(处理token过期问题)以及 登录成功跳转回原来页面问题
参考axios官方文档// 响应拦截器// Add a response interceptorrequest.interceptors.response.use( // 在2xx范围内的任何状态代码都会触发此函数,这里主要用于处理响应数据 response => { return response }, // 任何超出2xx范围的状态码都会触发此函数,这里主要用于处理响应错误 error => { const { status } = error..原创 2021-07-24 15:41:27 · 12707 阅读 · 0 评论 -
Vue 中的组件缓存
一、介绍先来看一个问题?从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页重新渲染原来的状态没有了,又回到了推荐模块。首先,这是正常的状态,并非问题,路由在切换的时候会销毁切出去的页面组件,然后渲染匹配到的页面组件。但是我想要某些页面保持状态,而不会随着路由切换导致重新渲染。二、解决方案使用 keep-alive 缓存组件官方文档:在动态组件上使用 keep-alive 主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们原创 2021-07-24 14:51:12 · 12523 阅读 · 5 评论 -
使用socket.io搭建一个实时聊天机器人
一、安装socket.ionpm i socket.io --save二、使用第一种:服务端使用原生node// 创建http服务器const http = require('http')var fs = require('fs')const app = http.createServer()app.on('request', (req, res) => { fs.readFile(__dirname + '/index.html', function (err, dat原创 2021-07-23 21:45:17 · 462 阅读 · 0 评论 -
WebSocket实现实时通信
WebSocket 是一种数据通信协议,也是用于客户端和服务端数据通信,类似于我们常见的 http既然有 http,为啥还要 WebSockethttp 通信是单向的请求 + 响应没有请求也就没有响应初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到.原创 2021-07-23 14:40:23 · 25003 阅读 · 9 评论 -
Vue项目开发过程中解决跨域问题(vue.config.js结合axios)
一、问题描述在本地开发过程中,调用后端提供的接口获取数据将获取的数据渲染到页面中,但是浏览器报错:// 控制台报错信息Access to XMLHttpRequest at 'http://x.x.x.x/app/v1_0/user/followings' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value原创 2021-07-17 16:20:48 · 971 阅读 · 0 评论 -
解决后端返回数据中的大数字问题(使用第三方包json-bigint )
JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得 JavaScript 不适合进行科学和金融方面的精确计算。Math.pow(2, 53) // 90071992547409929007199254740992 // 90071992547409929007199254740993 // 9007199254740992Math.pow(2, 53) === Math.pow(2, 53) + 1// true原创 2021-07-17 14:55:41 · 1872 阅读 · 2 评论 -
Vue移动端项目——搜索联想建议功能的实现(结合watch属性和使用lodash防抖节流)
搜索联想建议1. 基本思路:当搜索框输入内容的时候,请求加载联想建议的数据将请求得到的结果绑定到模板中2. 基本功能一、将父组件中搜索框输入的内容传给联想建议子组件二、在子组件中监视搜索框输入内容的变化,如果变化则请求获取联想建议数据三、将获取到的联想建议数据展示到列表中父组件完整代码:<template> <div class="search-container"> <!--搜索栏--> <form action="/原创 2021-07-09 11:58:34 · 4129 阅读 · 8 评论 -
处理相对时间(Day.js、Moment.js)(案例:结合vue的过滤器使用)
推荐两个第三方库:Moment.jsDay.js两者都是专门用于处理时间的 JavaScript 库,功能差不多,因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些,因为它采用了插件化的处理方式。Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样,如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。Day.js 可以运行在浏览原创 2021-07-08 01:42:39 · 471 阅读 · 2 评论 -
关于第三方图片资源403问题
为什么文章列表数据中的好多图片资源请求失败返回 403?这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容,而第三方平台对图片资源做了防盗链保护处理。1. 第三方平台怎么处理图片资源保护的?服务端一般使用 Referer 请求头识别访问来源,然后处理资源访问。2. Referer 是什么东西?扩展参考:http://www.ruanyifeng.com/blog/2019/06/http-referer.htmlReferer 是 HTTP 请求头的一部分,当浏览器向 Web 服务器原创 2021-07-08 01:17:18 · 236 阅读 · 0 评论 -
CSS——设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)
设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)原创 2021-07-08 01:09:44 · 2014 阅读 · 0 评论 -
Vue项目中 css样式的作用域(深度作用选择器)
vue官方文档父组件对子组件设置的样式,只能作用到子组件的根节点上!!!原创 2021-07-07 16:06:10 · 201 阅读 · 0 评论 -
Vue移动端项目——字体图标的使用
使用 iconfont 制作字体图标设计师为我们单独提供了设计稿中的图标,为了方便使用,我们在这里把它制作为字体图标。制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/。(1)登录 iconfont(2)创建项目项目名称:头条移动端项目描述:可选的FontClass/Symbol 前缀:toutiao-Font Family:toutiao注意:Font Class 和 FontFamily 最好符合上述规则,例如:foo- 和 foo、a原创 2021-07-06 09:56:32 · 1172 阅读 · 1 评论 -
Vue移动端项目——Vant 移动端 REM 适配
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。(1)使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)安装依赖:# yarn add amfe-flexiblenpm i amfe-flexible然后在 mai原创 2021-07-05 21:28:34 · 1347 阅读 · 1 评论 -
Vuex在项目中使用
案例1:案例2:原创 2021-07-05 11:34:14 · 87 阅读 · 0 评论 -
vue-cli4.x 中 配置允许跨域请求
在项目根目录下创建vue.config.js文件:vue.config.js:module.exports = { devServer: { host: 'localhost', port: 8080, https: false, open: false, // 配置自动启动浏览器 hotOnly: true, // 是否热更新 proxy: { '/api': { // 路径中有 /api 的请求都会走这个代理 tar.原创 2021-07-03 23:53:20 · 1089 阅读 · 5 评论 -
concurrently同时开启多个监听服务
当我们使用nodejs和vue混合开发的时候。当要同时启动后台服务,和前端服务的时候,我们可以使用concurrently一、安装concurrently包npm install concurrently --save-dev二、配置配置vuecli创建的项目中的packag.json文件:2. 配置node后端项目中的package.json文件:三、使用运行 npm run dev 命令,即可同时开启前端项目和后端项目...原创 2021-07-03 15:46:16 · 361 阅读 · 0 评论 -
Webpack的使用
webpack官方文档一、webpack打包命令二、webpack使用配置文件webpack.config.js:/** webpack的默认配置文件* webpack 在打包的时候会来读取使用这个配置文件* 如果你的文件名不是webpack.config.js,则必须手动告诉webpack,你使用的配置文件名字叫什么* 注意: 由于webpack 是基于Node.js 开发运行的一个工具,所以它的配置文件也是运行在Nodejs中的* */const path = .原创 2021-07-01 21:11:41 · 206 阅读 · 2 评论 -
Vue项目部署,打包发布上线
参考vuecli官方文档一、构建打包在发布上线之前,我们需要执行构建打包,将 .less、.vue、.js 等相关资源进行编译打包,转换成浏览器可以直接识别运行的普通 css、js、html。# yarn run build 或者 yarn buildnpm run buildVueCLI 会把打包结果生成存储到项目的 dist 目录中。正确的话应该会得到这样一个打包结果:二、本地预览测试打包结果注意:不能直接双击打开 index.html 运行。将 dist 放到一个 Web .原创 2021-06-29 20:42:45 · 4543 阅读 · 7 评论 -
axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)
axios官方文档一、请求拦截器设置headers,给所有请求加上Authorization:token值二、响应拦截器直接去访问/article,发现可以进入到article内容管理页面原因是在vue路由拦截器中,我们是这样来判断用户是否有权限访问除了登录页面之外的其他页面:路由导航守卫Vue-router官方文档我们希望这种用户自己伪造了user来访问页面时,都跳转到登录页面,让用户去登陆(只有用户登录成功后,本地存储中才会生成一个user,里面保存了后端响应给用户.原创 2021-06-29 13:32:52 · 2516 阅读 · 6 评论