Vue
文章平均质量分 52
从基础到实战,记录个人的 Vue 学习笔记
码小余の博客
越努力,越幸运!
个人博客:https://extheor.github.io/ 技术/自考
方向:Web前端
展开
-
Elementui 自定义loading
/* 隐藏原loading *//deep/ .el-loading-spinner .circular { display: none;}/* 画出新的loading *//deep/ .el-loading-spinner { background: url(../assets/Ripple-1s-200px.svg) no-repeat; background-size: 48px 48px; height: 100%; left: 50%;}...原创 2021-11-24 14:23:35 · 1225 阅读 · 0 评论 -
修改element-ui源码使日期范围date-picker支持年范围选择
下载 https://gitee.com/fushengruomengzhang_admin/element dev 分支的代码。然后 cnpm install 然后 cnpm run dist将dist后的lib文件替换掉自己项目中 node_modules 中的 element-ui 中的 lib 文件夹,重新运行即可使用具体用法,和 daterange 等一致<template> <div name="index" class="full_screen"> &原创 2021-09-01 12:51:38 · 977 阅读 · 5 评论 -
js 遍历大文件
js 遍历大文件通过nodejs+socketio+vue-socket完成遍历大文件操作服务端const fs = require("fs");const path = require("path");const http = require("http");const express = require("express");const app = express();const server = http.createServer(app);const io = require(原创 2021-08-25 10:08:43 · 364 阅读 · 0 评论 -
Vue首屏加载白屏问题及解决方案
Vue首屏加载白屏问题及解决方案首先说一下首页加载为什么会白屏?先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段FP(全称“First Paint”,翻译为“首次绘制”) 是时间线上的第一个“时间点”,它代表浏览器第一次向屏幕传输像素的时间,也就是页面在屏幕上首次发生视觉变化的时间。注意:FP不包含默认背景绘制,但包含非默认的背景绘制。<div id="app"></div> 页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来原创 2021-08-12 16:06:56 · 8721 阅读 · 1 评论 -
加快Vue项目的开发速度
加快Vue项目的开发速度现如今的开发,比如是内部使用的管理平台这种项目大都时间比较仓仓促。实际上来说在使用了webpack + vue 这一套来开发的话已经大大了提高了效率。但是对于我们的开发层面。还是有很多地方可以再次提高我们的项目开发效率,让我们更加专注于业务,毕竟时间就是生命。下面我们挨个来探讨。巧用WebpackWebpack 是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过 Webpack 来帮我们做一些自动化的事情。首先我们要了解 require.context原创 2021-06-24 15:43:10 · 416 阅读 · 4 评论 -
vue新版router.addRoute基础用法
vue新版router.addRoute基础用法新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由在添加子路由的时候比如原现有路由const routes = [ { path: '/', name: 'Login', component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue原创 2021-05-24 18:30:29 · 26894 阅读 · 11 评论 -
从零打造 Vue 聊天组件
啥都不会最近听说了那个 socket.io,感觉就很吊,就学习了一下什么是 socket.io要理解 socket.io,不得不谈谈WebSocket在 HTML5 之前呢,因为 [http 协议是无状态的](#http 协议是无状态的),要实现浏览器与服务器的实时通讯,如果不使用 flash、applet 等浏览器插件的话,就需要定期轮询服务器来获取信息。这造成了一定的延迟和大量的网络通讯。随着 HTM5 的出现,这一情况有望彻底改观,它就是 WebSocket。什么是 http 无状态协议原创 2021-04-06 22:41:05 · 5079 阅读 · 0 评论 -
CSS transform 使 fixed 定位失效?
CSS transform 使 fixed 定位失效?1. 最终实现效果如下看似简单的一个动画,却出现了种种bug,也不叫bug,毕竟是W3C官方的嘛,整整耗费了我一下午的时间去搞它。2. 布局样式(关键点)先来看一下我的布局吧首先 index_bar_container 是 cl_header 的父元素(坑)就先看这个父子关系吧,其他的都一样了<!-- 收藏位置弹窗 start --><div v-if="show" :class="isShow ? 'in原创 2021-04-01 10:48:02 · 4808 阅读 · 0 评论 -
Computed property “value1“ was assigned to but it has no setter.
在写 Vue 项目时出现了以上报错信息,特此记录computed: { value1() { return this.value },}意思是说:我在计算属性里修改 value1 这个属性时,没有使用 setter ,导致报错改成以下写法即可computed: { value1: { get() { return this.value }, set() { return.原创 2021-03-28 23:16:36 · 4311 阅读 · 0 评论 -
Vue 面试题
Vue 面试题背就有分1. v-if 和 v-show 的区别是什么v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的: 如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁原创 2020-12-31 20:32:49 · 3783 阅读 · 0 评论 -
网易云音乐项目
网易云音乐项目壹之章 - 准备1. 项目描述(1)此项目为一个前后台分离的仿网易云音乐项目的 SPA(2)包括 发现音乐 / 视频 / 朋友 / 直播 / 私人FM 等功能模块(3)前端:使用 Vue 全家桶 + iView + Axios + ES6 + Webpack 等技术(4)后端:使用网易云音乐 API(5)采用模块化、组件化、工程化的模式开发2. 项目功能界面3. 技术选型4. 前端路由5. API/接口网易云音乐 NodeJS 版 API (binaryify原创 2020-12-06 09:46:26 · 8315 阅读 · 6 评论 -
Vuex的基本使用
VuexVuex 的基本使用1.安装vuex依赖包npm install vuex --save2.导入vuex包import Vuex from 'vuex'Vue.use (Vuex)3.创建store对象const store = new Vuex.Store ({ // state中存放的就是全局共享的数据 state: { count: 0 }})4. 将 store 对象挂载到 vue 实例中new Vue({ el: '#app',原创 2020-11-12 21:51:22 · 4571 阅读 · 0 评论 -
Vue 电商PC后台管理(ElementUI)
Vue 电商PC后台管理(ElementUI)1.项目概述1.1电商项目基本业务概述根据不同的场景,电商系统一般都提供了PC端、移动 APP、移动 Web、微信小程序等多种终端访问方式。1.2电商后台管理系统的功能电商后台 管理系统同用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。1.3电商后台管理系统的开发模式(前后端分离)电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA项目。1.4电商后台管理系统的技术选型1.前端项目技术栈原创 2020-11-12 11:42:48 · 4066 阅读 · 5 评论 -
Vue前端路由
Vue 前端路由1.路由的基本概念与原理1.1路由路由是一个比较广义和抽象的概念,路由的本质就是对应关系。在开发中,路由分为:后端路由前端路由1.后端路由概念: 根据不同的用户URL请求,返回不同的内容本质: URL请求地址与服务器资源之间的对应关系2.前端路由(SPA)1.SPA后端渲染(存在性能问题)Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)SPA (Single Page Application)单页面应用程序: 整个网站只有一个页面,原创 2020-11-04 14:10:11 · 1920 阅读 · 0 评论 -
Vue购物车案例
Vue购物车案例需求分析1.按照组件方式实现业务需求根据业务功能进行组件划分标题组件(展示文本)列表组件(列表展示、商品数量变更、商品删除)结算组件(计算商品总额)实现步骤1.功能实现步骤实现整体布局和样式效果划分独立的功能组件组合所有的子组件形成整体结构逐个实现各个组件功能标题组件列表组件结算组件CSS 样式<style type="text/css">.container {}.container .cart { wid原创 2020-11-03 11:13:33 · 2394 阅读 · 0 评论 -
Vue图书管理案例
Vue图书管理案例1.图书列表实现静态列表效果基于数据实现模板效果处理每行的操作按钮编号名称时间操作1三国演义2020-11-02修改 | 删除2水浒传2020-11-02修改 | 删除3红楼梦2020-11-02修改 | 删除4西游记2020-11-02修改 | 删除代码实现@click.prevent - 禁止 a 标签的默认事件<tbody> <tr :key='item.id' v原创 2020-11-02 19:46:43 · 3518 阅读 · 1 评论 -
Vue.set()详解
Vue.set( target, propertyName/index, value )参数:{Object | Array} target{string | number} propertyName/index{any} value返回值:设置的值。用法:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this原创 2020-11-02 19:44:45 · 4480 阅读 · 2 评论 -
Vue过滤器
Vue过滤器自定义过滤器// 首字母大写Vue.filter("upper", function(val){ return val.charAt(0).toUpperCase() + val.slice(1)})// 首字母小写Vue.filter("lower", function(val){ return val.charAt(0).toLowerCase() + val.slice(1)})const app = new Vue({ el: "#app",原创 2020-11-02 19:43:53 · 1958 阅读 · 0 评论 -
Vue自定义指令
Vue自定义指令不带参数的自定义指令为何需要自定义指令?内置指令不满足需求自定义指令的语法规则(获取元素焦点)Vue.directive('focus', { inserted: function(el){ // el 表示指令所绑定的元素 // 获取元素的焦点 el.focus(); }});const app = new Vue({ el: "#app", data: {},});注意:Vue实原创 2020-11-02 19:43:21 · 2650 阅读 · 1 评论 -
Vue CLI
Vue CLI安装Node 版本要求Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。可以使用下列任一命令安装这个新的包:npm install -g @vue/cli# ORyarn global add @vue/cli你还可以用这个命令来检查其版本是否正确:vue --version升级如需升级全局的 Vue CLI 包,请运行:npm原创 2020-11-02 19:42:49 · 2023 阅读 · 0 评论 -
Vue动态组件
Vue动态组件通过组件的学习我们已经了解了组件的基本使用,但是我们以前使用的组件都是静态的,也就是说它是固定名字的那一个组件,今天我学习到了动态组件,它可以动态的更改自己的组件名,感觉很方便~我们可以在组件中通过 :is 来实现动态组件具体代码如下<div id="app"> <div id="content"> <component :is="com"></component> </div>原创 2020-11-01 10:21:14 · 2051 阅读 · 0 评论 -
Vue插槽
Vue插槽和 HTML 元素一样,我们经常需要向一个组件传递内容,像这样:<alert-com1> <p>小心陈老师</p></alert-com1>Vue.component("alert-com1",{ template: ` <div class="alert"> <div class="content"></div> </div&原创 2020-11-01 10:20:43 · 1989 阅读 · 0 评论 -
Vue在组件上使用v-model
Vue在组件上使用v-model自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住:<input v-model="searchText">等价于:<input :value="searchText" @input="searchText = $event.target.value">当用在组件上时,v-model 则会这样:<custom-input :value="searchText" @input="searchTex原创 2020-11-01 10:20:17 · 7381 阅读 · 5 评论 -
Vue组件传值
Vue组件传值什么是组件?这里有一个 Vue 组件的示例:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'}原创 2020-09-25 16:52:56 · 2438 阅读 · 0 评论 -
Vue生命周期
Vue生命周期下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。<div id="app"> <h1>{{ msg }}</h1></div>var app = new Vue({ el: "#app", data: { msg: "helloVue", className: "redBg" }, beforeCreat原创 2020-09-25 13:00:45 · 2459 阅读 · 0 评论 -
Vue动画实现
Vue动画实现过渡动画Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点这里是一个典型的例子:<div id="app"> <!-- 属性name会跟框架追加的类名一致 --> <transition name="fade"> <div v-if="isShow" class="cont原创 2020-09-25 12:08:27 · 2508 阅读 · 0 评论 -
Vue -- 指令【学习笔记】(持续更新)
Vue – 指令【学习笔记】(持续更新)记录了Vue第三天的学习笔记v-show注意,v-show 不支持 <template> 元素,也不支持 v-else。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。<div id="app"> <div v-show="shouye">首页</div> <div v-show="dong原创 2020-09-25 12:06:56 · 2406 阅读 · 2 评论 -
Vue版todolist案例
Vue版todolist案例todolist – 记录你的待办事项<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue版todolist案例</title> <style type="text/css"> *{ margin: 0;原创 2020-09-25 00:08:40 · 2997 阅读 · 0 评论 -
Vue侧边栏案例
Vue — 侧边栏案例使用 :class 的方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>菜单栏</title> <style type="text/css"> *{ margin: 0; padding: 0; } .page{ width: 100vw; height: 1原创 2020-09-24 00:30:11 · 2785 阅读 · 0 评论 -
Vue介绍
Vue介绍可以从Vue官方文档中学习,也可以从B站中去学习,我是看了两个课程大纲Vue是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。起步尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可原创 2020-09-19 17:52:26 · 2328 阅读 · 0 评论