![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 58
Java全栈研发大联盟
好记性不如烂笔头,好好学
展开
-
Vue和后端开发的参数传递操作方式(包括增、删、改、查)
一、查询操作比如vue里的js这样写queryStudentList(tableQuery, tablePage) { return request({ url: '/queryStudentList', method: 'post', params:{ ...tablePage }, data: { ...原创 2020-04-16 17:28:40 · 3890 阅读 · 0 评论 -
vue+ElementUI实现文件的单个下载,以及批量压缩下载
一、单个文件下载思路很简单: 当页面加载时,那么下面的href里就会执行downloadFile()这个函数,然后 downloadFile()里面访问后台接口,得到文件流,然后赋值给href属性,所以当我们点击“下载”时,浏览器就会去下载文件了前端代码如下:<el-link type="primary" :href="downloadFile(scope.row.attachment...原创 2020-04-16 12:42:32 · 6422 阅读 · 3 评论 -
vue+elementUi的文件上传
讲解:uploadUrl是上传到文件服务器的后端接口地址,比如UPLOAD_URL: '"http://127.0.0.1:8080/myblog/common/file/upload"' <el-upload class="upload-demo" :action="uploadUrl" ...原创 2020-04-16 09:10:02 · 1978 阅读 · 0 评论 -
vue + element 表格多选框回显
项目开发使用的elemnetUI的table组件,牵扯到一个多选框的回显机制,这里记录一下。那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效:<el-table row-key="id" :data="tableData" v-loading...原创 2020-04-16 08:37:42 · 12519 阅读 · 0 评论 -
Vue里的ElementUi点击行 如何获取 Table 的行索引
文档中有一个:row-class-name="tableRowClassName"属性,可以获取到当前行的index, 看下面代码,注意 :row-class-name是写在el-table标签上的,不要写错了位置哦!<template> <el-table :data="tableData2" style="width: 100%" :row-......原创 2020-04-16 08:20:51 · 8497 阅读 · 0 评论 -
Vuejs报错error: Unexpected console statement (no-console) at src\
解决方法:在项目中添加.eslintrc.js文件,与package.json同目录级,如下所示代码如下:module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', 'eslint:recommended' ], rules: ...转载 2020-01-08 16:06:03 · 1448 阅读 · 0 评论 -
vue-router的两种模式(hash和history)及区别
为什么要有hash 和history?对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义。前端路由的核心,就在于——改变视图的同时不会向后端发出请求。为了达到这一目的,浏览器当前提供了一下两种支持:1:hash - 即地址栏URL中的 # 符号(此hash不是密码学里的散列运算)比如这个URL:http://www..........原创 2019-10-12 11:30:47 · 1100 阅读 · 0 评论 -
vue mock数据,模拟后台接口返回数据
在前端开发过程中,有后台配合是很必要的。但是如果自己测试开发,或者后台很忙,没时间,那么我们需要自己提供或修改接口。下面提供两种方式,第二种更简单,个人推荐第二种。第一种、mock文件方式1、安装,开发环境npm i mockjs -D2、在src目录下新建mock目录,结构如下:3、index.js内容如下:const Mock = require('mockjs');//格式...转载 2019-10-12 10:28:26 · 2349 阅读 · 0 评论 -
vue2路由的<routerlink>和router.push()
一、<router-link的使用<router-link>组件支持用户在具有路由功能中的点击导航。通过to属性指向目标地址,默认渲染成正确的a标签1.to属性 字符串或是对象类型点击会立刻把内部to值传送到router.push() (解释:router.push(location) 就相当于我们用鼠标点击了location这个a链接一样,本文后面有对router.pu......原创 2019-08-29 09:37:29 · 1937 阅读 · 0 评论 -
vue插槽、具名插槽和作用域插槽
插槽使用场景是;如果子组件需要显示的内容并非来自本身,而是父组件传递进来的,而假如直接按下面这样写,是不可以实现的,因为如果me-component没有包含一个 <slot> 元素,则任何传入它的内容都会被抛弃:要实现上面的使用场景,可以利用插槽:<div id="app"> <me-component> <h...转载 2019-08-28 12:39:06 · 1115 阅读 · 2 评论 -
vue的mixins的使用
mixins就是混入。一个混入对象可以包含任意组件选项。同一个生命周期,混入对象会比组件的先执行。一个混入自身以一个对象的形式存在,如var mixin = { },它可以包含任意组件选项。在调用方中,调用混入对象使用mixins: [],接收一个混入对象的数组,也就是说可以一次混入多个混入对象。我们一起来看个案例吧export const mixinsTest = { meth...原创 2019-08-28 11:18:52 · 589 阅读 · 0 评论 -
Vue高级API - directives 自定义指令
背景除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 从一个输入框自动聚焦的案例入手:正常情况下,考虑复用性,自定义一个指令我们希望能给全局使用,因此选择全局注册Vue.directive('foc......原创 2019-08-28 09:38:48 · 868 阅读 · 0 评论 -
Vue中main.js,App.vue,index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到:index.html—主页,项目入口App.vue—根组件main.js—入口文件那么这几个文件之间的联系如何呢?1.先看index.html中的内容:(为了很好的标识各个文件,我对各文件进行了文字标记)2.在App.vue中,我做了如...转载 2019-08-13 10:40:39 · 1232 阅读 · 0 评论 -
vue中 localStorage的使用方法(详解)
vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。(1).储存数据( 解释:比如java后端通过r......原创 2019-08-09 17:11:43 · 4585 阅读 · 0 评论 -
如何新建一个vue项目(图文详解)
定好目标,首先应该想到的就是安装环境,搭建框架,一步一步的完成最基础的新建一个Vue项目的目的。第一步npm安装步骤:到node 官网 选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可。 输入node -v,如果出现版本信息即表示安装成功。第二步:使用淘宝NPM 镜像输入npm install -g cnpm --registry=http://registry.np...转载 2019-08-09 16:54:59 · 22841 阅读 · 8 评论 -
如何使用ES6模块export,export default和import
ES6使用 export 和 import 来导出、导入模块,也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。使用export default命令,为模块指定默认输出。1. 变量的导入,导出//api.js 导出var age= 13var name = '小红'export {age,name}// 使用export导...转载 2019-08-09 09:53:58 · 875 阅读 · 0 评论 -
webpack使用教程(2)
webpack使用教程(2)一、webpack中url-loader的使用举例:如下图在index.scss中添加background:url(),然后在main.js中引入index.scss文件,如果直接使用webpack进行打包编译mian.js会报错,因为如果webpack要处理 非JS类型的文件,我们需要手动安装一些合适的第三方loader加载器在这里我们安装url-loader...原创 2019-08-09 09:05:43 · 554 阅读 · 0 评论 -
Node.js安装及环境配置之Windows篇
一、安装环境1、本机系统:Windows 10 Pro(64位)2、Node.js:v6.9.2LTS(64位)二、安装Node.js步骤1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/2、选安装目录进行安装3、环境配置4、测试三、前期准备1、Node.js简介简单的说 Node.js 就是运行在服务端的 JavaScrip...转载 2019-07-19 10:42:54 · 366 阅读 · 0 评论 -
Vuex中store对象的4个属性state,Mutations,Getters,action
一、StateVuex的作用类似全局对象,Vuex 使用单一状态树,用一个对象State包含了整个应用层级的所有状态,你可以理解为这些状态就是一堆全局变量和数据。比如在下面的Store对象里面就给state属性里面添加了一个count变量 //创建一个 store const store = new Vuex.Store({ //state存储应用层的状态 state:{...原创 2019-08-13 14:24:04 · 4473 阅读 · 0 评论 -
Vuex案例
一、简介我们来看看对Vuex比较专业的介绍:Vuex是一个专为Vue开发的应用程序的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简而言之,Vuex采用类似全局对象的形式来管理所有组件的公用数据,如果想修改这个全局对象的数据,得按照Vuex提供的方式来修改(不能自己随意用自己的方式来修改)。二、优点Vuex状态管理跟使用传统...原创 2019-08-13 14:58:17 · 504 阅读 · 0 评论 -
在浏览器上安装 Vue Devtools工具
Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm ...转载 2019-07-24 10:02:37 · 486 阅读 · 0 评论 -
Vue.js学习总结第七天
Vue.js学习总结第七天一、使用vue实例的render方法渲染组件在讲render方法之前,先引入一个例子 ,如下面代码部分:<html> <head> <meta charset='utf-8'> <title></title> <!-- 引入vue.js --&g...原创 2019-07-15 12:35:08 · 562 阅读 · 0 评论 -
Vue.js学习总结第六天
Vue.js学习总结第六天一、使用children属性实现路由的嵌套通俗地说就是组件里面也有路由规则,大组件里面套小组件,根据路由情况有选择的展示某些小组件使用步骤:①在父组件里面写 <router-link to="/account/login"时,一定要带上父组件的路由②在路由规则对象定义里要给相应父组件对象映射规则下加上children属性,children属性里面写子路由信...原创 2019-05-02 10:29:13 · 638 阅读 · 0 评论 -
Vue.js学习总结第五天
Vue.js学习总结第五天一、父组件向子组件传值解释:主要是通过v-bind属性绑定,具体讲解看下面第2张图<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> <!-- 引入...原创 2019-05-02 10:26:38 · 601 阅读 · 0 评论 -
Vue.js学习总结第四天
Vue.js学习总结第四天一、动画中transition-group的使用transition-group 的主要作用是给其子元素设定一个统一的过渡样式(统一的动画样式),而不需要给每单个元素都用 transition 包裹起来和 transition 标签不一样,transition-group 不是一个虚拟 DOM,会真实渲染在 DOM树中。默认会是 span 标签,如下图所示,很...原创 2019-05-02 10:19:56 · 576 阅读 · 0 评论 -
Vue.js学习总结第三天
Vue.js学习总结第三天一、vue-resouce发起post、get、jsoup请求 我们没学过vue.js之前只知道jQuery的ajax(),现在我们来看一下如何用Vue发起ajax请求 **前提条件:** 首先我们需要导入包①vue的ajax方式的get请求如果是回调成功,那么得到的result.body.status就等于0,表示成功了...原创 2019-05-02 10:18:11 · 632 阅读 · 0 评论 -
Vue.js总结第二天
1.品牌案例—完成品牌列表的添加功能代码如下:下面是添加add的代码 (注意push()是从尾部插入的)再来看删除del()方法2.根据关键字实现对数组的过滤3、Vue中全局过滤器的基本使用(所谓全局的意思就是说“每个vue对象都可以使用(解释:假设每个vue对象绑定一个div框),那么全局的意思就是说每个div里面都可以使用到该全局过滤器”),下文第4点我们会讲“私有过...原创 2019-04-19 07:34:28 · 635 阅读 · 0 评论 -
vue.js的学习总结第一天
1.插值表达式写法2.vue.js里的“插值表达式”的闪烁问题的解决效果图:第一眼是下面这样然后转换成以上表述的就是“闪烁问题”。 接下来说一下插值表达式的“闪烁问题”的解决方案第一种方案:第二种方案: 直接使用v-text指令,这个指令的作用就是说“如果msg还没有解析到,那就不显示,等到msg解析到了才显示在浏览器上”但是v-cloak指令和v-text指令的作...原创 2019-04-16 17:14:58 · 501 阅读 · 0 评论 -
webpack-dev-server使用方法
webpack-dev-server使用方法首先来回顾以下webpack的内容首先,我们来看看基本的webpack.config.js的写法const path=require('path')//这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象module.exports={ //在配置文件中需要手动指定入口和出口 entry:path.join(...原创 2019-08-09 09:03:44 · 34365 阅读 · 5 评论 -
webpack的使用教程(1)
webpack的使用教程(1)一、先安装Node.js包第一步: 先去 Node.js官网下载安装Node.js,傻瓜式安装,一路next虽然我们把Node.js安装在D盘了,但是除了这个目录,其实在C盘的另外一个目录下,还有一个附带生成的目录【C:\Users\用户名\AppData\Roaming\npm】,这个目录是用来存放你通过npm全局安装的包。比如,如果你通过“npm i nrm...原创 2019-08-09 09:05:02 · 745 阅读 · 1 评论 -
vue.js脚手架vue-cli的使用
vue.js脚手架vue-cli的使用vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。一、安装vue-cli首先要确保安装了webpack执行结果截图如下:安装成功:安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现...原创 2019-08-08 16:06:03 · 675 阅读 · 0 评论