![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 51
vue相关的一些东西
ruantianqing
.....
展开
-
vueRouter
前端路由的实现由于hash的改变不会向服务器发送新的请求,因此我们可以监听hash的变化(通过hashchange事件),根据不同的hash渲染不同的页面(通过location.hash获取当前的hash值) 这种不向服务器端发送请求,而实现切换页面的功能,就是单页面应用程序(SPA:single page application) 单页面应用程序就是基于前端的hash路由实现的,特点是快Vue路由vue提供了路由模块:vue-router使用路由分成六步 第一步 安装路由:Vue.use方原创 2021-02-24 16:05:34 · 121 阅读 · 0 评论 -
vue组件name属性
转载自https://www.jb51.net/article/140702.htm我们在写vue项目的时候会遇到给组件命名这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的export default { name: 'xxx'}用处一:当项目使用keep-alive时,可搭配组件name进行缓存过滤举个例子:我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载export default { name:'Detail'转载 2021-01-26 10:09:08 · 878 阅读 · 0 评论 -
前端权限控制
1 前端权限控制思路1.1菜单的控制 在登录请求中,会得到权限数据。前端根据权限数据,展示对应的菜单,点击菜单,才能查看相关的界面1.2界面的控制 如果用户没有登录,手动在地址栏敲入管理界面的地址,则需要跳转到登录界面 如果用户已经登录,可是手动敲入非权限内的地址,则需要跳转到404界面1.3按钮的控制 在某个菜单的界面中,还得根据权限数据,展示出可进行操作的按钮,比如删除,修改,增加1.4请求和响应控制 如果用户通过非常规操作,比如通过浏览器调试工具将某些禁用的按钮变成开启状态原创 2021-01-22 22:52:26 · 6232 阅读 · 0 评论 -
vuex存储和本地存储(localstorage、sessionstorage)的区别
转载自:https://www.cnblogs.com/jiajialove/p/12606695.html转载自:https://www.cnblogs.com/leijee/p/7506301.html区别及适用场景:1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供转载 2021-01-22 20:49:16 · 2613 阅读 · 0 评论 -
vue路径
1 ~ resolve: { extensions: ['.js', '.vue'], alias: { 'vue': 'vue/dist/vue.esm.js', 'components': resolve('src/components'), 'common': resolve('src/common'), 'config': resolve('src/config'),原创 2021-01-21 12:52:38 · 275 阅读 · 0 评论 -
vue mock.js mock数据
使用mockjs模拟数据1 下载npm install mockjs2 使用1 在api文件夹下新建mock.js文件import Mock from 'mockjs';// 为了模拟真实,设置请求延迟Mock.setup({ // 1s之后返回 timeout: 1000})// 匹配路径返回数据// 除了可以使用字符串匹配路径,还可以使用正则匹配路径// Mock.mock('/api/user', {// username: 'xiaomi原创 2021-01-20 21:45:07 · 180 阅读 · 0 评论 -
vue-新建项目1
使用vue create新建项目之后,要封装一下axios和请求响应劫持1 新建config文件夹,然后新建index.js文件,写配置config / index.jsexport default { title: 'demo', baseUrl: { dev: 'http://localhost:3000', // 开发的时候后台接口的地址 pro: '' // 上线产品发布之后,后台接口的地址 }}2 然后新建api文件夹,然后原创 2021-01-20 21:04:24 · 87 阅读 · 0 评论 -
ssr服务器端渲染
1 SSR全称:server side render(服务器端渲染),让我们可以在服务器端渲染应用程序前端渲染问题:1 白屏时间长,影响用户体验2 不利于搜索引擎优化(SEO)所以我们要在服务器端渲染应用程序服务器端渲染:vue为服务器端渲染提供了模板–vue-server-render该模块提供了createRenderer方法,来创建渲染器渲染器提供了renderToString方法,渲染应用程序组件渲染器实现了promise规范,因此可以通过then方法监听成功,可以通过cache原创 2021-01-19 18:47:01 · 389 阅读 · 0 评论 -
vue组件通信
1 父组件向子组件通信父组件向子组件通信就是将父组件的数据,方法传递给子组件需要两步:第一步 在父组件模板中,为子组件元素传递数据 属性值默认是字符串,想传递变量或者方法,要使用v-bind指令动态传递 命名规范:字母小写,横线分割单词 第二步 在子组件中,接收数据或者方法 在props属性中接收,有两种接收方式 第一种 属性值是数组,每一个成员代表一个接收的属性名称 第二种 属性值是对象 key表示接收的属性名称 value有三种形式: 可以是类型的构造函原创 2021-01-19 10:57:24 · 89 阅读 · 0 评论 -
自定义事件$on, $emit, $off ,订阅消息,发布消息,注销消息
1 自定义事件vue也实现了观察者模式,提供了订阅消息,发布消息,注销消息等方法 $on(type, fn) 订阅消息方法 type:消息名称, fn:消息回调函数,参数是由$emit方法传递的 $emit(type, ...args) 发布消息方法 type:消息名称 ...args:从第二个参数开始,表示传递的数据 $off(type, fn) 注销消息方法 type:消息名称 fn:消息回调函数 组件是一个完整独立的个体,因此彼此之间数据不会共享,所以发布消息与订阅消息必原创 2021-01-19 10:25:46 · 564 阅读 · 0 评论 -
vue实现歌词滚动
请求回来的歌词文件是下面的形式‘[00:00.000] 作词 : 林夕↵[00:01.000] 作曲 : Robert Lay↵[00:14.310]如果 兄妹相称太多↵[00:19.610]醒不起喜欢我’1 先处理歌词 // 处理歌词,转化成key为时间,value为歌词的对象 let lyricArr = data.lrc.lyric.split('[').slice(1); // 先以[进行分割 let lrcObj = {}; lyricArr.f.原创 2021-01-15 13:07:59 · 6207 阅读 · 4 评论 -
vue transition 过渡动画
transitionvue允许我们在显示隐藏元素以及创建元素过程中,添加过渡效果transition元素(组件)是由vue提供的,可以为内部的元素添加过渡效果过程演示v-enter:过渡的初始状态(隐藏);在过渡开始前被添加,在过渡开始时会被移除v-enter-to:过渡的结束状态(显示);在过渡开始时被添加,在过渡完成时会被移除v-enter-active:这里包含了上面的v-enter、v-enter-to两个时间段,在这里可以对上半场过渡定义过渡时间、曲线等v-leave:过渡的初原创 2021-01-14 11:36:13 · 2002 阅读 · 0 评论 -
vue ref属性
1 ref想在脚本中,获取模板中的元素或者组件,可以使用ref属性分成两步 第一步 为元素或者组件添加ref属性,属性值代表它的名称 第二步 在脚本中,通过this.$refs属性,即可获取对应的元素或者组件 为元素设置ref,获取的是源生的DOM对象,要使用源生的API操作 对组件设置ref,获取的是组件实例化对象<demo ref="test"></demo><h1 ref="title">hello123</h1> moun原创 2021-01-13 16:36:26 · 254 阅读 · 0 评论 -
vue-router配置路由实现返回上一页,上一页页面数据留存
vue在返回上一页的时候执行this.$router.go(-1) ,默认会让上一页重新执行一遍生命周期。有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。<keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition 相似,<keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。原创 2021-01-13 10:23:19 · 8622 阅读 · 1 评论 -
element-ui 表单校验
1 html <!-- 写样式:1 placeholder, 2 label, 3 label-width --> <!-- 校验:1 v-model, 2 model, 3 prop, 4 rules --> <!-- 提交数据:1 事件, 2 ref, 3 validate --> <el-form label-width="100px" :model="data" :rules="rules" r原创 2021-01-12 21:42:19 · 300 阅读 · 0 评论 -
vue路由router传参数方式
1 调用this.$router.push实现携带参数的跳转 this.$router.push({ path:`/About/${id}` }) // 或者使用路由的name this.$router.push({ name: "About", params: {id: id} })// 在路由中配置{ path: '/about/:id', name: 'About', componen原创 2021-01-12 21:35:08 · 316 阅读 · 1 评论 -
vue监听路由参数变化,路由变化的时候刷新数据
1 vue监听路由参数变化,路由变化的时候刷新数据path的路径还是本页面,通过query传入query数据,但是页面数据没有刷新<router-link tag="div" :to="{path:'/playList',query:{id:item.id}}"></router-link>所以需要在watch中监听路由,当路由的query数据发生变化的时候,请求数据 watch: { // 监听路由变化,路由变化的时候请求页面数据原创 2021-01-12 21:21:31 · 2617 阅读 · 0 评论 -
Vue点击按钮,回到顶部
HTML<div class="footer"> <div class="gotop" v-show="gotop" @click="toTop">Top</div></div>css.footer .gotop { text-align: center; position: fixed; right: 50px; bottom: 30px; cursor: pointer; padding: 10px; bord原创 2021-01-12 13:20:55 · 1768 阅读 · 0 评论 -
vue实现分页
html部分 <div class="page"> <span class="pre" @click="prePage">< 上一页</span> <template v-for="(item, index) in page"> <span :class="{num:true, choosed: offset==item}" :原创 2021-01-12 13:05:43 · 1106 阅读 · 0 评论 -
vue路由router
1 路由数据当我们在vue中注册了路由之后,每一个组件都会具有两个属性:$route, $router$router 表示路由实例,包含一些切换路由的方法push 进入一个新页面back 返回上一个页面go 返回第一个页面replace 替换当前的页面forward 进入下一个页面$route 存储了路由相关数据路径,名称,query,动态路由数据(params)等等注意:在hash策略下,hash属性代表的是第二个#后面的内容由于这些数据都设置了特性,因此既可以在模板中使用,原创 2021-01-12 21:05:45 · 259 阅读 · 0 评论