vue
文章平均质量分 71
vue自学笔记
十九万里
扶我起来 我还能继续学!!!
展开
-
vue面试题理解12-11
1、diff算法diff全称是difference 中文就是差异的意思,diff算法顾名思义就是用来找到差异点 这就需要我们要有一个本体和一个参考物,用来进行对比,这就是diff算法的本质比较本体和参照物这种方法就是diff 所以 说我们有多种diff方法多种diff方法就是称为diff算法的实现逻辑在前端中 diff算法的本体和参照物都是虚拟的dom虚拟dom: 本质就是一个对象 改对象描述了一个ui节点所对应的一些必要信息常用的方法是把真实dom虚拟成一个对象:注:一般是用对象,也可原创 2021-12-11 14:59:49 · 945 阅读 · 0 评论 -
Vue—Router基础知识学习
1、路由前端路由核心:改变URL 但页面不进行整体的刷新1、URL的hash锚点 (#),本质上是改变window.location属性,我们可以通过直接赋值location.hash来改变href,但页面不刷新。2、HTML5的history模式:pushStatehistory接口是html5的接口,有五种模式改变URL而不刷新页面。3、HTML5的history模式:replaceState4、HTML5的history模式:go2、安装npm install vue-router原创 2021-11-22 19:18:11 · 2021 阅读 · 0 评论 -
用vue想拿20k,面试题要这样答(源码版)
资料来源视频:用vue想拿20k,面试题要这样答文章是在看完视频之后总结的笔记 这个视频我觉得他将的好是在于直接去解析vue的源码,从源码分析问题,简而易懂且有说服力。总结:一共9节9个小知识点1、v-if和v-for的比较2、vue组件data函数形式3、key的作用4、diff算法5、组件化6、vue设计理念7、MVC MVP 和MVVM8、vue优化9、vue3特性1、v-if和v-for的那个优先级更高,如果两个同时出现,应该怎么优化得到更好的性能先上结论:v-for优原创 2021-10-07 18:17:57 · 3145 阅读 · 9 评论 -
vue3视频学习笔记
一、vue3.0基础vue3.0目前是国内最火的开发框架,2020.9.18发布vue3.0正式版目前支持vue3.0的ui组件库:ant-design-vue element-plus vant等学习的路线主要是vue3.0文档二、vite的使用vite是一个原生ESM驱动的web开发构建工具,在开发环境下基于浏览器原生ES inports开发可以用于快速构建vue3的工程化项目环境1、vite的基本使用npm init vite -app 项目名称cd 项目名称yarnyar原创 2021-10-07 10:39:20 · 221 阅读 · 0 评论 -
vue组件开发原理 SSR及CSR基础
组件开发原理注:所有实现复杂功能的组件 都是从最开始的组件开始实现的,然后才是属性 各种值 这个和普通组件的引用方式是一样的 需要引入 注册组件 定义。需要的就是在基础组件上逐步添加我们所需要的功能。1、Type属性实现Type属性核心思路:通过prop传入值的不同切换需要的渲染类名,达到显示不一样的背景色的目的// 第一步 准备两个类名用于切换// 第二步 根据接受的props值改变对应的属性具体写法props:{ type:{ type:String, default:'defa原创 2021-10-05 20:38:33 · 726 阅读 · 0 评论 -
手写MVVM的实现原理
一、学习目标了解object,definProperty vue2.0使用都是这个响应式的监听手写并优化MVVM底层实现 实现v-text和v-model原理二、 数据响应式1数据响应式是什么数据发生变化,我们可以马上知道,并且做一些事情,关键在于知道数据发生变化并做出对应的操作2、如何实现一个数据响应 及区别vue2.0 对象属性拦截:Object.defineProperty (原生js的方法) 全局拦截vue3.0版本中:对象属性拦截 Proxy对象代理 部分拦截两者实现响应式原创 2021-10-04 10:25:50 · 554 阅读 · 0 评论 -
vue项目目录结构详解
├── README.md 项目介绍├── index.html 入口页面├── build 构建脚本目录│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面│ ├── build.js 生产环境构建脚本│ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新│ ├── dev-server.j原创 2021-06-21 16:20:27 · 384 阅读 · 0 评论 -
vue常见面试题
1.vue优点?答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了angular的特点,在数据操作方面更为简单;组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放d转载 2021-06-06 19:05:33 · 290 阅读 · 0 评论 -
vue切换中英文(i18n)
vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n兼容性:支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm)npm install vue-i18n 使用方法:1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)import VueI18n from 'vue-i18n'Vue.use(VueI18n) 2、准备本地的翻译信息const messag.转载 2021-06-06 12:19:07 · 1284 阅读 · 0 评论 -
如何完整的搭建一个vue项目(流程)
1、整个项目需求分析,按需求确定基本的技术栈,以及整体逻辑。2、vue-cli 脚手架搭建,涉及到webpack,如有脚手架不满足的需求,需要做调整,如项目环境在域名的二级目录,图片、字体路径修改等。3、开发、测试、预发布、正式环境配置,以及package.json script 脚本补充。4、涉及到https,需要兼容http。5、增加目录:assets、layouts 、api、component、libs、plugin、router、store。(有本地mock习惯的加上mock目录),sto原创 2021-06-06 12:03:33 · 1048 阅读 · 3 评论 -
vue 269个知识点(面试题)(转载)
要招一个会vue的开发者:作为面试官的你,你还会每次都只是问这些老土的问题吗?你对MVVM的理解是什么?你知道什么是双向绑定吗?你了解它的原理吗?说说vue的生命周期有哪些?组件通讯有哪些?你用过vuex吗?...作为面试者的你,在网上搜索下“vue面试题及答案”,看完后你是不是觉得:自己掌握了武林秘籍?能忽悠住面试官了?我熟练掌握vue了?记一次印象深刻的面试面试过很多小伙伴(要招会vue的开发者),没工作经验的,5年工作经验的,甚至10多年工作经验的...转载 2021-06-06 11:58:31 · 1294 阅读 · 0 评论 -
详解vue的diff算法
前言我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM,当virtu.转载 2021-06-06 10:51:25 · 442 阅读 · 0 评论 -
vue2和vue3的区别
1、vue2 和vue3双向数据绑定原理不同vue2的数据绑定是利用Object.definePropet()对数据进行劫持 结合 发布订阅模式实现vue3利用Proxy API对数据代理实现两者区别:defineProperty只能监听某个属性,ProxyAPI可以进行全局监听proxy可以监听数组,不用单独对数组进行异性操作,可以检测到数组内部的变化paoxy可以直接绑定整个对象,省去for in 闭包等内容来提升效率2、 vue3默认进行懒观察(lazy observation)。原创 2021-06-03 15:24:59 · 5041 阅读 · 0 评论 -
vue优化
编码阶段尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件在更多的情况下,使用v-if替代v-showkey保证唯一使用路由懒加载、异步组件防抖、节流第三方模块按需导入长列表滚动到可视区域动态加载图片懒加载SEO优化预渲染服务端渲染SSR打包优化压缩代码Tree Shaking/Scope Hois原创 2021-06-02 19:54:08 · 199 阅读 · 1 评论 -
axios相关配置属性
url是用于请求的服务器URLmethod是创建请求时使用的方法,默认是getbaseURL将自动加在url前面,除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URLtransformRequest允许在向服务器发送前,修改请求数据,只能用在’PUT’,'POST’和’PATCH’这几个请求方法headers是即将被发送的自定义请求头headers:{‘X-Requested-With’:‘XMLHttpRequest’},params是即将与请求原创 2021-06-02 11:09:25 · 976 阅读 · 0 评论 -
14万字手把手教你做vue电商后台管理(全)——技术栈(vue全家桶 Webpack Git axios Element-ui)
该项目是在年初的时候学习黑马程序员vue项目实战整理的笔记,自用的所有比较乱文章比较长但省去了看视频的时间,适合初学vue的同学部分章节还没完善,会持续更新如果你还没有vue基础知识,看这篇文章:vue.js基础还不会?——看这篇文章就够了文章每节目录:vue电商后台管理系统保姆级教程(导航目录)——找到比这更详细的算我输文章视频链接:【2020年黑马最新】Vue实战项目:电商管理系统需要源代码和接口文档软件的同学可私聊我!!项目结构 :1.项目初始化2.登录和退出功能3.主.原创 2021-05-16 21:11:09 · 8553 阅读 · 21 评论 -
vue电商后台管理系统保姆级教程(导航目录)——找到比这更详细的算我输
该项目是在年初的时候学习黑马程序员vue项目实战整理的笔记,自用的所有比较乱现在复盘的时候决定把当时做项目的全部过程在走一遍文章比较长但省去了看视频的时间,适合初学vue的同学如果你还没有vue基础知识,看这篇文章:vue.js基础还不会?——看这篇文章就够了文章视频链接:【2020年黑马最新】Vue实战项目:电商管理系统需要源代码和接口文档软件的同学可私聊我!!项目结构 :1.项目初始化2.登录和退出功能3.主页布局和功能实现4.用户列表布局和功能实现5.用户添加,修改删除.原创 2021-05-16 21:03:42 · 1674 阅读 · 3 评论 -
axios详解
文章目录 axios是干啥的原生XMLHttpRequest实现axios介绍发送并发请求 axios API创建一个实例Config配置选项默认设置全局默认设置实例中自定义默认值设置的优先级 响应信息(response schema)拦截器interceptors...转载 2021-05-16 10:40:19 · 455 阅读 · 0 评论 -
vue电商后台管理系统保姆级教程(十五)——使用Echarts数据统计
15、Echarts数据统计15.1 通过路由架子啊数据报表组件效果图:新建vue ,在路由中导入注册:注册为子路由:面包屑导航和卡片视图:15.2 安装Eharts并渲染Demo图表在可视化面板中安装echarts组件:在官网中学习(安装)1、导入echart2、3、调用init函数:在monted函数中初始化init函数:此时页面上的函数已经被加载完毕4、准备数据项:5.把option数据设置为mychart的图形:API:15.3 获取折线图数据并渲染图表发起原创 2021-05-15 19:03:09 · 1366 阅读 · 0 评论 -
vue电商后台管理系统保姆级教程(十一)——分类参数
11、分类参数11.1 介绍分类参数功能的作用只允许选择三级分类:11.2 通过路由加载分类参数组件新建组件页面,初始化:在路由中导入:子路由组件规则:11.3 渲染分类参数页面的基本ui结构面包屑,卡片视图 table栏面包屑:黄色提示框:按需导入,全局注册自定义关闭按钮:带icon:选择商品区域:添加样式:上下边框:11.4 调用API获取商品分类数据列表API:get请求:定义数组:定义函数:打印出来11.5 渲染商品分类的原创 2021-05-15 14:01:41 · 982 阅读 · 2 评论 -
vue电商后台管理系统保姆级教程(十)——商品分类
10.1 介绍商品分类功能的作用效果图:三级子分类:可以添加和删除分类:10.2 创建goods-cate子分支并push到码云Git branch 查看当前分支Git checkout -b doods_cate穿创建新分支Git branch 查看当前分支Git push -u orgin goods_cate 在云端中新建goods_date分支10.3 通过路由加载商品分类组件创建cate.vue,创建结构,行为,样式在路由中加载,注册称为children子路由:原创 2021-05-13 22:20:00 · 4125 阅读 · 22 评论 -
vue电商后台管理系统保姆级教程(九)——分配权限 角色
9.1 弹出分配权限对话框并请求权限数据点击按钮弹出分配权限。为分配权限按钮绑定click事件定义事件:写分配权限对话框的结构:在date中定义数据布尔值:api:9.2 初步配置并使用el-tree树形控件写出基本结构:使用el-tree组件,按需导入需要在date中定义组件属性:9.3 优化树形控件的展示效果控件前面有一个复选框,使用树形控件的属性首位-checkbox和默认展开所有节点:9.4 分析已有权限默认勾选的实现思路element-ui属性:写入属性和原创 2021-05-13 22:18:23 · 1479 阅读 · 2 评论 -
vue电商后台管理系统保姆级教程(八)——角色列表结构功能
8、角色列表8.1 通过路由展示角色列表组件在power中新建一个roles.vue(角色列表)初始化基本结构:在路由中加载导入:8.2 绘制基本布局结构并获取列表数据效果图:面包屑导航:卡片视图:API:渲染数据:定义数据date:生命周期函数:8.3 渲染角色列表数据先渲染索引列:优化样式:在索列之前加和 展开列:8.4 说明角色列表需要完成的功能模块现在还没有具体的样式,后面会写角色信息的添加,删除功能前面做了,所以这里就不写了点击对应原创 2021-05-11 19:47:36 · 3070 阅读 · 38 评论 -
vue电商后台管理系统保姆级教程(七)——权限列表
7、权限列表7.1通过路由展示权限列表组件1、先创建 power文件夹里面写入Rights.vue 初始化代码结构在路由中导入文件:在home路由的子路由规则中定义子路由,组件就能通过路由的形式加载出来7.2 绘制面包屑导航和卡片视图效果图:面包屑导航:卡片视图:7.3 调用API获取权限列表的数据API接口:先定义date数据,放一个rightsLists(权限列表)定义方法:请求数据,判断是否成功,成功则返回数据这样就获取到列表了,下节渲染列表7.4 渲染权原创 2021-05-11 18:06:18 · 793 阅读 · 7 评论 -
vue电商后台管理系统保姆级教程(六)——用户添加,修改,删除功能实现
6、 用户添加,修改,删除功能6.1 渲染添加用户的对话框使用elementui中的dialog的对话框,按需导入,全局注册。把ui结构 放到页面中:添加用户的对话框:需要定义一个布尔值,addDialogVisible 在date中定义此数据默认false为隐藏为添加按钮点击添加单机事件,绑定addDialogVisible为true 点击后对话框展示出ture,6.2 渲染添加用户的表单总结:写出ui结构,然后再数据中写数据,验证规则:rules:验证规则:model:数据原创 2021-05-11 16:08:35 · 3900 阅读 · 4 评论 -
vue电商后台管理系统保姆级教程(五)——用户列表布局和功能的实现
5、用户列表布局和功能实现5.1 通过路由的形式展示用户组件列表1、点击用户列表,在home主体区域展示用户列表区域效果图:2、新建user.vue(用户列表页面)及结构样式行为区域3、通过路由把页面展示出来:导入user组件在home组件中定义子组件,在home的路由规则中定义user子组件规则:5.2 在sessionStorage中保存左侧菜单栏利用到element中导航菜单的default-active组件:这里是写死的。那咱们把他动态写入呢?把当前点击展开的页面原创 2021-05-10 18:27:36 · 1918 阅读 · 5 评论 -
vue电商后台管理系统保姆级教程(四)——主页布局和功能实现
4、主页布局和功能实现4.1基本的主页布局1.在home.vue组件中使用element组件页面布局容器直接使用:先在element.js中注册组件在home.vue中写结构和样式效果图:4.2 美化header区域使用flex布局:这些就比较容易了我不详细写了最终效果:4.3 实现导航栏的基本结构效果图:4.3 通过axios拦截器添加token验证通过接口获取菜单的数据4.4 获取左侧菜单栏数据在接口文档中查看接口属性,如下childern:二级菜单原创 2021-05-10 18:26:37 · 2071 阅读 · 7 评论 -
vue电商后台管理系统保姆级教程(三)——主页布局,登录和退出功能
3、主页布局,登录和退出功能3.1登录概述http无状态:如果 前端和后台接口不存在跨域问题,那么使用cookie和session来保持登录状态如果存在跨域问题,使用token维持状态。3.2 token原理分析3.3登录功能实现步骤:1、打开项目文件后在控制台创建一个新的分支,当这个分支完成之后,在合并到master分支上创建分支:3.4梳理项目结构在可视化面板中启动appmain.js是整个项目的入口文件路由写在router.js中需要导入的文件都在此导入页原创 2021-05-10 18:25:51 · 1688 阅读 · 4 评论 -
vue电商后台管理系统保姆级教程(二)——项目初始化
2、项目初始化2.1使用vue-cli脚手架搭建项目脚手架全局安装一次就ok了。不用重复安装安装node后运行npm install @vue/cli//检查是否安装成功vue -V出现版本号就安装成功了vue-cli安装安装完成vue-cli3.0之后可以用可视化面板来创建项目,在可视化面板中安装element-ui和axios依赖2.2配置码云注册账号,添加公钥gitee添加公钥方法将本地项目托管到码云在码云中新建仓库gitee创建仓库建立好仓库之后输入如下代原创 2021-05-10 18:25:11 · 1000 阅读 · 0 评论 -
vue电商后台管理系统保姆级教程(一)——项目概述
1、项目概述jwt:状态保持原创 2021-05-10 18:24:28 · 601 阅读 · 0 评论 -
eslintrc.js配置文件详解及参考文档
公司最近引入vue框架,跟着视频学习eslint配置规则,特将项目使用配置及其结合网上资料做了整理,当做笔记,并行希望能帮助到其他人。 一.eslint配置文件主要作用 [1]检测代码合法性(JavaScript、JSX、ES6、Html、JSDoc、posts、vue、React、AngularJS、React Native、mocha) ...转载 2021-05-07 23:27:15 · 1117 阅读 · 1 评论 -
10分钟了解Vuex的使用步骤和核心特性
知识点:vuex概述vuex的基本使用vuex的核心特性1、vuex概述什么是vuexvuex是实现全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享vuex管理数据的优点1、能够在vuex中集中管理共享的数据,便于开发和后期的维护2、能够高效的实现组件之间的数据共享,提高开发效率3、存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新2、vuex的基本使用步骤1、 安装安装npm i vuex --save2、在src文件目录下新建st原创 2021-05-01 21:24:33 · 1022 阅读 · 10 评论 -
vue.js基础还不会?——看这篇文章就够了
知识点:vue.jsj介绍指令修饰符计算属性侦听器过滤器生命周期组件路由一、vue.js介绍vue是一套用于构建用户界面的渐进式框架vue的核心只关注视图层,不仅容易上手,还便于与第三方库或既有项目整合二、指令(一)、指令本质就是自定义属性VUE中指令都是v-开头(二)、内置指令1、v-cloak防止页面加载时出现闪烁问题2、v-textv-text指令用于将数据填充到标签中,作用与插值表达式,但是没有闪动问题如果数据中有html标签会将html标签一并输出原创 2021-04-30 22:48:32 · 10736 阅读 · 44 评论