Vue
Vue相关的全家桶技术集合
iChangebaobao
菜鸟的前端进击之路
展开
-
[Vue]面试官:Vue3.0的设计目标是什么?做了哪些优化?
面试官:Vue3.0的设计目标是什么?做了哪些优化?转载 2021-02-04 09:36:24 · 267 阅读 · 0 评论 -
[Vue]Vue3.0+Element Plus搭建项目
Vue3.0+Element Plus搭建项目一、升级 vue-cli二、新建vue3.0项目三、安装Element Plus一、升级 vue-cli首先在终端输入以下命令,查看脚手架版本vue -V本次使用用 vue-cli@4.5以上的版本,执行以下命令进行升级npm install -g @vue/cli二、新建vue3.0项目vue3.0中文官网装好后终端 cd 至你的项目目录,执行下面命令新建vue3.0项目vue create vue3-project选最后一个原创 2021-01-29 12:00:15 · 1799 阅读 · 0 评论 -
[Vue源码] Vue中v-model的实现原理及如何自定义v-model
1、Vue中v-model的实现原理组件 v-model 可以看成是 value+input 方法 的语法糖<el-checkbox :value="" @input=""></el-checkbox> <el-checkbox v-model="check"></el-checkbox>原理: 组件的 v-model 将默认转化成 value+inputconst VueTemplateCompiler = require('vue-templat原创 2020-10-29 11:42:59 · 923 阅读 · 0 评论 -
[Vue源码] Vue中事件绑定@click的原理
1、Vue中事件绑定的原理Vue 的事件绑定分为两种:一种是原生的事件绑定<div @click="fn()"></div>另一种是组件的事件绑定<my-component @click.native="fn" @click="fn1"></my- component>理解:1.原生 dom 事件的绑定,采用的是 addEventListener 实现2.组件绑定事件采用的是 $on 方法原理:事件的编译:let compiler =原创 2020-10-29 09:01:52 · 3135 阅读 · 0 评论 -
[Vue源码] Vue中组件中的data为什么必须为函数?
1、 Vue中组件中的data为什么必须为函数? function VueComponent(){} VueComponent.prototype.$options = { data:{name:'huahua'} } let vc1 = new VueComponent(); vc1.$options.data = 'hh'; let vc2 = new VueComponent(); console.log(vc2.$options.data);理解:同一个组件被复原创 2020-10-28 17:33:01 · 176 阅读 · 0 评论 -
[Vue源码] Vue中组件渲染和更新过程
一、Vue中组件渲染和更新过程理解:渲染组件时,会通过Vue.extend方法构建子组件的构造函数,并进行实例化,最后手动调用$mount()进行挂载。const fn=Vue.extend();const component=new fn();更新组件时,会进行patchVnode流程,其核心是diff 算法源码:src/core/vdom/create-component.jsexport function createComponent ( Ctor: Class<Compo原创 2020-10-28 17:03:00 · 599 阅读 · 0 评论 -
[Vue源码] Vue中diff算法原理
一、 Vue中diff算法原理理解:1.先同级比较,在比较子节点2.先判断一方有儿子一方没儿子的情况3.比较都有儿子的情况4.递归比较子节点图:1、从头开始比较,最后的节点为新增的节点(从尾节点插入)2、从头开始,发现节点不一致,又从尾节点源码:src/core/vdom/patch.jsconst oldCh = oldVnode.children // 老的儿子 const ch = vnode.children // 新的儿子 if (isUndef(vnode.text))原创 2020-10-28 12:11:23 · 529 阅读 · 0 评论 -
[Vue源码] Vue中模板编译原理
1、将 template 转化成 render 函数function baseCompile ( template: string, options: CompilerOptions ) { const ast = parse(template.trim(), options) // 1.将模板转化成ast语法树 if (options.optimize !== false) { // 2.优化树 optimize(ast, options) } const code = generat原创 2020-10-20 09:28:34 · 185 阅读 · 0 评论 -
[Vue源码] Vue中响应式数据的原理
vue2.0 响应式数据的原理Vue2.0在初始化数据时,会给data中的属性使用Object.defineProperty重新定义所有属性,当页面取到对应属性时,会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作。Vue2.0源码:Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const原创 2020-10-10 18:13:06 · 217 阅读 · 0 评论 -
[Vue]Vue-Cli 用run serve启动项目后一片空白的问题,终端及浏览器均无报错!
前言今天粗略地又看了一遍 Vue-Router官网,本来想查漏补缺,没想到啊,导致项目运行出问题了。问题cnpm run serve后,终端及浏览器均无报错,找了半天原因,最终发现是路由router.js那里自己手贱粘贴了一段代码,多加了一个路由的独享守卫,如果不做处理的话,路由会一直没反应,自然就进入了beforeEnter函数这里,相当于被拦截,所以渲染不出对应的组件,啥也不是,散会!解决把这里注释掉就正常了,遇到Bug不要慌beforeEnter: (to, from, next) =&原创 2020-08-24 17:23:17 · 8029 阅读 · 0 评论 -
[Vue]Vue-cli3 脚手架打包常见问题解决方法
1、新手都遇到过,打包之后打开网页发现是空白的,发现报错是这样的,原因是打包之后找不到相应的css/js文件的路径解决:将vue.config.js中的publicPath改为'./'module.exports={ publicPath: './', // 相对于 HTML 页面(目录相同)}...原创 2020-08-05 15:54:20 · 1779 阅读 · 0 评论 -
[Vue]Vue cli3 打包build 区分测试环境和正式环境
https://blog.csdn.net/qq_37639389/article/details/97789966https://blog.csdn.net/linbenjian/article/details/85261201原创 2020-08-05 10:29:24 · 2359 阅读 · 0 评论 -
[Vue] Vant 实现下拉刷新功能
<template> <div class="common-container"> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished...原创 2020-04-28 11:28:40 · 3151 阅读 · 10 评论 -
[Vue]如何优雅的在 vue 中添加权限控制
如何优雅的在 vue 中添加权限控制原创 2020-04-27 18:30:21 · 235 阅读 · 0 评论 -
[Vue] 解决vant 无法修改组件的样式问题(deep、>>>)
首先我们应该知道在scoped里修改是无法做到修改vant样式的,这是外部引入的样式,下面的方法可以解决修改vant样式的同时,使用scoped,防止样式污染第一种:加上/deep/<style lang="scss" scoped> /deep/ .van-pull-refresh__head, /deep/ .van-list__error-text, /deep/ .v...原创 2020-04-14 16:14:42 · 6334 阅读 · 2 评论 -
[Vue]Vue-cli脚手架学习(四)——使用vant
1、安装安装 Vue Clinpm install -g @vue/cli创建一个项目vue create hello-world安装vantnpm i vant -S# 安装 Vue Clinpm install -g @vue/cli# 创建一个项目vue create hello-world# 安装vant npm i vant -S# 完整写法:npm ins...转载 2020-04-10 09:22:28 · 522 阅读 · 0 评论 -
[Vue]Vue-cli脚手架学习(五)——路由守卫,解决eslint报的语法错误、axios设置
router.jsimport Vue from 'vue'import VueRouter from 'vue-router' Vue.use(VueRouter)const routes = [ { path:'/',redirect:'/login' }, { path:'/login',component:()=>import ('@/comp...原创 2020-03-27 17:25:26 · 369 阅读 · 0 评论 -
[Vue]基于vue+swiper实现图片库列表点击查看大图,可左右切换(事件委托、动态数组、懒加载、缓存、节流防抖)
点我原创 2020-03-24 16:59:39 · 1274 阅读 · 0 评论 -
[Vue]Vue-cli脚手架学习(三)——项目上传码云/ 使用 Git
一、安装,使用码云[Git]安装,使用码云教程二、在码云中创建一个仓库,提交项目代码2.1 在新建的项目中按顺序执行//添加 .git 文件夹git init //查看状态git status//用来添加当前目录下的所有文件git add . //提交git commit -m "add files" //再查看状态,显示working tree cleang...原创 2020-03-23 11:13:34 · 685 阅读 · 0 评论 -
[Vue]关于Can't resolve 'sass-loader' in...错误的解决办法
https://blog.csdn.net/qq_24058693/article/details/80056557原创 2020-03-18 11:07:30 · 963 阅读 · 0 评论 -
[Vue] ECharts图表应用
ECharts 官网1. 下载ECharts图表依赖 npm install echarts --save2. 在使用图表的页面导入home.vue<template> <el-main> <div class="map1" id="map1"> </div> </...原创 2020-03-18 08:57:42 · 202 阅读 · 0 评论 -
[Vue]模拟车牌首位输入键盘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-03-11 08:47:03 · 671 阅读 · 0 评论 -
[Vue]ElementUI 多级菜单组件封装
基于ElementUI的项目,由于原本的navbar是写死的,所以自己封装菜单组件,让他能够不限子菜单渲染目录:数据结构menuList: [ { id: 0, type: "item", index: "home", lable: "首页", icon: "el-icon-circle-plus-outline", route: { ...原创 2020-03-10 16:04:59 · 2458 阅读 · 0 评论 -
[Vue] Vue后台模板汇总
vue-manage-systemvue-adminvue-element-admin原创 2020-03-09 17:38:15 · 357 阅读 · 0 评论 -
[Vue]Vue-cli脚手架学习(四)——Element-UI踩坑记
一、Element-UI踩坑问题:表单验证语句一直不执行this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; }});官方文档:经过排查,如...原创 2020-03-09 11:35:34 · 878 阅读 · 0 评论 -
[Vue]Vue+Element前端导入导出Excel(实践)
Vue+Element前端导入导出Excel(实践)原创 2020-03-06 17:58:32 · 317 阅读 · 0 评论 -
[Vue]elementui表单验证踩坑日记
https://blog.csdn.net/weixin_40837048/article/details/101016390原创 2020-03-03 17:27:40 · 317 阅读 · 0 评论 -
[Vue]vue拖拽上传文件实践
点我,去大佬博客看看原创 2020-03-03 11:52:02 · 986 阅读 · 0 评论 -
[Vue]自定义封装axios方法总结
导语:最近在用vue脚手架开发应用的过程中遇到了Ajax请求的问题,由于定制化比较明显,所以就到网上找一些自定义的方法,最后使用官方的方法成功的封装了自己需要的那种,现在就自定义的方法做一下总结。目录axios是什么如何使用axios自定义axiosaxios是什么axios官网axios是基于Promise的一款http客户端工具,用于在游览器和nodejs环境中进行请求...转载 2020-03-03 11:46:36 · 995 阅读 · 0 评论 -
[Vue]Vue-cli脚手架学习(二)——项目结构及配置
一、创建vue.config.js1.1 在创建的项目根目录下新建 vue.config.js 文件,用于自定义配置module.exports={ devServer:{ port:8081, host:'localhost', open:true, //浏览器自动访问 contentBase:'src',//指定托管的...原创 2020-03-01 12:20:21 · 183 阅读 · 0 评论 -
[Vue]Vue-cli脚手架学习(一)——Node\vue-cli安装
一、安装nodeJS1.1 安装进入node官网,下载64位安装包,一直点击下一步,按默认安装1.2 验证是否安装成功执行下面命令即可,出现版本即为安装成功,未成功的查看Path是否正确node -v二、安装cnpm2.1 安装淘宝镜像淘宝镜像官网 ,执行下面命令即可npm install -g cnpm --registry=https://registry.npm.taob...原创 2020-02-28 17:28:21 · 330 阅读 · 0 评论 -
[Vue] Vuex学习总结
运行cnpm i vuex -S在main.js 导入包import vuex from 'vuex'注册vuex到vue中Vue.use(Vuex)创建实例,得到一个数据仓储对象var store=new Vuex.Store({})使用:<button @click="$store.commit('reduce',{a:2,b:3})">减少</butt...原创 2020-01-22 10:15:23 · 199 阅读 · 0 评论 -
[Vue] NodeJS环境搭建(详细教程+解决踩坑),把Vue项目跑起来!
一、安装node.js1.从node.js官网下载并安装node.js,安装过程选择默认,直接next就行。(我是个有个性的人,我安装在E盘,新建了一个nodejs文件夹,安装目录:E:\nodejs)2. 配置一下node,新建两个文件夹node_cache和node_global,node_global:npm全局安装位置node_cache:npm缓存路径打开cmd命令行工具...原创 2020-01-20 11:20:34 · 2073 阅读 · 0 评论 -
[Vue]vue-devtools 安装
https://blog.csdn.net/weixin_38654336/article/details/80790698原创 2020-01-19 17:59:51 · 105 阅读 · 0 评论 -
[Vue]用图片修改CheckBox样式,实现全选多选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl...原创 2020-01-17 12:05:44 · 2082 阅读 · 0 评论 -
[Vue]封装MintUI中的轮播Swiper组件并使用
Swiper.vue<template> <div> <!-- 谁使用轮播图组件,谁为我们传递 imgList--> <!-- 此时,轮播图imgList应该是父组件向子组件传值来设置 --> <mt-swipe :auto="4000" class="mt-swipe"> <mt-swip...原创 2020-01-15 16:18:06 · 942 阅读 · 0 评论 -
[Vue] 路由vue-router两种跳转方式
<template> <div class="goods-list"> <!-- 两种跳转方式 --> <!-- 1.标签跳转 ,即使用 a 标签形式跳转 --> <!-- <router-link :to="'/home/goodsInfo/'+g.id" tag="div" class="goods-it...原创 2020-01-15 15:47:24 · 372 阅读 · 0 评论 -
[Vue]使用pdf.js实现在线预览pdf文件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>'Hello, world!' example</title></head><body><h1>'Hello, world!' example</h...原创 2020-01-10 17:07:13 · 3393 阅读 · 0 评论 -
[Vue]vue-preview的使用以及坑
首先贡献 vue-preview 的地址,如下https://github.com/LS1231/vue-previewvue-preview 的使用说明<template> <vue-preview :slides="slide1" @close="handleClose"></vue-preview></template> &l...原创 2020-01-09 12:15:32 · 2863 阅读 · 4 评论 -
[Vue]不要再找了,你想找的Vue相关开源组件几乎都在这
UI组件框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material ...原创 2020-01-06 08:35:39 · 1376 阅读 · 1 评论