随笔分类 - Vue3/Vue2框架生态链
摘要：问题背景：项目里面有用到背景图片，开发模式下正常，打包之后发现报404错误。查看发现是背景图片引用路径出错。 解决方法： build下由原来的相对路径 "./" 改为绝对路径 "/" 详细缘由： vue项目在打包之后背景图片访问出错？ 首先，出错点在url-loader上面。 这里解释一下上面这段u
阅读全文
摘要：弄明白： v-model 是什么的语法糖？ vue2 对原生组件究竟做了什么特殊处理？ 弄明白： v-model 到底是单向数据流还是数据双向绑定？ 弄明白： v-model 在语法糖之外的『副作用』？ 学会如何让你的组件也支持 v-model 语法。 一、v-model 本质是语法糖 在 vue
阅读全文
摘要：vue-router是vue单页面开发的路由，就是决定页面跳转的！ <router-link> 组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址。 Props 属性 1、to 表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()。 2、repl
阅读全文
摘要：正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。 有多种方式可以在路由导航发生时执行钩子：全局的、单个路由独享的、或者组件级的。 一、全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子： 同样可以注册一个全局的 after
阅读全文
摘要：使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 history 模式下可用。 当创建一个 Router 实例，你可以提供一个 scr
阅读全文
摘要：vue除了常规用法外，还有一些实例属性和方法，在此总结记录下 Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分。 一、实例属性 1、vm.$data：获取data里的数据，相当于用this获取 2、vm.$options：用来获取定义在data外的数据
阅读全文
摘要：一、在参数中自定义正则 当定义像 :userId 这样的参数时，我们内部使用以下的正则 ([^/]+) (至少有一个字符不是斜杠 / )来从 URL 中提取参数。这很好用，除非你需要根据参数的内容来区分两个路由。想象一下，两个路由 /:orderId 和 /:productName，两者会匹配完全相
阅读全文
摘要：在项目中我们引入了 Vue：import Vue from 'vue'。那么问题是vue到底从哪里来的？从node_modules中来。在node_modules路径下存在vue文件夹，vue文件夹中存在一个package.json文件。在这个文件中存在两个配置字段，它们都是程序的主入口文件。 "m
阅读全文
摘要：刚开始使用vue的时候容易被里面的样式搞懵： 样式可以在main.js中引入，在模块js文件中引入，在组件中的style标签引入，在组件中的script标签引入，还可以在index.html的body中引入。 我不禁要问: 1、从不同位置引入的样式到底是什么关系？ 2、在实际定义样式时应该定义在哪个
阅读全文
摘要：其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。 我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的D
阅读全文
摘要：1、[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined 注意，只要出现Error in render，即渲染时候报错，此时应该去渲染位置去找错误，而不是函数里面。 今天就碰到这个错误，我一直只注
阅读全文
摘要：问题背景： vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://loc
阅读全文
摘要：1、大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 安装：npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下，然后npm ru
阅读全文
摘要：一、vue-cli4 配置gzip文件处理 1、第一步安装插件依赖，现在最新版本为7，实测有兼容问题，暂时使用5 npm i compression-webpack-plugin@5.0.1 --save-dev 2、在vue.config.js文件中配置 const CompressionWebp
阅读全文
摘要：计算属性不是API，但它是Watcher类最复杂的一种实例化的使用，还是很有必要分析的。其实主要就是分析计算属性为何可以做到当它的依赖项发生改变时才会进行重新的计算，否则当前数据是被缓存的。计算属性的值可以是对象，这个对象需要传入get和set方法，这种并不常用，所以这里的分析还是介绍常用的函数形式
阅读全文
摘要：1、控制table某些行数不显示 下载附件的需求，有些行有附件，有些没有，所以需要过滤，重点是：Array.filter()使用 2、elementUI的table自定义合计方法 3、elementUi的tabel组件如果要显示合计的话，下面的prop是必须得加的 4、elementUi的tabel
阅读全文
摘要：两个需求：1、用户点击购买需要下单，并跳转到订单页面，但是如果用户没有登录的话，中间有登录验证，会拦截；2、点击购买的时候，登录校验成功了，跳转到订单页面时，订单已创建，去付款即可。3、处理拦截至登录页，然后点去注册页，完善信息页，再回登录页，再登录进去，依然进去目标order页 一、解决方案对1：
阅读全文
摘要：一、路由模式解析 要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。 如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和v
阅读全文
摘要：ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充，官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。 一、单个输入框的 设置选择七天之前到今天的日期 这个return刚开始有点难理解
阅读全文
