vue
--
weixin_43297321
这个作者很懒,什么都没留下…
展开
-
vue router中meta路由元信息&多套路由权限匹配
路由meta 路由记录 / 路由元信息可以给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作,供页面组件或者路由钩子函数中使用。页面中使用:this.$route.meta.xxx页面中得到路由信息:$router.options.routes那么就可以根据路由信息,动态创建页面中的导航。根据不同的用户权限分配不同的路由导航如何做到呢?有多种方式,下面看看其中一种方式:1、可以提前创建几套路由规则,然后在需要切换的页面中进行引用。示例:2、原创 2020-08-17 10:19:13 · 1497 阅读 · 0 评论 -
node前后端数据交互&post参数发送方式URLSearchParams、qs
来看看前端向后端发送数据的操作,以及后端接收前端传递过来的数据,返回一些信息的过程。先看下前端向后端是怎么发送数据的。1、axios拦截器 请求封装 url封装 调用封装的请求(1)创建util文件夹,来编写vue的拦截器,命名比如request.js。import axios from "axios"// 创建axios 赋值给常量service const service = axios.create();// 添加请求拦截器(Interceptors)service.interc原创 2020-08-16 13:59:35 · 2666 阅读 · 0 评论 -
JSON Web Token 简介&小案例(vue+node)
JWT简介JSON Web Token 简称 JWT,是一种认证机制,让后台知道请求是来自于受信的客户端。作为一种跨域认证解决方案,有时我们也会称呼它为JSON Web令牌。JWT 的原理JWT 的原理是,服务器认证以后,生成一个 JSON 对象,发回给用户,就像下面这样。{ "姓名": "张三", "角色": "管理员", "到期时间": "2018年7月1日0点0分"}以后,用户与服务端通信的时候,都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用原创 2020-08-16 11:23:03 · 1277 阅读 · 0 评论 -
ECharts图表 HTML页面使用&vue组件使用
EChartsECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。官网介绍echarts:https://echarts.apache.org/zh/feature.htmlHTML页面使用官方实例展示:https://echarts.apache.org原创 2020-08-15 11:45:06 · 1896 阅读 · 0 评论 -
vue v-for截取前几位数组的方法
方法一:<div v-for="(item, index) in articleList.slice(0,1)" :key="index"> 数组{{index}}</div>方法二:<div v-for="(item, index) in articleList" v-if="index < 1" :key="index"> 数组{{index}}</div>注意!!!不要写 arti转载 2020-07-30 19:55:35 · 2605 阅读 · 0 评论 -
vue 纠错笔记1-Cannot read property ‘comicCarousel‘ of undefined“
提示没有定义变量,但明明我在vuex中定义了。仔细想了一下,我是异步请求数据,然后赋值给this.$store.state中的变量,所以,在渲染的时候,可能出现了未等数据请求到,就已经页面渲染了。这样的话,就会出现上面的一种错误情况。再看下我的代码,通过计算属性染回的值判断是否渲染部分页面。如果在计算属性的函数里面不进行一下判断,会造成有计算属性方法使用的地方渲染不出来。所以,还是加上判断吧。如果有更好的办法了,在添加。发现有个跟我出现一样问题的兄弟:https://www.cnblogs原创 2020-07-30 14:58:55 · 108 阅读 · 0 评论 -
vue脚手架:动态路由传参(params、query)
先来个大总结index.js 动态路由规则参数声明:1、params 需要声明参数{ path:"/getdata/:key1/:key2", name:"getData", component:()=>import("@/views/getData.vue")}2、query 不用设置参数{ path:"/getdata", name:"getData", component:()=>import("@/views/getData.vue")}params原创 2020-07-23 17:04:01 · 4759 阅读 · 1 评论 -
仅仅是 安装vue脚手架&配置端口、热更新等
我用的编辑器是VSCode,可以直接打开终端。如果大家用其他不同的编译器的话,其实可以直接用cmd命令行打开,然后进行安装操作。1、安装vue和cli命令行npm install -g @vue/cli如果网速不好的话,可以尝试把npm的镜像源修改成国内的,或者使用淘宝镜像,配置过程如下:npm config set registry https://registry.npm.taobao.org//测试npm config get registry//安装淘宝镜像 cnpm (非必装,网络原创 2020-07-20 17:02:24 · 385 阅读 · 0 评论 -
验证:不使用v-model指令,双向绑定能否实现
vue 是 基于 MVVM 框架的,MVVM实现了双向绑定,但 vue 还有个指令v-model也能事项双向绑定。那么,问题来了,在不使用v-model指令的情况下,MVVM能实现双向绑定更新数据吗?答案:能。举个例子:简单的一个输入框,输入数据,回车,添加任务。使用v-model,输入框里的数据实时改变,插入到任务数组中的数据也进行改变;但我现在不关心单个数据的变化,我想看下,如果不使用v-model,任务数组改变后,能不能显示在页面上。<!-- 验证内容:不使用指令v-model,查看是原创 2020-07-16 11:27:49 · 1051 阅读 · 0 评论