vue
H_x
这个作者很懒,什么都没留下…
展开
-
Vue-Router: keep-alive实现页面后退不刷新,前进刷新
想要实现的效果当从页面A跳转到页面B后,又从页面B回退到页面A,这时候页面A不再刷新,而是从缓存中读数据;从除了B以外的页面C前跳转到A页面时,刷新A页面。实现方法1首先在A页面的路由配置中设置keep-alive缓存: { path: '/plan/create', name: 'createPlan', meta: { title: '填写周计划', allowBack: true, keepA原创 2020-09-01 20:42:31 · 1352 阅读 · 1 评论 -
vue-router在query里添加参数无效,参数不显示在地址栏
描述需要在query里带上一些参数跳转,代码这么写vm.$router.push({ path: '/signup/writeInfo', query: { enterpriseId: this.companyInfo.enterpriseId, enterpriseName: this.companyInfo.enterpriseName }})但是当页面跳转是路径中却没有带上这些参数原因参数值this.companyInfo.enterpriseId和this.原创 2020-08-12 23:41:16 · 3103 阅读 · 2 评论 -
Vue: native事件修饰符的作用
在父组件中,如果想为子组件绑定一个点击事件,有可能这么写:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="app">原创 2020-07-28 23:54:57 · 495 阅读 · 2 评论 -
Vue: this.$route.params和this.$route.query的区别
1. this.$route.params传入参数:this.$router.push({ name: '/page1', params:{ id:id, }})获取参数: this.$route.params.id传参后在地址栏的显示形式:http:/xxxx/page1(URL中不显示参数,数据无缓存-即刷新或跳转后页面数据不再存在)2.this.$route.query传入参数:this.$router.pus原创 2020-07-28 23:36:09 · 416 阅读 · 0 评论 -
vue生命周期方法
vue生命周期图示来自李南江老师的图:创建期间的生命周期方法beforeCreate:在调用beforeCreate的时候, Vue实例刚刚被创建出来,此时还未初始化好Vue实例中的数据和方法, 所以还不能访问Vue实例中保存的数据和方法created:在调用created的时候, 是我们最早能够访问Vue实例中保存的数据和方法的地方beforeMount:在调用beforeMo...原创 2020-04-30 21:59:38 · 160 阅读 · 0 评论 -
vue组件的驼峰式命名与短横线分割命名
1.注册组件的时候使用了驼峰命名如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件命名</title> <script src...原创 2020-04-29 14:48:59 · 1679 阅读 · 0 评论 -
vue:v-text、v-html与模板{{}}的区别
vue:v-text、v-html与模板{{}}的区别v-html: 会覆盖原有的内容,并且会解析数据中的html;v-text: 会覆盖原有的内容,并且不会解析数据中的html;{{}}插值: 将指定的数据插入到指定位置,不覆盖原有的内容,并且不会解析数据中的html<!DOCTYPE html><html lang="en"><head> ...原创 2020-04-22 15:43:38 · 245 阅读 · 0 评论 -
vue2.0使用keep-alive实现页面缓存
vue2.0使用keep-alive实现页面缓存1. 所有页面都缓存只需要在用到router-view的地方多加一个<keep-alive></keep-alive>标签即可2. 缓存部分页面(1)修改路由配置,需要缓存的(即切换页面后数据仍保留的)路由的keeAlive属性设置为true,不需要缓存的设置为false或者不设置(因为默认是false),如图:...原创 2020-02-16 15:49:28 · 1491 阅读 · 0 评论 -
vue1.0的$dispatch、events与vue2.0的$emit
vue1.0的$dispatch、events与vue2.0的$emitvue2.0弃用了vue1.0中的$dispatch,选择用$emit向父组件传递数据,例子:vue2.0子组件:<div class="ratingselect"> <span @click="select(2)">{{desc.all}}</span> <!...原创 2020-02-14 15:56:46 · 563 阅读 · 1 评论 -
transition在vue1.0和vue2.0中的区别
transition在vue1.0和vue2.0中的区别1. html部分:vue1.0<div class="shopcart-list" v-show="listShow" transition="fold"> <!--more code--></div>vue2.0 <transition name="fold"> ...原创 2020-02-12 21:08:56 · 196 阅读 · 0 评论 -
vue2中使用better-scroll插件实现滚动效果
vue2中使用better-scroll实现滚动效果1.npm安装插件(1)到github上查看最新版本号(2)在package.json中添加依赖(3)执行npm install安装,安装成功后node_module目录下生成了better-scroll文件夹2.使用插件(1)在需要实现滚动效果的组件中引入插件import BScroll from 'better-scroll...原创 2020-02-10 17:01:38 · 474 阅读 · 0 评论 -
vue:使用vue-resource
vue:使用vue-resource1. 在package.json中添加依赖如图,后面的版本号根据自己喜欢的来写。2.安装执行npm install安装,完成后node_modules目录下生成了vue-resource文件夹3.导入插件并注册将vue-resource导入到main.js中并全局注册4.发送请求这里要提前准备好接收请求的接口或者mock数据...原创 2020-02-06 14:50:25 · 132 阅读 · 0 评论 -
vue2:安装、配置、使用前端路由vue-router
vue2:安装、配置、使用前端路由vue-router1.查看是否已安装vue-router首先查看package.json文件中是否已经添加了vue-router依赖:再查看node_modules文件夹下是否有vue-router文件夹如果有以上文件,则说明已经安装了vue-router。一般在搭建项目时会出现是否安装vue-router这一个选项:如果选了yes,项目搭建时...原创 2020-02-05 18:40:42 · 13333 阅读 · 1 评论