![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 59
有关Vue的一些技术以及开发红遇到的问题
爱代码的小海
这个作者很懒,什么都没留下…
展开
-
Vuex基本内容的学习及辅助函数的使用
Vuex的介绍一:基本使用1. 新建实例化对象const store = new Store.Vuex({})2. state => 相当于datastate:{name:‘xxx’}调用形式:this.$store.state.xxx3. getters => 相当于computedgetters:{contactName(state){xxx}}调用形...原创 2020-05-07 16:44:00 · 358 阅读 · 0 评论 -
v-bind=“$attrs“相关属性inheritAttrs:false的解释
文章目录前言一、inheritAttrs:false的用处是什么?二、场景比较前言学习v-bind="$attrs"这个知识点时接触到了一个新的属性:inheritAttrs: false ,下面是我结合代码对该属性的一些分析。一、inheritAttrs:false的用处是什么?避免父作用域的不被认作props的特性绑定应用在子组件的根元素上,导致在子组件中无法使用vm.$attrs对象获取非props特性值。二、场景比较以下图片的内容是自定义的一个组件,给该组件传递了两个props参数:n原创 2020-09-26 14:10:29 · 2408 阅读 · 0 评论 -
v-bind=“$props“、v-bind=“$attrs“、v-on=“listeners“(props值传递、事件传递)
文章目录前言一、v-bind="props"、v−bind="props"、v-bind="props"、v−bind="attrs"、v-on="listeners"是什么?1. v-bind="$props" 和 $props2.v-bind="$attrs" 和 $attrs3.v-on="listeners"二、代码演示1.index页面2.父组件页面3.子组件1页面4.子组件2页面三:效果图1.DOM结构展示2.浏览器页面展示图3.控制台打印前言浏览掘金的时候,偶然看到一篇文章提到了v-b.原创 2020-09-26 16:09:34 · 3904 阅读 · 1 评论 -
props传值的数据验证(类型、默认值、validator、自定义构造函数)
1.props校验<template> <div> <!-- 自定义构造函数较为特殊,其他传参暂时忽略 --> <!-- 正常传参 --> <my-components :propsG='person'></my-components> <!-- 非正常传参 控制台报错 --> <my-components :propsG='12'></my原创 2020-09-27 17:12:08 · 1411 阅读 · 1 评论 -
H5调用Android和IOS原生方法(vue/uni-app)
Android调用Android原生方法 直接Android.方法名就可以,方法名由原生提供IOS首先在created方法中全局挂载IOS指定的返回函数,用以接收返回数据再去调用IOS的方法 window.webkit.messageHandlers.方法名.postMessage(params) params是传递的参数(如果需要的)uni-app实际开发中 需要在created中注册 onLoad中注册无法生效以调用原生方法获取经纬度为示例export default .原创 2021-01-25 15:43:30 · 3108 阅读 · 1 评论 -
element-ui的表单验证如何清除校验提示语
问题场景:最近在进行项目开发的时候,遇到了这样的一个问题:对表单域中的数据进行校验的时候,其中有一项比较特殊,不是简单的输入框,下拉框这些表单元素,而是自己写的一个el-table的选择弹窗,我对它的校验如如下:protocolId: [ { required: true, message: '请选择解析协议', trigger: 'blur'},],这样可以实现校验功能,但是会存在一个问题,如果触发的了校验条件(提交按钮),提示了错误信息,后续即使重新选择了数据,错误信息依旧会存在原创 2020-11-09 23:18:56 · 9712 阅读 · 3 评论 -
利用el-table的selection多选框实现单选的效果
需求场景:最近在做的一个项目中有个需求,利用Element-UI组件中的el-table实现选择功能,官方提供了两种选择方式,一种是单选,一种是多选。我需要实现单选的效果,但是用过那个单选模式的都知道用户体验不是太好,不熟悉的人都不知道什么是选中状态,所以只能用多选模式来改。实现方案:第一步:监听checkbox 的点击事件(选中和取消选中) <el-table :data="tableList.records" ref="myTable"原创 2020-11-09 22:57:09 · 11273 阅读 · 2 评论 -
el-select下拉框选项的样式修改(背景色、hover、字体等)
一:如何修改el-select下拉框中选项的样式,网上的方法一般有两种:1.找到下拉框的类名,写一个全局的样式。2.通过/deep/来修改.el-select-dropdown__item的样式内容3.通过popper-class设置的类名添加样式以上几种方式中,第二种和第三种是无法生效的,而第一种形式虽然可以,但是会造成样式污染,在打包上传到服务器的时候,其他地方的样式可能会因此发生改变。二:问题分析上图中显示的是当选中el-select的选项时页面的结构,选项的容器并不在挂载的div#ap原创 2020-05-15 15:48:29 · 57508 阅读 · 17 评论 -
Element-UI中el-table表格样式的修改
1. el-table整个容器的样式 标签的style中设置<el-table style = "样式"></el-table>2. el-table表头的样式修改<el-table :header-cell-style = "函数名称"></el-table>header-cell-style绑定的函数返回的是表头的样式函数在method...原创 2020-05-07 16:50:57 · 12002 阅读 · 3 评论 -
Vue中使用(...)拓展运算符报错的问题
一:问题背景使用Vuex的辅助函数mapMutations对mutations进行维护的时候,准备使用拓展运算符(…)将内容放置到methods中去,但是运行的时候,(…)运算符一直报错。二:报错内容下列图片就是当时报错的信息三:解决方法查看package.json文件中是否有解析(…)运算符的插件:babel-plugin-transform-object-rest-spread,如...原创 2020-05-07 16:30:49 · 4395 阅读 · 1 评论 -
运行Vue项目时出现webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
问题重现:SVN下载到本地的一个项目,初始化命令npm install 以后,使用npm run dev运行项目,终端出现报错:webpack-dev-server --inline --progress --config build/webpack.dev.conf.js问题分析:出现这个报错一般不是新建的项目,而是使用的现有的项目,问题主要出现在cnpm指令和npm指令上,我准备运行的...原创 2020-04-19 18:25:03 · 9440 阅读 · 1 评论 -
解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题
错误原因:出现连续两次调用this.$router.push()函数,但是向路由中添加的是相同的路由。解决方法:方法一:修改vue-router的版本vue-router 3.1.0版本会出现出问题,将版本降到3.0.x版本就可以解决此问题。卸载vue-router 3.1.0版本 npm uninstall vue-router --save -dev安装3.0.x的版本 npm i...原创 2020-04-16 17:59:56 · 452 阅读 · 0 评论