本次项目做到一个点赞功能，即分享出去一个页面给微信好友，微信好友点开并点赞，需要将点赞用户的微信昵称，微信头像以及微信openid，微信unionid（这个需要关注公众号才会有该字段）传给后端，记录点赞人的相关信息 微信网页授权 1、微信公众号网页授权配置，详见官网 2、关于网页授权的两种scope的区别说明 （详细见官网）－scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面，不需要用户操作－scope=snsapi_userin...
本教程主要讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 先构建生成dist文件(纯静态应用), 然后自动化部署到静态文件服务器 Nginx。 一、Nginx服务器文件的配置 server {listen 80;server_name www.xxxxxx.com;#生产环境location / {root /usr/local/www/xxx_program/;index index.html;try_files $uri $uri/ /index.html;}}server {listen 80;server_name test.xxxxxx.com; #测试环境location / {root /usr/local/www/xxx_program_...
本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下： @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive(on).keyCodes.ctrl=17; Vue.directive(on).keyCodes.myenter=13;@keydown.a/b/c.... <input type="text" @keydown.c="show">自定义键盘信息: Vue.directive(on).keyCodes.ctrl=17; Vue.directive(on).keyCodes.myenter=13; <!DOCTYPE html> <html lang="en"...
本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue动画</title><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/2.0/animate.css" rel="external nofollow" /><style>#box{width:400px;margin: 0 auto;}#div1{width:100px;...
本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下： computed:{b:function(){ //默认调用getreturn 值} } computed:{b:{get:set:} }* computed里面可以放置一些业务逻辑代码，一定记得return <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue计算属性computed</title><style></style><script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script...
本文实例讲述了vue v-for循环重复数据无法添加问题解决方法。分享给大家供大家参考，具体如下： 问题： 错误提示如下：解决问题的代码示例： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue v-for循环重复数据无法添加问题</title><style></style><script src="vue.js"></script><script></script> </head> <body><div id="box"><input type="button" value="添加" @click="add"><ul><l...
一、前端代码<el-upload class="step_content" dragaction="string"ref="upload":multiple="false":http-request="createAppVersion":data="appVersion":auto-upload="false":limit="1":on-change="onFileUploadChange":on-remove="onFileRemove"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload><div class="mgt30"><el-button v-show="createAppVisible" :di...
Vue项目中实现用户登录及token验证先说一下我的实现步骤： 使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后， 拿到token，将token存储到sessionStorage中，并跳转到首页前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。注销后，就清除sessionStorage里的token信息并跳转到登录页面使用eas...
mpvue工程初始化的时候，使用sass的步骤 1.安装依赖： npm install sass-loader node-sass --save-dev 2.在.vue文件中的style节点加上lang=”scss”，这样就可以愉快地使用sass进行开发了，无需再webpack.base.config.js中配置loader，webpack会自动识别.scss文件以及.vue中的scss代码。 在使用sass开发的时候，我们经常需要在各个页面使用统一的变量，还有一些方法，这种公共的资源如果不进行特殊处理的话，我们在每个页面都需要@...
写在前面： 传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 Vue router如何传参 params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。 路由界...
浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。 基本知识 浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和JavaScript创建新的扩展程序，如果你曾经写过网页，那么写一个插件是非常轻松的事情。 常见的插件一般就是地址栏后面的一个图标，点击后给你当前网页提供各种功能，或者在你点击网页右...
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项，网上有很多方法法，这里不重复写了。直接上 Vue CLI3.0 配置步骤。 第一步：安装 jQuery、 Bootstrap、popper.js依赖。其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单，所以需要引入。 npm install jquery bootstrap@3 popper.js ...
前言： 在开发过程中，有时候会遇到这么一种情况，通过动态的赋值，但是dom没有及时更新，能够获取到动态赋的值，但是无法获取到双向绑定的dom节点，这就需要我们手动进行强制刷新组件。 官网是这样说的：可能你还不大理解，请继续往下看，下面是我的一个例子，来详细解说了这个方法的使用，第一个打印结果第二个打印结果 一、问题描述：父组件通过v-for渲染子组件，删除子组件数据出现异常。<code class="language-plai...
先来看一下Spring官网首页的一个图片滑动显示效果可以看到， 随着鼠标的滑动，绿色图片和灰色图片可以无缝的在鼠标俩两边切换显示。 显示这样的效果其实很简单，利用固定定位保证两张图片在同一位置下， 我们可以将灰色图片当做背景层图片，然后根据获取到的实时X轴坐标， 动态改变绿色图片的宽度， 隐藏超出X轴坐标的部分， 就可以达到这样的效果， 简单来说， 这效果就是动态改变上层图片的宽度。 实现效果：我这边选择了两张同样...
VUE引入第三方js包及调用方法 1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2、网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用，较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script>3、mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mounted 中 4、第三方js包如果有...