vue
文章平均质量分 56
下雪不过冬天
每天多敲一丢丢。
展开
-
RBAC权限控制
RBAC基于角色的权限控制:用户->角色->权限权限有两种,一种是路由菜单权限(用户无法访问对应的路由),另外一种是按钮权限菜单权限基于路由拦截的权限控制菜单不会隐藏,点击则跳转到403一般用户登录后,后台返回该用户可以使用的路由表。这个路由表返回后,可以进行对应的路由拦截,如果要跳转的路由不在对应的路由表中,则跳转到403无法隐藏对应的不可用菜单 会导致用户不知道自己有哪些权限利用路由拦截 + 菜单路由过滤的操作所有路由都生效,菜单隐藏,手动输入url访问没有权限的原创 2021-07-24 11:56:51 · 160 阅读 · 0 评论 -
可复用组件封装的意义是什么?
可复用组件本质上来讲,封装可复用组件,为了减少代码重复编写。属性 props事件监听 @自定义事件插槽 slot属性我们可以通过给子组件标签上添加属性,子组件中通过props接收这些属性,并且根据这些属性将组件设置成不同的养殖自定义事件组件内容的属性变化,我们要通过自定义事件通知父组件,父组件通过@自定义事件名去监听到对应的内容的改变插槽如果我们想要让用户在子组件标签中添加的内容出现在我们的组件里。可以使用slot,如果有多个位置需要添加,则使用具名slot,如果我们想要给用户留下数原创 2021-07-20 16:31:58 · 601 阅读 · 0 评论 -
render函数的使用
render在我们的组件中,可以使用render来代替template常规组件<template> <div></div></template>render组件export default { render (createElement) { return createElement('div', { }, "") }}createElement在render函数中有一个函数参数,这原创 2021-07-20 16:29:32 · 1506 阅读 · 0 评论 -
什么是render函数?什么时候会用到render函数?
为什么要用render函数?什么时候会用到render函数总结如下:render方法:实质就是生成template模板的;通过调用一个方法来生成,而这个方法是通过render方法的参数传递给它的;这个方法有三个参数,分别是标签名,标签的相关属性,标签内部的html内容;通过这三个参数,可以生成一个完整的模板。备注:只有在我们要实现对应的自己封装可复用的组件时,需要通过js配置传递过去渲染结构,才会用到render。...原创 2021-07-20 16:11:32 · 2060 阅读 · 0 评论 -
Vuex-getters、modules
1、vuex中的state越来越多,会导致store越来越臃肿,我们可以利用modules给我们对应的数据资源划分模块。2、module有自己独立的state、mutations、actions、getters、modules3、 模块中的state如何获取:this.$store.state.模块名.state中的数据名4、 getters如何获取this.$store.getters.模块名.getters中的名字5、模块一定要加namespaced: true 这个配置!!!,原创 2021-07-13 20:13:57 · 483 阅读 · 0 评论 -
ElementUI表单验证的步骤
一、ElementUI表单验证ElementUI的表单验证借助了async-validator,该模块内置了很多原生类型的验证,如: string, number等相关类型1、给el-form绑定model属性<template> <el-form :model="formData"></el-form></template><script> export default { data () { return原创 2021-07-08 12:28:05 · 588 阅读 · 0 评论 -
nextTick、$ref的用法
1、nextTick在我们Vue中,如果我们需要在DOM渲染完成后执行一些代码,一般就是获取DOM的操作。我们可以使用nextTick{ created () { this.$nextTick(() => { // 可以使用回调函数的写法 // 这个函数中DOM必定渲染完成 }) this.$nextTick().then(() => { // 也支持promise // 这个函数中DOM必定渲染完成 })原创 2021-07-07 14:21:14 · 298 阅读 · 0 评论 -
项目中如何使用Element-UI?
一、ElementUI安装ElementUInpm i --save element-ui# 或者yarn add element-ui1.1 在项目中引入找到main.js,引入模块和样式import Vue from 'vue'import App from './App.vue'// 引入elementuiimport ElementUI from 'element-ui'// CSS可以直接通过import在组件中引入import 'element-ui/lib/theme原创 2021-07-07 14:18:12 · 404 阅读 · 0 评论 -
什么是导航守卫?如何使用?
导航守卫所谓导航守卫,就是在路由跳转时对路由进行拦截,然后改变跳转方向的相关方法路由信息对象组件中获取路由信息对象使用 this.$route ,在导航守卫中有 to , from,这两个分别代表要跳转的路由信息对象,和跳转前的路由信息对象全局前置守卫// router就是new VueRouter()router.beforeEach((to, from, next) => { next() // 如果不写next()则所有都无法正常跳转})next()next是进行路由导原创 2021-07-06 12:18:02 · 290 阅读 · 0 评论 -
利用Postman工具测试接口
Postmanpostman用来测试我们的接口,在工作中,后台会给我们提供接口文档,我们要使用对应的接口文档进行接口的测试,而一个好的接口测试工具,会让我们在工作中事半功倍。安装安装只需要双击打开安装工具即可,等待几分钟后,桌面会出现postman的快捷方式,点击快捷方式,进入下面的页面可以选择登录 创建免费账户,也可以快速跳过,无登录进入应用测试接口GET请求请求方式选择GET,分别将请求地址、请求参数填入对应的位置,点击send发送既可查看请求结果POST请求请求方式选择POST,原创 2021-07-06 12:16:55 · 549 阅读 · 0 评论 -
利用json-server来mock数据
JSON-SERVERjson-server中文的博客安装npm i -g json-server创建项目创建一个文件夹在文件夹中新建db.json运行项目在对应文件中打开命令行输入命令json-server --watch db.json项目既可运行成功获取到的接口获取到的接口和db.json中的内容有关,db.json中应该是个对象,包裹很多的数组{ "资源名": [ { "key": "value" } ]}GET /原创 2021-07-06 12:15:52 · 176 阅读 · 0 评论 -
嵌套路由的写法
嵌套路由嵌套路由又叫子路由,实现相关路由组件在某个路由组件的 router-view 中渲染,而不是在 app 的 router-view 中渲染children嵌套路由的配置使用 children 属性children中的定义方式,和routes一致{ path: "", component: Component, children: [ { path, component } ]}!!!!!!注意!!!!!!子路由的 component 会被原创 2021-07-05 13:22:27 · 557 阅读 · 0 评论 -
路由参数的获取
路由参数获取意义在哪?获取到url中的参数然后利用参数发起ajax请求,然后获取我们想要的数据什么时候需要使用?如文章详情,商品详情,使用相同的组件,渲染不同的数据,我们就可以通过传递不同的路由参数,获取不同的数据,渲染相同的组件$route当我们使用路由时,vue-router会给我们所有的组件里都添加一个 data 叫 $route ,这个 $route 代表的是我们的路由信息path 路径fullPath 携带参数的完整路径query ?后的查询参数params 动态路由参数原创 2021-07-05 13:21:16 · 4742 阅读 · 0 评论 -
VueRouter的使用
文章目录一、VueRouter的基本概念1.2 路由组件1.3 路由配置1.4 路由对象1.5 视图二、VueRouter的基本配置三、VueCli使用VueRouter3.1 自己配置(建议直接安装【见第四章】)步骤1、在src中创建router、views文件夹步骤2、 在router文件夹中创建index.js步骤3、 在main.js中引入router对象步骤4、 到App.vue添加router-view组件3.2 直接安装步骤1 在命令行创建项目步骤2 选择最后一个步骤3 选择Router,取原创 2021-07-02 13:30:48 · 846 阅读 · 0 评论 -
vue组件的使用
文章目录一、组件的初步认识1.1 使用组件的原因?1.2 组件本质是什么?1.3 全局组件1.3.1 全局组件的写法:1.4 局部组件的写法二、组件中的data为何是个函数?2.2 为何是个函数的解释三、动态组件3.1 动态组件写法一3.1 动态组件写法二四、生命周期4.1 什么是生命周期?4.2 vue的生命周期可以分为三大阶段:五、组件通信一、组件的初步认识1.1 使用组件的原因?为了提高代码的复用性。1.2 组件本质是什么?可复用的vue实例。 组件需要注册后才可以使用。分为全局组原创 2021-06-28 19:08:54 · 397 阅读 · 3 评论 -
vue的计算属性、watch监听、过滤器
计算属性我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护。比如以下代码<div> {{text.split(',').reverse().join(',')}}</div>表达式里面包含了3个操作,并不是很清晰,有时候可能会更加复杂,所以在遇到复杂的逻辑时,我们应该使用计算属性。上例可以用计算属性进行改写:<div id="app"> {{reverseText}}</div><转载 2021-06-24 11:57:40 · 163 阅读 · 0 评论 -
vue基础知识二
vue学习第二天经过前一天的知识点学习,那么今天我们主要以案例练习为主,多敲代码,提高代码量才是学习编程的王道。1、key的作用假设现在有一个需求,在页面循环data中的数组。很简单,有手就行,分分钟写出来。 <div id="app"> <ul> <li v-for="(item, i) in list"> <input type="checkbox"> {{item.name}} </li>转载 2021-06-24 10:45:31 · 80 阅读 · 0 评论 -
vue基础知识一
VUE基础1、vue是什么?目前前端有三个非常流行的框架,非别是angularjs,reactjs,vuejs。而这三个当中,vuejs的受欢迎度目前是最高的,而开发vuejs的就是一个中国人尤雨溪。其它框架的关联借鉴angular的模板和数据绑定技术借鉴react的组件化和虚拟DOM技术基本概念vue.js的官方文档中说vue是渐进式JavaScript框架。我们来一个一个解释其中的概念。渐进式vue全家桶其实是包含很多vue的扩展插件的,比如以下。vue-cli: vue脚手架vu转载 2021-06-24 10:28:41 · 390 阅读 · 0 评论