分类：vue

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挂载到全局//标... 继续阅读 >
2021
06-11

vue 实现拖拽动态生成组件的需求

产品需求开完产品需求会议，遇到了一个需求，首先页面分成两栏布局，左侧展示数据组件，支持拖拽排序，点击按钮清除组件。右侧支持将组件的缩略图拖拽至左侧生成一个新的组件。思路对于动态生成组件来说每一次都要是生成全新的一个组件，那么就可以把组件放进函数当中return。在JSX中调用函数，每次调用函数都会返回一个全新的组件。这对React来说非常简单，但是对于Vue来说，直接将组件返回是不可能的。尽管这个return写法不... 继续阅读 >
2021
06-08

vue使用swiper插件实现轮播图的示例

hello大家好，最近我在做一个仿饿了么的项目，我会将我的项目经验同步到这里，与大家分享！vue-使用swiper插件实现轮播图下载安装：npminstallswiper--saveMsite.vue的HTML部分：<!--在页面msite_nav导航部分使用swiper--><divclass="swiper-container"><divclass="swiper-wrapper"><divclass="swiper-slide">1</div><divclass="swiper-slide">2</div><divclass="swiper-slide">3</div></... 继续阅读 >
2021
06-08

vue使用动态组件实现TAB切换效果

问题描述tab切换的场景在开发中会经常用到。当需要实现这种效果的时候，我们常常会想到下面的方式去实现这个效果。方式一使用display:none;去控制dom元素的显示与隐藏。从而实现，两个tab的显示与隐藏。不过如果有三四个tab要切换的话，这种方式就不可取了。方式二使用vue中的指令v-if或者v-show实现。这种方式可以实现，不过代码写的不优雅。试想一个.vue文件中出现一大把v-if是什么样的效果？而且使用v-if还得声明很多... 继续阅读 >
2021
06-07

Vue项目中如何封装axios（统一管理http请求）

1、需求说明在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。2、Vue项目结构在本地创建Vue项目，目录结构如下： -public  静态资源文件 -src |-assets  静态资源目录 |-components 公共组件目录 |-http   axios封装目录 |-router  路由管理目录 |-store&... 继续阅读 >
2021
06-05

vue的ssr服务端渲染示例详解

vue的ssr服务端渲染示例详解 为什么使用服务器端渲染(SSR)更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。请注意，截至目前，Google和Bing可以很好对同步JavaScript应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示loading菊花图，然后通过Ajax获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果SEO对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(... 继续阅读 >
2021
06-04

vue使用mixins优化组件

vue提供了mixins这个API，可以让我们将组件中的可复用功能抽取出来，放入mixin中，然后在组件中引入mixin，可以让组件显得不再臃肿，提高了代码的可复用性。如何理解mixins呢？我们可以将mixins理解成一个数组，数组中有单或多个mixin，mixin的本质就是一个JS对象，它可以有data、created、methods等等vue实例中拥有的所有属性，甚至可以在mixins中再次嵌套mixins，It'samazing!举个简单的栗子:<divid="... 继续阅读 >
2021
06-04

Vue项目引入PWA的步骤

Vue项目引入PWA很简单，操作步骤如下：1.安装依赖vueadd@vue/pwa由于使用add关键字，安装成功后会在项目中创建一些文件，如果项目使用了git，可以很容易的看出文件变化：src文件夹下会生成一个registerServiceWorker.js文件，并在main.js中导入，这个文件自动生成了注册serviceworker的代码。registerServiceWorker.js的代码如下：import{register}from'register-service-worker'if(process.env.NODE_ENV==='productio... 继续阅读 >
2021
06-04

详解Django+Vue+Docker搭建接口测试平台实战

详解Django+Vue+Docker搭建接口测试平台实战 一.开头说两句大家好，我叫林宗霖，是一位测试工程师，也是全栈测开训练营中的一名学员。在跟着训练营学习完Docker容器技术系列的课程后，理所应当需要通过实操来进行熟悉巩固。正好接口自动化测试平台需要迁移到新的测试服务器上，就想要体验一番Docker的“一次构建，处处运行”。这篇文章简单介绍了下这次部署的过程，其中使用了Dockerfile定制镜像和Docker-Compose多容器编排。二.项目介绍项目采用的是前后端分离技术来实现的... 继续阅读 >
2021
06-04

vue使用v-model进行跨组件绑定的基本实现方法

vue使用v-model进行跨组件绑定的基本实现方法 大家好，今天我们来说一下使用v-model实现父子组件的绑定效果1：简单版代码如下：父组件：<template><div>//3：使用子组件，并使用v-model绑定<Aboutv-model="father"/></div></template><script>//1：引入子组件importAboutfrom"./About";exportdefault{//2：注册子组件components:{About,},data(){return{//值给空father:''}},//监听组件数据的变化watch:{... 继续阅读 >
2021
06-03

关于vue中如何监听数组变化

前言前段时间学习了关于vue中响应式数据的原理，（并作了学习笔记vue响应式原理），其实是通过Object.defineProperty控制getter和setter，并利用观察者模式完成的响应式设计。那么数组有一系列的操作方法，这些方法并不会触发数组的getter和setter方法。那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~源码部分https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js从哪开始第一步学习呢Emmm... 继续阅读 >