------【Vue】
_夜渐凉
_与其临渊羡鱼,不如退而结网
展开
-
No parser and no filepath given, using 'babel' the parser now but this will throw an error in t he f
nodejs搭建的vue项目,编译后在命令行发生警告:No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.可...原创 2019-09-25 11:41:07 · 13646 阅读 · 5 评论 -
Vue 中Promise 中的方法无法执行,this作用域的问题简析
Vue 中Promise 中的方法无法执行需求:填写单子的页面,需要跳转去其他页面填写相关内容解决:跳转前先将此页面填写的内容先保存,保存方法结束后再跳转遇到的问题:前端提示this.submitEvent('NotBack');方法报错代码一(错误) // 跳转 doTypeResult(){ ...原创 2018-12-25 10:32:17 · 13553 阅读 · 4 评论 -
Vue父组件引用子组件方法显示undefined问题原因及解决方法
大概理解为:在子组件初始化渲染时,不能立刻访问子组件属性或方法父组件:// 父组件引用子组件<PrintReport ref="PrintReport"></PrintReport>// 在父组件的调用子组件的initData方法this.$refs.PrintReport.initData('666666666');子组件:initDa...原创 2018-12-03 18:19:52 · 11672 阅读 · 2 评论 -
Vue之父子组件间通信实例讲解(props、$ref、$emit)
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。 在说如何实现通信之前,我们先来建两个组件 father.vue 和 child.vue 作为示例的基础。//父组件 &...转载 2018-12-03 14:09:40 · 838 阅读 · 0 评论 -
Vue 中父组件和子组件之间获取对方数据和方法
父组件获取子组件的数据和方法one在父组件中调用子组件时,定义一个ref(其实和选择器类似):<Common ref="commonChild" :pathologyId="form.pathologyId" />在父组件中获取子组件属性和方法写法:this.$refs.commonChild.属性this.$refs.commonChild.方法...原创 2018-11-30 12:49:06 · 452 阅读 · 0 评论 -
Vue中获取当前时间,可用于判断信息是否已过有效时间
<template> <div class="content-wrapper"> <section> <el-table border stripe :data="datas" highlight-current-row @current-change="han...原创 2018-11-16 18:53:58 · 10888 阅读 · 0 评论 -
Vue中通过路由传递参数
Vue中可以通过路由传递参数,具体实现也比较方便以 '/aaa/bbb?参数名='+参数值格式传递参数let self = this;let toPath = '/aaa/bbb?recordedSpeed='+self.recordedSpeed;self.$router.replace({path: toPath}); beforeRouteEnter接收vm.$ro...原创 2018-11-15 20:43:17 · 147 阅读 · 0 评论 -
Element UI级联选择器报错"TypeError: Cannot read property 'getElementsByClassName' of undefined"
当点击的时候第一层出现的报错(导致二级出不来) 原因:value 和 label的值未正确指定,此处value并不存在options数据中解决: 修改为:...原创 2018-11-08 18:23:19 · 7273 阅读 · 0 评论 -
在 Vue.js项目中如何定义全局变量&全局函数
在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录 token, 用户的地址信息等,这时候就需要设置一波全局变量和全局函数。目录 定义全局变量定义全局函数定义全局变量原理:设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用 export default 暴露出去,在 main.js 里面使用 Vue.pr...转载 2018-11-06 11:28:08 · 4814 阅读 · 1 评论 -
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
vue里面本身带有两个回调函数:一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。(数据更新后,dom会更新,最后才执行nexttick回调)...<ul id="demo"> <li v-for="item in li...转载 2019-01-08 11:49:06 · 1180 阅读 · 0 评论 -
Vue 中实现 excel文件上传功能
场景:上传excel表,并将excel表中的数据构建成实体 <div class="pull-right" v-if="doc"> <el-upload class="upload-demo" ...原创 2019-01-25 18:06:21 · 22756 阅读 · 4 评论 -
Element 中点击行如何获取 Table 的行索引
文档中有一个:row-class-name="tableRowClassName"属性,可以获取到当前行的index<template> <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName"> <el-t原创 2019-01-31 15:31:37 · 12269 阅读 · 4 评论 -
element的el-table 解决表格多页选择数据时,数据被清空
官网的表格数据多选例子:但当切换页数时,会自动触发方法:handleSelectionChange(val)且val为[],也就点击下一页时,把我们的数据都清空了然后就开启了我的手写解决模式...仅参考...在最后面发现原来官方已经提供了解决办法...并且非常简单...我打算用一个当前页的选择:batchSelection变量,与一个所有页选择:allBatchSel...原创 2019-09-16 15:48:17 · 7678 阅读 · 3 评论 -
解决element-ui中级联选择器(Cascader)出现空白选项的bug---空级联bug
使用element-ui级联选择器的详细过程请参考------------》element-ui之级联选择器的使用详细过程在使用element-ui级联选择器的过程中,发现出现 空级联 的bug首先我们分析出现空级联原因是:由于数据是从后台传递过来的,当后端的老铁使用递归算出菜单,然后转换成json传递到前端的时候。就会出现最底层 的子项中 的 children 为空数组,这样就会造...转载 2019-09-09 16:55:05 · 1412 阅读 · 0 评论 -
npm run dev启动报错解决:This is probably not a problem with npm,访问项目出现cannot get/
npm run dev启动一堆的报错,This is probably not a problem with npm. There is likely additional logging output above.而且返回的http://localhost:8080访问出现:cannot get/npm ERR! code ELIFECYCLEnpm ERR! errno 1...原创 2019-07-01 11:54:33 · 1613 阅读 · 0 评论 -
Vue 中全局自定义指令directive的使用,与系统切换用户刷新浏览器
1,场景在 main.js 中配置了全局自定义指令,希望达到切换用户类型时通过 update 重新渲染组件// 注册一个全局自定义指令,用于权限控制v-hasAnyRight = "'add,delete,update'"Vue.directive('hasAnyRight', { inserted: function (el, option) { // 判断用...原创 2019-03-19 15:04:18 · 1615 阅读 · 0 评论 -
Vue 中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题:动态生成的对象进行双向绑定是失败直接贴代码:<el-form :model="addClass" :rules="rules" ref="addClass"> <el-form-item label="表单分类名称" prop="NAME" :label-width="formLab转载 2019-03-07 09:23:01 · 238 阅读 · 0 评论 -
Vue 中Dialog 对话框,body内容跟随弹窗滚动问题解决
网上找了很久解决方案,都无法解决,其实只要加一个属性即可解决。场景: 父组件中引入子组件弹窗,弹窗出现后,浏览器右侧出现两个滚动条。 滚动鼠标滚动的是灰色背景。原因: 鼠标事件被背景body获取 ,而不是被弹窗所获取,因此滚动鼠标触发的是背景的滚动解决: 为子组件弹窗加入 append-to-bod...原创 2019-01-29 17:09:47 · 8666 阅读 · 1 评论 -
Vue 路由打开新窗口
一. <router-link>标签实现新窗口打开:官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持 target="_bla.转载 2019-01-29 15:06:01 · 338 阅读 · 0 评论 -
Vue 跳转相同路由不同参数,解决页面数据不自动刷新
vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。 传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是应该是路径之间的切换,也就是组件的切换 因此,如果需要跳转相同路由不同参数时,必须确保组件需要重新被渲染...原创 2019-02-01 09:18:03 · 18528 阅读 · 4 评论 -
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#[Object]‘的解决方法
发现问题1,运行一下以前的一个Vue+webpack的 vue仿新闻网站 小项目,报错由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v-2,点开错误的文件,标注错误的地方是这样的一段代码:就是 module.exports; 解决方法3,同过谷歌查找,和论坛各种搜索:原因如下:The code above...转载 2018-11-06 09:09:52 · 20415 阅读 · 0 评论 -
Vue中的 slot插槽的简单应用——input中嵌套按钮的效果
场景:需要一种类似于把按钮放在input最右边的效果解决办法:1,发现在Vue中怎么嵌套都出不了效果,网上搜到的一种html写法(但是和Vue中的el-table-column有些影响):<form role="form"> <div class="input-group"> <span class="input-group-a...原创 2018-11-01 18:28:10 · 14398 阅读 · 3 评论 -
Vue如何导入外部JS文件(ES6)
也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件,但是很是可惜,这写法。在es6,或则说vue环境下不支持真的写法是怎样?首先。我们要改造我们要映入的外部js文件,改成下面这个格式。主要是红色方块内部代码,我们需要将我们的模块“抛出”,让人能获取到代码:function realconsole(){ alert("hello.thanks u...转载 2018-09-30 09:40:10 · 42059 阅读 · 3 评论 -
Vue2.0 实现click点击当前li,动态切换class
1,文件内容为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法。 看详解:https://cn.vuejs.org/v2/api/#Vue-set这个案例需要注意的一点是:vue 中$index $key 已经移除了之前可以这样:<ul id="example"> <li v-for="i...原创 2018-09-04 16:31:43 · 6345 阅读 · 2 评论 -
Vue中的计算属性缓存 vs 方法
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果: <p>Reversed message: "{{ reversedMessage() }}"</p> // 在组件中methods: { reversedMessage: function () { return this.message.split('')....转载 2018-09-04 11:05:36 · 726 阅读 · 1 评论 -
Vue中的计算属性computed
计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="example"> {{ message.split('').reverse().join('') }}</div> 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示...转载 2018-09-04 10:59:55 · 420 阅读 · 0 评论 -
Vue中的计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子: <div id="demo">{{ fullName }}</div> ...转载 2018-09-04 10:44:16 · 198 阅读 · 0 评论 -
JavaScript concat() 方法
JavaScript concat() 方法JavaScript Array 对象定义和用法concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。语法arrayObject.concat(arrayX,arrayX,......,arrayX)参数 描述 arrayX 必需。该参数可以是具体的值,也可...原创 2018-09-04 10:08:49 · 706 阅读 · 0 评论 -
vue-router 2.0 常用基础知识点之router.push()
router.push(location)除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 UR...转载 2018-08-29 13:54:17 · 150 阅读 · 0 评论 -
组件Element中的Select选择器——远程搜索
<template> <div class="form-group"> <el-form-item label="所属机构" prop="org"> <el-select v-model="queryForm.org" clearable=&quo原创 2018-08-21 14:44:33 · 13435 阅读 · 5 评论 -
idea运行vue项目
File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认File - Settings - Plugins:搜索vue,安装Vue.jsRun - Edit Configurations...:点击加号,选择npm,Name为Run,packa...转载 2018-08-07 11:05:01 · 4004 阅读 · 0 评论 -
vue+axios 前端实现登录拦截(路由拦截、http拦截)
一、路由拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Index ...转载 2018-09-05 10:48:07 · 399 阅读 · 0 评论 -
组件Element中Radio和Select绑定值的属性区分
Radio和Select需要区分以下的是:在Radio中:绑定的值是label接收的<div class="row"> <div class="col-sm-6"> <el-form-item label="医生职称" prop="title"> <el-radio-原创 2018-09-05 15:42:21 · 2586 阅读 · 0 评论 -
vue router.push(),router.replace(),router.go()
1.router.push(location)=====window.history.pushState想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。// 字符串router.push('home') // 对象router.push({ path: 'ho...转载 2018-09-05 18:13:24 · 337 阅读 · 0 评论 -
Vue中BootStrap和分页组件 实现分页功能(页码过多时带省略号)
更新:其实vue中的分页插件结合上 spring data jpa 使用的效果非常好,使用更加方便:vue组件中: <div class="box-footer no-border"> <!-- 分页 --> <el-pagination ...原创 2018-09-27 15:59:18 · 8408 阅读 · 0 评论 -
Vue计算属性computed和方法methods的区别
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。 computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed; 简单示例: 要求:<input type="text v-mo...转载 2018-10-11 14:19:07 · 375 阅读 · 0 评论 -
vuex 2的action传参问题
https://segmentfault.com/q/1010000007185702 源码看(当然从api文档看也一样),dispatch最多就只接受两个参数,type和payload vuex.action 只能传递两个参数, 一个state是自动添加的,一个payload,是用户自己传到。 如果传了两个参数,第二个永远会是undefined。正确的操作为了避免a...原创 2018-09-26 18:24:14 · 2175 阅读 · 0 评论 -
ES6之Object.assign()详解及注意事项
Object.assign源码:interface ObjectConstructor { /** * Copy the values of all of the enumerable own properties from one or more source objects to a * target object. Returns the target o...原创 2018-09-19 18:31:10 · 5447 阅读 · 0 评论 -
Vue 组件实现表单的双向绑定,父子组件注意事项
下面是一个简单的货币输入的自定义控件,来自https://cn.vuejs.org/v2/guide/components.html:<body><div id="currency-input"> <p>{{price}}</p> <currency-input v-model="price">&l转载 2018-09-19 16:55:22 · 1406 阅读 · 0 评论 -
Html5中的 video标签 无法关闭摄像头
html5中的video这个标签是引入视频的,通过navigator.getUserMedia去获取摄像头的视频流,所以在事件里用关闭的代码都不能执行关闭摄像头,只有关闭网页,摄像头才关闭。需求:不关闭网页,实现摄像头关闭暂时的解决办法:beforeRouteLeave (to, from, next) { this.$router.go(-1); //刷新路由}...原创 2018-09-07 18:44:12 · 8523 阅读 · 1 评论