Vue
weixin_43795169
这个作者很懒,什么都没留下…
展开
-
vue keep-alive在路由缓存中的使用
路由缓存//include 和 exclude prop 允许组件有条件地缓存//以下例子为:只缓存name为index和my的路由,(注意:这里需要在index 和 my的组件内定义name的值 ,不是给route的name赋值)<keep-alive include ="index,my"> <router-view></router-view></keep-alive>使用了keep-alive后,组件内可以使用activated、d原创 2021-11-24 14:41:07 · 515 阅读 · 0 评论 -
vue 父级路由调用子路由方法及子路由传值给父级路由
1、父级路由调用子路由的方法子路由中定义了一个getData()方法methods:{ getData(){ console.log('这是子路由方法 由父级路由触发') }}在父级路由页面中给router-view加ref属性 <div class="content"> <router-view ref="child"></router-view> </div>接着调用子路由的getData()方法mounted(){ thi原创 2021-11-18 10:23:23 · 7129 阅读 · 1 评论 -
vue 动态加载组件和按需加载组件
动态加载组件<template> <div class="hello"> <!-- is的值匹配组件的name --> <components :is="currentComponents"></components> </div></template><script>const info=()=>import ('./info.vue') //按需加载组件const原创 2021-11-18 09:57:17 · 275 阅读 · 0 评论 -
vue引入子路由 及其使用场景
定义子路由//router.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve=>(require(["@/components/HelloWorld"],resolve)),原创 2021-11-17 17:17:10 · 458 阅读 · 0 评论 -
vue引入路由的几种方式 包含路由懒加载方式
方式一:// router.js 此处省略Router等的引入import HelloWorld from '@/components/HelloWorld'export default new Router({ routes:[ { path:'/', name:'HelloWorld', components:HelloWorld } ]})方式二:resolve=>(require([‘地址’],resolve))的方式实现路由懒加载// route原创 2021-11-17 16:21:36 · 856 阅读 · 0 评论 -
vue单页面接入百度统计
在申请百度统计后 会得到以下一段代码,插入到index.html的 < head >< /head >中// index.html<script> var _hmt = _hmt || []; window._hmt=_hmt; window._hmt.push(['_setAutoPageview', false]); //我这里关闭了自动发送页面PV统计请求 防止首次访问时发起两次请求 按自身的需求吧 (function() {原创 2021-11-17 15:12:45 · 640 阅读 · 0 评论 -
安装指定版本的vue-cli
1、安装vue-cli最新版本如果有旧版本,卸载旧版本 npm uninstall vue-cli -g暗转新版本 npm install -g @vue/cli2、安装指定版本 vue-cli查询可用版本 npm view vue-cli versions --json安装指定版本 npm install -g vue-cli@2.9.6npm install -g @vue/cli@版本号 (vue-cli3以上)3、查看当前版本vue -V...原创 2020-05-11 11:46:41 · 3036 阅读 · 0 评论 -
vue 给v-for循环列表添加不一样的class或者id
<ul> <li v-for="(item,index) of cards" :id='ownClass(item)' :key="index" > </li></ul>data(){ return{ cards: [{ id: 1, name: 1}, { id: 2, name: 2}] }} methods:{ o...原创 2020-03-11 18:47:00 · 2002 阅读 · 0 评论 -
vue 拼接序列图为gif动画
<div class="gif"> <img :src="gif" /></div>export default{ data(){ return{ gif:'', imgs:[ 'cardGif (1)','cardGif (2)','cardGif (3)','cardGif (4)','cardGif (5)','c...原创 2020-03-11 14:17:57 · 1859 阅读 · 0 评论 -
js监听物理返回键 浏览器返回键
1、监听 popstate ,按物理返回键 浏览器返回键 调用history.back()、history.forward()、history.go()方法也会触发var isRun;window.addEventListener('pageshow', function() { isRun = false; setTimeout(function() { isRun = tru...原创 2020-03-11 11:42:15 · 2364 阅读 · 0 评论 -
vue使用过滤器filters
1、filter的使用 <div>{{ num | numFilter }}</div> <div :id="id | idFilter"></div>export default{ data(){return {} }, filters:{ numFilter:function(val){ if (!val) retu...原创 2020-03-10 18:28:02 · 286 阅读 · 0 评论 -
vue滚动事件
vue监听滚动事件,当移动到某个按钮之后(即按钮消失在屏幕之内),底部出现悬浮框mounted() { window.addEventListener('scroll', this.handleScroll, true); //监听滚动条},updated() { this.btnTop = document.querySelector('#test').offsetTop; //监...原创 2020-03-10 16:31:12 · 2108 阅读 · 0 评论 -
vue项目将px转化为rem (解决移动端的适配问题)
(1)安装 lib-flexible 和 px2rem-loadernpm i lib-flexible --snpm i px2rem-loader --d(2)在main.js文件中引入lib-flexible,即设置自动调整页面比例 import 'lib-flexible'(3)还要在index.html中把这样的语句删除,否则将根据已有的meta标签来设置缩放比例...原创 2020-03-10 15:49:25 · 1180 阅读 · 0 评论 -
vue构建多入口 多出口项目
**vue构建多入口 多出口项目**(1)使用vue-clit搭建项目cnpm install -g vue-cli vue init webpack '项目名'(2) 调整一下项目目录(3)修改main.js和other.js文件main.jsimport Vue from 'vue'import App from './entrance/App'...原创 2020-03-10 15:38:26 · 950 阅读 · 1 评论 -
vue刷新时不让页面出现空白的方式 provide/inject
**vue刷新时不让页面出现空白的方式**(1)控制router的显示与隐藏 App.vue<template> <div id="app"> <router-view v-if="routerAlive"/> </div></template><script> exp...原创 2020-03-10 09:59:19 · 755 阅读 · 0 评论 -
gif图片只加载一次,再次刷新不会重新加载怎么办
gif图片只加载一次,再次刷新不会重新加载怎么办方法一(vue项目):<div class="gif" v-show="gif_show" > <img :src="!gif_show|| gif " /> </div>只需要对src进行判断,替换src的缓存方法二:图片路径后面,每次需...原创 2020-03-01 13:26:28 · 2974 阅读 · 0 评论 -
vue生成二维码
(1) 安装插件npm i qrcode --s(2) 组件中引入import QRCode from "qrcode"(3)使用html代码 <canvas id="qrcode"></canvas>js代码 mounted() { this.$nextTick(()=>{ this.qrcode(ur...原创 2019-10-29 14:58:42 · 121 阅读 · 0 评论 -
vue路由传参的两种方式
1、使用params传参这种方式参数不会跟在地址栏,但是刷新之后就获取不到路由传的参数值了(1)在定义路由的时候,加name属性const routes = [ { path: '/', redirect: '/home'},//设置默认指向的路径 { path: '/home',component: Home}, {path:'/Order',name:'Order', com...原创 2019-10-24 15:06:43 · 236 阅读 · 0 评论 -
vue点击按钮将网页内容生成图片(html2canvas)
1、引入html2canvasnpm install html2canvas --s2、在组件中引入import html2canvas from "html2canvas"3、 给需要转成图片的内容节点加ref,便于获取<div id="info" ref="html2canvas"> ……</div>4、点击分享按钮,生成图片 shareBtn...原创 2019-10-22 18:56:00 · 871 阅读 · 0 评论 -
滚动到某个位置后,出现底部按钮
比如想要一个这样的效果:表单有一个提交按钮,当这个提交按钮滚出屏幕之外的时候,在底部出现一个按钮 mounted() { window.addEventListener('scroll', this.handleScroll, true); }, updated() { this.offsetTop = document.querySelector(...原创 2019-08-09 18:14:13 · 876 阅读 · 0 评论 -
vue的el-input忽略空格输入
只需要在v-model后面加.trim,就可以忽略空格输入 <el-form-item label="用户名" prop="bankcard"> <el-input type="number" v-model.trim="username" placeholder="请填写您的用户名"></el-input> </el-form-item&...原创 2019-04-22 21:19:10 · 8115 阅读 · 1 评论 -
Vue修改运行端口号
Vue修改运行端口号解决方法:在package.json文件中进行配置,如配置port 为3090"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 3090", "build": "cross-env NODE_ENV=production web...原创 2019-03-26 09:05:15 · 5485 阅读 · 2 评论