vue
关注
分享
扫一扫
vue
奇怪的Zzz
emmm
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue中keepAlive缓存的使用
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。可以用以下几种方案解决问题；一、利用meta标签1、首先在路由中的meta标签中记录keepAlive的属性为truepath: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'),转载 2020-08-06 14:40:49 · 2478 阅读 · 0 评论 -
Vue中 父子传值 数据丢失问题
在Vue中，父子组件传值，子组件通过props接收父组件传递的数据父组件questionList : 传递数据参数questionsLists: 传递数据源子组件porps 接收父组件方式有俩中，一种是通过对象形式，一种是通过数组形式，通过数组形式接收多个数据时用逗号隔开即可。比如：props：[‘a’,‘b’]。需要注意的是在子组件中 接收父组件的数据参数，必须和父组件传递时的 参数一致，上图中的 questionList这种情况下会出现这么一个情况，刷新页面之后子组件接收的父组件转载 2020-08-05 18:10:08 · 1821 阅读 · 1 评论 -
vue 自适应屏幕的宽高度
通过定义属性进行双向绑定改变body的高度，watch监测窗口大小变化时触发，改变属性值达到预期效果，代码贴上<template> <div class="bgColor" :style="'height:'+fullHeight+'px;'"> <div class="login-wrap"> <h1 class="login-title">评测管理员</h1> <div class="login-type-wrap".转载 2020-08-03 17:53:30 · 3781 阅读 · 0 评论 -
vue内置组件component--通过is属性动态渲染组件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"&g转载 2020-07-30 16:09:37 · 1770 阅读 · 0 评论 -
深入理解vue .sync修饰符
.sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决.sync用法<text-document :title.sync="doc.title"></text-document>当子组件需要更新 title 的值时，它需要显式地触发一个更新事件：this.$emit('u转载 2020-07-30 15:55:35 · 200 阅读 · 0 评论 -
对table的设置及打印分页
正确的引入 style: <link rel="stylesheet" type="text/css" href="mystyle.css"> 1.empty-cells: 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。<table cellpadding="0" cellspacing="0" style="width:25CM;BORDER-COLLAPSE: collapse; empty-cells: show" ></table>转载 2020-07-29 11:51:17 · 1578 阅读 · 0 评论 -
vue中更换字体，本地存储字体非引用在线字体库
1，首先把下载的字体 两种格式放到本地2，新建文件夹3，在这个文件里写4，这main.js 里引用5，在style里引用字体，结束！转载 2020-07-29 11:48:43 · 555 阅读 · 0 评论 -
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur
一、@input（或者是v-on:input）使用：<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" v-on:input="search" value="" />二、@keyup.enter该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用，而@keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。三、@ch转载 2020-07-16 16:11:54 · 3070 阅读 · 0 评论 -
Vue--动态组件实现组件切换
步骤：1.新建一个tabber组件（主要是创建需要绑定点击事件的对象）1.1添加点击事件（事件函数需要传参）2.1在methods中添加事件2.在App.vue中实现切换2.1利用动态组件实现切换2.2在data中设置切换的组件名称2.3在methods中添加事件tabbe.vue<template><div id="footer"><ul><li @click="handleClick(1)">首页</li><转载 2020-07-16 16:09:36 · 1331 阅读 · 0 评论 -
vue的mixins的使用
mixins就是混入。一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。1.创建一个test.js，用export暴露出mixins对象export const mixinsTest = { methods:{ hello(){ console.log("hello"); } }, created(){ this.hello() }}2.在转载 2020-06-29 10:33:00 · 176 阅读 · 0 评论 -
vue中的slot（插槽）
**vue中的插槽————slot 什么是插槽？**插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制怎么用插槽？默认插槽父组件<template> <div> 我是父组件 <slotOne1> <p style="color:red"&g转载 2020-06-23 10:09:44 · 234 阅读 · 0 评论 -
一段代码，vue如何使用photoswipe
使用npm安装photoswipenpm i photoswipe编辑photoswipe的vue组件<template> <!-- 这段html代码，是用来显示图片弹出层的，是由photoswipe提供的 --> <!-- Root element of PhotoSwipe. Must have class pswp. --> <div class="pswp" tabindex="-1" role="dialog" aria-h转载 2020-06-22 15:59:40 · 1313 阅读 · 0 评论 -
vue中一个dom元素可以绑定多个事件？
其实这个问题有多个解决方法的 这里提出两点第一种第二种现在dom上绑定一个然后在你的methods中直接调用如果要传参数 这时候千万别忘记转载 2020-06-22 11:27:24 · 1002 阅读 · 0 评论 -
vue中keepAlive的用法[返回页面不刷新]
使用vue单页开发项目时遇到一个问题：在列表页进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。1.在app.vue页面中把替换成下图所示：<keep-alive><router-view v-if="$route.meta.keepLive"></router-view></keep-alive>转载 2020-06-22 10:02:39 · 1295 阅读 · 0 评论 -
【VUE管理菜单权限】使用router.addRoutes
最近项目迭代完成最后一版需要完成清尾工作。这里需要完成菜单的权限控制，最开始完成这项工作是吧所有的菜单都写到home模块，然后用v-if来判断菜单的显示。看Vue Router的API文档发现router.addRoutes函数签名：router.addRoutes(routes: Array<RouteConfig>)动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。这个命令可以实现我的想法，多的不说直接上代码。（我把他直接放到权限接口请求的回调里简单转载 2020-06-20 09:55:40 · 723 阅读 · 0 评论 -
vue实现鼠标移入移出事件
<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit"> <div class="indexItem"> <span :title="item.name">{{item.name}}</span> <span class="mypor"> <i...转载 2020-05-18 12:20:38 · 8551 阅读 · 0 评论 -
前端js实现粘贴图片到可编辑的div(其他标签也可)中
输入框中要实现粘贴图片功能，不能用input、textarea等输入框作为父容器，因为input、textarea中只能接受字符串，对于html标签不进行转义以及渲染。所以用contenteditable='true’属性来使div(其他容器也可)实现可编辑，来模拟输入框，实现粘贴图片至输入框中的效果，提交数据给后端的时候可以用form提交，也可用异步提交，form提交的时候将div中的数据全...转载 2020-01-03 11:00:51 · 1342 阅读 · 0 评论 -
vue中axios设置timeout超时
$.ajax({ url: '接口地址', type:'get', //请求方式get或post data:{}, //请求所传的参数 dataType: 'json', //返回的数据格式 timeout: 4000, //设置时间超时，单位毫秒 success: function(result) { console.log('OK') }, error...转载 2019-12-25 16:45:48 · 5583 阅读 · 0 评论 -
vue重置鼠标右键，自定义菜单。(插件)
vue-context-menuVue 2.0 右键菜单组件，菜单内容可以随意自定义安装npm install @xunlei/vue-context-menu在线Demohttps://xunleif2e.github.io/vue-context-menu/demo/dist使用1. 注册组件方式1 利用插件方式全局注册import VueContextMenu fr...转载 2019-12-25 13:15:29 · 1548 阅读 · 0 评论 -
element+vue鼠标右键显示菜单
<template> <el-container style="height: 630px"> <el-aside width="300px"> <el-tree :data="productTypes" :props="defaultProps" node-key="id" ...转载 2019-12-25 13:11:22 · 2462 阅读 · 0 评论 -
vue-draggable 拖拽 学习和使用
安装npm i -S vuedraggablecdn引入index.html<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggabl...转载 2019-12-24 16:03:50 · 879 阅读 · 0 评论 -
VUE 复制内容至剪切板(两种使用方法)
复制内容至剪切板使用的是插件’vue-clipboard2’,通过官方文档会发现共有两种使用方式。第一种方式与大多数文章类似，只粘贴代码：<template> <div class="container"> <input type="text" v-model="message"> <button type="button" ...转载 2019-11-23 16:03:20 · 1072 阅读 · 0 评论 -
vue-clipboard2(vue剪切板功能)
安装npm install --save vue-clipboard2在main.js中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)例如：<span>{{invitationCode}}</span><img src="../../static/img/d1.png"...转载 2019-11-23 15:49:06 · 511 阅读 · 0 评论 -
在H5页面中禁止微信分享转发按钮-mugeda
在H5页面中禁止微信分享转发按钮（mugeda）在页面脚本中插入以下代码方法一: 加一段js代码document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu');});方法二：设置微信jssdkwx.config({...转载 2019-11-22 14:50:42 · 1165 阅读 · 1 评论 -
vue h5移动端禁止缩放
安卓在index.html里面写<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">ios在APP.vue里面写<script>window.onload = function() { docume...转载 2019-11-21 15:14:01 · 538 阅读 · 0 评论 -
Vue项目中，防止页面被缩放和放大
现在vue的脚手架生成项目之后我们会发现index.html页面中。在head标签中，我们会看到meta标签中有一条显示是<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">但是我们发现这条语句中只是让user-scalable=0，这是不让用户进行缩放。可以...转载 2019-11-21 15:12:31 · 4352 阅读 · 0 评论 -
vue 调用微信分享 遇到的问题
1.安装cnpm install weixin-js-sdk --save-dev2.新建一个share.js，与main.js放在同一层级（我只是偷懒，方便调用）import wx from 'weixin-js-sdk'exports.install = function (Vue, options) { Vue.prototype.shareList = function (...转载 2019-11-20 17:15:14 · 607 阅读 · 0 评论 -
Module build failed: TypeError: this.getResolve is not a function at Object.loader （vue里sass问题）
Module build failed: TypeError: this.getResolve is not a function at Object.loader解决方法和原因如下当我在vue页面使用scss使用到scss时候就会报错运行scss的依赖都安装好了原因其实很简单sass-loader版本有问题 换成7.0.0版本就好在webpack.json中重新改一下版本，然...转载 2019-11-20 11:59:26 · 187 阅读 · 0 评论 -
vue项目实现路由按需加载(路由懒加载)的3种方式
1. vue异步组件技术vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。举例如下：{ path: '/promisedemo', name: 'PromiseDemo', component: resolve => require(['../co...转载 2019-11-12 14:10:21 · 1916 阅读 · 1 评论 -
vue项目--favicon设置以及动态修改favicon(浏览器顶部小图标)
动态更新favicon之前需要有一个默认的favicon。项目里会有一个static文件夹或者其它文件夹，存放静态文件。favicon图片放到该文件夹下。然后再index.html中添加：vue-cli2.0<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">vue-cli3.0...原创 2019-11-07 14:09:56 · 8002 阅读 · 5 评论 -
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。这样的话页面就是空白了，因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打...转载 2019-11-07 13:31:09 · 2623 阅读 · 1 评论 -
动态设置vue项目的浏览器标题
router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next()})to.meta.title是我在路由里设置的每个页面的标题document.title 设置标题...原创 2019-11-07 13:19:18 · 563 阅读 · 0 评论 -
vue项目 微信公众号调用weixin-js-sdk 实现 微信扫一扫
该方法需引入微信js-sdk ，先npm安装npm install weixin-js-sdkhtml&amp;lt;div class=&quot;login_div&quot;&amp;gt; &amp;lt;mt-button id=&quot;wxsys&quot; type=&quot;primary&quot; v-on:click=&a原创 2019-02-22 17:35:39 · 3027 阅读 · 0 评论 -
vue项目判断 是否是移动端 再依据判断跳转
在app.vue页面写一个判断事件并调用_isMobile(){ let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbi...原创 2019-02-23 10:51:53 · 6011 阅读 · 4 评论 -
使用navigator对象信息对浏览器进行判断
navigator为Window对象的一个属性，指向了一个包含浏览器相关信息的对象。 navigatot中包含了一些常用到的属性，如： navigator.appVersion 浏览器的版本号 navigator.appName 浏览器的名称 navigator.language 浏览器使用的语言 navigator.platform 浏览器使用的...原创 2019-02-23 10:55:32 · 432 阅读 · 0 评论 -
使用navigator对象信息对浏览器进行判断 （vue-route 的 beforeEach 实现导航守卫（路由跳转前验证登录））
路由跳转前做一些验证，比如登录验证（未登录去登录页），是网站中的普遍需求。对此，vue-route 提供的导航守卫可以实现官方文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ......原创 2019-02-23 11:01:49 · 1304 阅读 · 0 评论 -
axios拦截器 vue
页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。好在强大的axios为开发者提供了这样一个API：拦截器。拦截器分为 请求（request）拦截器和 响应（response）拦截器请求拦截器axios.interceptors.request.use(function (config)...原创 2019-02-23 11:48:16 · 379 阅读 · 0 评论 -
vue 高德地图 v-for循环数据 点击圆点显示信息弹窗
首先 依旧是安装vue高德地图插件npm 安装推荐 npm 安装。npm install vue-amap --saveimport VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Autocomplete',...原创 2019-03-09 09:55:57 · 3365 阅读 · 2 评论 -
vue调用微信公众号支付
微信支付官方文档https://pay.weixin.qq.com/wiki/doc/api/index.html //将支付的认证和回调 封装成函数 onBridgeReady(){ let that = this WeixinJSBridge.invoke( //微信支付的一些认证 需要去网站设置好 ...原创 2019-03-14 09:39:35 · 4381 阅读 · 0 评论 -
vue 的键盘回车事件
emmmmm就一行代码…<input type="text" v-model="keyword" @keyup.enter="submit" placeholder="编号搜索">@keyup vue的键盘事件.enter键盘事件里的回车事件原创 2019-03-15 10:59:28 · 1041 阅读 · 0 评论