Vue.js
文章平均质量分 69
王小柯_0314
这个作者很懒,什么都没留下…
展开
-
Vue实战:基于Vue-ElementUI的权限管理系统之动态路由和动态按钮显示
1.首先登录2.调用permission.js 的router.beforeEach((to, from, next)to:进入到哪个路由去from:从哪个路由离开next:路由的控制参数,常用的有next(true)和next(false)首先判断进入的是否是login页面?然后再判断是否已经登陆?已经登陆了就进入你要跳转的页面,没登录就进入login页面为了更加明显一点,我将页面命名的简单一些,ps:Login.vue是登陆页面Index.vue是全局页面(包含公共导航组..原创 2021-10-18 11:33:29 · 1740 阅读 · 0 评论 -
Vue实战:常见报错,及原因
原创 2020-12-24 15:02:59 · 255 阅读 · 0 评论 -
Vuex的mutation,getters和actions的使用
Vuex的使用方法什么是vuexvuex是专门为vue.js设计的集中式状态管理架构。状态?我们理解为在data中的属性需要共享给其他vue组件使用的部分就叫做状态,简单的说就是data需要公用的属性。vue项目中的父子组件的交互是单通道传递,父组件通过props向子组件传递参数,而在子组件中不能直接修改接收的参数,而是需要自定义方式Vuex的mutation,getters和actions的使用1.state用来存储数据2.mutations:用来异步调用mutations中.原创 2020-12-09 17:18:04 · 1626 阅读 · 0 评论 -
前后端分离(前端渲染) 前后端不分离(后端渲染)
前端渲染,后端渲染原创 2020-12-03 14:34:53 · 732 阅读 · 0 评论 -
vue.js之webpack安装
webpack :现代的javaScript应用的静态模块化打包工具webpack ,node,npm 之间的关系:webpack安装原创 2020-12-03 10:59:01 · 97 阅读 · 0 评论 -
vue element-UI条件查询渲染到table表格
table表格数据对应表格某行操作时的编辑和删除按钮editForm表单把对table表格某行数据的获取和渲染到editForm表单store里面的actions模块里的方法api.user.js里的findPrimaryKey方法出现的问题:点击编辑按钮通过$index,row定位到ListUser的某行 (ListUser[index])并且把所有数据渲染到编辑模态框(this.editForm=JSON.parse(JSON.stringfy(LIstU原创 2020-12-09 14:48:46 · 4009 阅读 · 0 评论 -
vue.router和vue.route
vue.js基础动态路由vue动态路由vue.router 任何一个组件$router拿到的值都是一样的(所以才能进行push,replace操作)vue.route 表示当前正在活跃的路由原创 2020-12-04 18:35:28 · 92 阅读 · 0 评论 -
vue-router导航守卫
目的:监听跳转的过程生命周期:任何vue实例和组件都是有生命周期的。原创 2020-12-04 20:04:01 · 87 阅读 · 0 评论 -
Vue实战:vuex的五个基本属性和用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vuex有五个核心概念: state,getters,mutations,actions,modules。 1. state:vuex的基本数据,用来存储变量 2. getter:从基本数据(state)派生的数据,相当于state的计算属性 3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用...转载 2020-12-09 18:46:33 · 2766 阅读 · 0 评论 -
Vue实战:Vuex:namespace:true使用说明
namespaced:true使用使用模块中的mutations,getters,actions时候,要加上模块名,例如使用commint执行mutations时格式:模块名/模块中的mutationsxxx/setUserInfothis.$store.commit("userInfo/setUserInfo",userInfo)获取属性时同时加上模块名格式:$store.state.userinfo.username...原创 2020-12-09 18:53:36 · 744 阅读 · 0 评论 -
vue-cli3脚手架目录结构
原创 2020-12-06 14:07:07 · 881 阅读 · 0 评论 -
vue实现Axios实现跨域请求
在前后端项目中,关键的步骤就是前端发送请求访问不同端口的服务器获取数据本项目采用的是axios来实现跨域请求一、安装axios使用npm安装npm install axios --save二、在utils文件下request.js中导入axiosimportaxiosfrom'axios'//引入axios三、创建axios实例四、配置aios跨域请求...原创 2020-12-06 15:05:46 · 800 阅读 · 0 评论 -
Element-UI表格数据遍历 <template slot-scope=“scope“>列表渲染
在el-table中,:data="tableData"是数据集。每个el-table-column,我们只需要使用prop="date",就可以将该列的数据绑定为该数组所有的对象中的“date”属性,我们可以理解为对于tableData,这里始终取的是tableData[$index].date。table按照tableData这个数组的长度来生成多少行,按照有多少个el-table-column来生成多少列。tableDate 为返回的json数据按照我们前面的理解,按照有多少...原创 2020-12-02 15:00:34 · 6112 阅读 · 0 评论 -
Vue实战:require.context实现前端自动引入同一个文件夹下的多个文件
require.context() 实现前端自动引入同一个文件夹下多个文件你还可以通过require.context()函数来创建自己的context。可以给这个函数传入三个参数:一个要搜索的目录,一个标记表示是否还搜索其子目录,知识点1:可用于模块的批量导入,类同于import引入的同一个文件夹下的多个文件require.context(directory,useSbdirectories=false,regExp=/^.//);参数:1读取文件的路径,2是否遍历文...原创 2020-12-09 18:38:47 · 913 阅读 · 0 评论 -
VUE =>箭头函数
箭头函数const aaa=function(){}const obj ={ccc(){}}const ccc=(参数列表)=>{}//有两个参数const sun=(num1,num2)=>{return num1+num2}//有一个参数const power=(num)=>{return num*num}const power=num=>{return num*num}//函数代码块中有一行代码const mul=(num1,nu.原创 2020-12-03 14:06:47 · 301 阅读 · 0 评论 -
vue-生命周期,created和mounted的区别
本文章来源于:https://segmentfault.com/a/1190000008570622什么是生命周期:Vue实例有一个完整的生命周期,也是从开始创建,初始化数据,编译模板,挂载Dom,渲染-》更新-》卸载等一系列的过程,我们称这是vue的生命周期。Vue实例创建到销毁的过程是生命周期。在Vue的生命周期中,他提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局在这些事件相应方法中的this指向的是整个vue实例。.原创 2020-12-15 23:50:20 · 621 阅读 · 0 评论 -
Vue CLI3基础,关闭Eslint ,Vue.use
一.Vue CLI关闭EslintruntimeComplier和runtimeOnlyvue程序运行的流程 : runtimeComplier:template->ast->render->vdom->UI runtimeOnly: render->vdom->UI(1.性能更多,2.代码量少)vue-cli3 ...原创 2020-12-03 14:56:03 · 564 阅读 · 0 评论 -
vue-安装依赖
安装依赖cd my-projectnpm install (换源安装: npm install --registry https://registry.npm.taobao.org )启动:npm run dev打包:npm run build安装额外的依赖包1. 两种依赖包的安装方式1.1 项目依赖包npm install --save vue1.2 开发依赖包npm install --save-dev webpack2. less依赖包npm install原创 2021-08-25 11:01:28 · 1577 阅读 · 0 评论 -
vue-Element-Ui前后端分离前端实现页面登陆
登陆页面views->login.vuerefref="loginForm"//ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上//如果是在普通的DOM元素上使用,引用指向的就是DOM元素,如果是在子组件上,引用就指向组件的实例。页面登陆的login.js代码$refs.loginForm:$refs$refs.loginForm//$refs是一个对象,持有已注册过ref的所有的子组件。...原创 2020-12-06 17:03:20 · 1133 阅读 · 1 评论 -
SpringBoot实战:SpringBoot Mybatis vue Element-UI 实现多条件查询 日期比较
后端部分:Mapper层dao层service层constroller层前端部分:api层store层vue层vue.jsvue页面 <el-form :inline="true" class="demo-form-inline"> <el-form-item label="ID"> <el-input placeholder="输入ID查询" v-model="ID"&原创 2020-12-31 17:48:08 · 1475 阅读 · 0 评论 -
javaScript ES6 export 与export defalut
概述ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,是浏览器和服务器通用的模块解决方案。ES6中,在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等。export命令模块功能主要有两个命令构成:export和import。export命令相当于规定模块的对外接口。import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内.原创 2020-12-06 15:35:37 · 487 阅读 · 0 评论 -
统一资源定位符
协议类型://服务器地址/[:端口号]/[/资源层级UNIX文件路径]文件名[?查询][#片段ID]http://127.0.0.1:8088/dept/findAll/{id}http:协议127.0.0.1:服务器8088:端口号dept:路径findAll:查询{id}:片段ID原创 2020-12-04 18:34:54 · 209 阅读 · 0 评论 -
vue-router 页面跳转,重定向,动态路由
路由和传送路由是决定数据包从来源到目的地的路径传送将输入端的数据转移到合适的输出端router.jsApp.vue代码方式页面跳转原创 2020-12-03 14:56:59 · 1665 阅读 · 0 评论 -
SpringBoot,Vue实战:Vue-Element ,checkBox应用 SpringBoot 前后端分离 实现批量修改
vue-Element前端代码storeapi后端代码原创 2020-12-31 10:43:28 · 366 阅读 · 0 评论 -
Vue实战:form表单验证
学习Element-UI自带表单验证功能Form组件提供了表单验证功能,只要通过rules属性传入1约定的验证规则,并将Form-Item的prop属性设置为需要校验的字段名即可。1.验证长度为3-5的字符串<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item lab原创 2020-12-18 13:38:52 · 1585 阅读 · 0 评论