分类：vue

2021
06-22

深入理解vue的使用

理解vue的核心理念使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:Vue.js（读音/vjuː/，类似于view）是一套构建用户界面的渐进式框架。这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念.那么,怎样理解什么是渐进式框架?在这之前,我们... 继续阅读 >
2021
06-19

详解Vue中的filter与directive

vue中的过滤器分为两种：局部过滤器和全局过滤器过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示(官方文档)<!--在双花括号中-->{{message|capitalize}}<!--在`v-bind`中--><divv-bind:id="rawId|formatId"></div>1、定义无参全局过滤器Vue.filter('capitalize',function(msg... 继续阅读 >
2021
06-19

详解Vue中的filter与directive

vue中的过滤器分为两种：局部过滤器和全局过滤器过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示(官方文档)<!--在双花括号中-->{{message|capitalize}}<!--在`v-bind`中--><divv-bind:id="rawId|formatId"></div>1、定义无参全局过滤器Vue.filter('capitalize',function(msg... 继续阅读 >
2021
06-19

从vue-router看前端路由的两种实现

随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高，单页应用（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：利用URL中的hash（“#”）利用Historyinterface在HTML5中新增的方法vue-router是Vue... 继续阅读 >
2021
06-19

如何使用vue3打造一个物料库

为什么要做物料库？我们写过很多登录页面。而每个登录页面除了一些背景图和颜色外，主体布局几乎是一致的，就那么几种类型。如果有个地方能帮我管理登录页面的代码，那么下次我再写登录的时候就可以直接把界面生成好，调逻辑就可以了。你也许会创建一个login.txt来存放你的登录页，可随着你想保存的代码片段越来越多，你已经很难根据文件的名称来知道这个代码片段具体的展现形式，这就引出了我们要讨论的话题，如何通过构建物料库... 继续阅读 >
2021
06-19

Vue如何使用CSS自定义变量

在css自定义变量的功能以及出来许久了，但实际开发中大家使用并不多。归其原因是因为less、sass等预处理器已经拥有定义变量的功能，以及Vue、react很方便设置style样式，大家可能觉得使用css定义变量不方便且没必要。实则不然举个最直观的栗子：“如何使用vue设置伪类伪元素的样式”。这是个世纪难题，大部分人可能会通过修改类名的方式解决，可如果要修改的样式多，或者我想通过不同的数据渲染不同的样式，那该怎么办呢... 继续阅读 >
2021
06-19

vue完美实现el-table列宽自适应

背景ElementUI是PC端比较流行的Vue.jsUI框架，它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求，组件本身可能没办法满足。最近在项目里就碰到了。很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度，默认情况下会平均分配给剩余的列。在列数比较多的情况，如果el-table宽度限定在容器内，单元格里的内容就会换行。强制不换行，内容要么在单元格内滚动，要么就会溢出... 继续阅读 >
2021
06-19

详解Vue组件复用和扩展之道

概述软件编程有一个重要的原则是D.R.Y（Don'tRepeatYourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展Vue组件的最佳方法是什么？Vue提供了不少API和模式来支持组件复用和扩展，你可以根据自己的目的和偏好来选择。本文介绍几种比较常见的方法和模式，希望对你有所帮助。扩展组件是否必要要知道，所有的组件扩展方法都会增加复杂性和额外代码，有时候还会增加... 继续阅读 >
2021
06-19

Vue中this.$router和this.$route的区别及push()方法

官房文档里是这样说明的：通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由可以理解为：this.$router相当于一个全局的路由器对象，包含了很多属性和对象（比如history对象），任何页面都可以调用其push(),replace(),go()等方法。this.$route表示当前路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path... 继续阅读 >
2021
06-19

到底该抛不抛弃JQuery

前言我以前很喜欢jQuery，而且说实话，我是先学jQuery，再学JavaScript的。所以我写这篇文章有点像是在背叛jQuery。我知道，关于为什么不应该用jQuery的文章已经汗牛充栋，但我只是想说下自己的亲身体验。不用jQuery用什么？随着web的发展，新技术长江后浪推前浪，前浪死在沙滩上。就像有些编程语言曾经辉煌过，现在也消失不见了。我认为jQuery也不例外，是时候跟它说再见了，虽然它曾经给我们带来过美妙的编程体验。... 继续阅读 >
2021
06-13

详解Vue开发网站seo优化方法

详解Vue开发网站seo优化方法 因为用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据，引擎爬虫进入页面获取不到文字内容，现在大多数解决方案是不采用ajax渲染数据，而是采用server端渲染，也就是所谓的SSR。目前基于vue的方案是Nuxt.js，同类型的也有React版的Nuxt.js所以服务端渲染就是尽量在服务器发送到浏览器前，页面上是有数据可让爬虫进行爬... 继续阅读 >
2021
06-13

详解在vue使用weixin-js-sdk常见使用方法

链接：https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B61.导入依赖包npminstallweixin-js-sdk2.判断是否是在微信浏览器中env.js<script>varua=navigator.userAgent.toLowerCase();varisWeixin=ua.indexOf('micromessenger')!=-1;varisAndroid=ua.indexOf('android')!=-1;varisIos... 继续阅读 >
2021
06-12

vue实现tab切换的3种方式及切换保持数据状态

vue实现tab切换的3种方式及切换保持数据状态 vue实现tab切换的3种方式一、v-show控制内容切换1.简单版原理：用点击事件改变num值作为开关，控制tab样式和内容显示隐藏。2.数据渲染原理：主要利用v-for绑定的index来控制，跟上面差不多。二、组件切换。1。知识点主要是vue中is的特性，和keep-alive缓存三、路由切换。（对地址栏和数据请求友好）通过router-link实现。vuetab切换保持数据状态页面做tab切换，由于组件每一次切换都会重新实例化组件，我们想要页面不论怎么切换都... 继续阅读 >
2021
06-12

关于Vue Router的10条高级技巧总结

前言VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSSclass的链接HTML5历史模式或hash模式，在IE9中自动降级自定义的滚动条行为本文是作者是实际项目中遇到的一些总结，... 继续阅读 >
2021
06-11

Vue3使用mitt进行组件通信的步骤

Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。比起Vue实例上的EventBus，mitt.js好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖Vue实例，所以可以跨框架使用，React或者Vue，甚至jQuery项目都能使用同一套库。1.安装推荐使用yarn安装（用过都知道有多丝滑）yarnaddmitt或者通过npm安装npminstall--savemitt2.引入到项目并挂载可以在main.js挂载到全局//标... 继续阅读 >