精华内容
下载资源
问答
  • 代码冗余vue
    2020-05-23 19:46:57

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue
    组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

    混入:mixins**

    作用:
    把共同的方法或者数据提取出来 减少代码冗余

    <div id="app">
        <cpn></cpn>
        <cpn1></cpn1>
    </div>
    <script>
        // 变量名是自定义的
        //定义一个mixins对象
        //mixins:可以包含任何组件选项
        var myMix={
            methods:{
                show(){
                    alert()
                }
            }
        }
        
        Vue.component('cpn',{
            mixins:[myMix],
            template:`
    			<div>
        			<button @click="show"></button>
        		</div>
    		`
        })
        Vue.component('cpn1',{
            mixins:[myMix],
            template:`
    			<div>
        			<button @click="show"></button>
        		</div>
    		`
        })
    	var vm = new Vue({
            el:"#app"
        })
    </script>
    

    这样可以减少代码冗余,使得一些重复性的东西减少

    更多相关内容
  • vue-empty-sitevue 空框架,开箱即用版本信息vue: 2.6.11ant-design: 1.7.2vue-router: 3.4.8axios: 0.21.0vuex: 3.5.1package.json"dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "ant-design-vue": "^...
  • 我想在点华为后面的叉的时候... 当我点击华为后面的叉的时候,兄弟组件搜索框中的被清楚了, 但是报错路由冗余,同时路由中的params(华为)也没有被清除, 可是我的代码里面没有携带params参数进行跳转呀。 为什么呀
  •  随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 ...
  • vue重复点击路由 导致冗余导航的解决方法

     1.重复路由点击报错

    2.首先检查,路由跳转时候用的push方法还是replace方法

    this.$router.push()的话把这段代码添加到router 文件夹下的 index.js文件中

    const routerRePush = VueRouter.prototype.push
    VueRouter.prototype.push = function (location) {
      return routerRePush.call(this, location).catch(error => error)
    }

    this.$router.replace()的话把这段代码添加到router 文件夹下的 index.js文件中

    const routerReplace = VueRouter.prototype.replace
    VueRouter.prototype.replace = function (location) {
        return routerReplace.call(this, location).catch(error => error)
    }

    3.好了,这样问题就解决了!

    展开全文
  •  本文实例为大家分享了vue实现页面缓存功能的具体代码,供大家参考,具体内容如下 主要利用keep-alive实现从列表页跳转到详情页,然后点击返回时,页面缓存不用重新请求资源。 一、在router里配置路由 在meta里...
  • Vue项目使用Element表单时,常会遇到表单很长,字段很多,必填项也多,曾经遇到过一张表单50多个字段,几乎全是必填项,本身ruleForm去定义就很长,再加上必填项rules的定义,光表单这点东西就100多行定义了,更别说...

    Vue项目使用Element表单时,常会遇到表单很长,字段很多,必填项也多,曾经遇到过一张表单50多个字段,几乎全是必填项,本身ruleForm去定义就很长,再加上必填项rules的定义,光表单这点东西就100多行定义了,更别说页面中还有别的代码,整个页面看起来很不美观,也很冗余。

    下面介绍一种方法,可以减少rules的长度,主要针对:
    1、字段多表单长;2、只做必填项校验;3、几乎全是必填项

    在这里插入图片描述
    原理就是:利用for循环来循环定义的表单ruleForm
    话不多说,直接上代码

      created() {
        this.setRequiredRules(this.ruleForm);
      },
      methods:{
          setRequiredRules(data) {
          let rule = {};
          for (var key in data) {
            rule[key] = [
              { required: true, message: "请填写必填项", trigger: "change" },
            ];
          }
          this.rules = rule;
        },
      }
    

    在这里插入图片描述

    在这里插入图片描述
    如果某字段不需要为必填项,加一个if语句判断即可
    在这里插入图片描述
    举个例子:使用了for循环表单的定义ruleForm
    ruleForm:{name:"",age:""}
    那么for (var key in data)里的key就是name和age
    我们在 setRequiredRules 方法中定义了一个rule = {}
    rule[key]生成的可以理解为我们常使用的rule.name

    问:为什么不能用rule.key
    答:用rule.key出来的可真的就是
    rule:{
    key:[{ required: true, message: “请填写必填项”, trigger: “change” }]
    }

    因此用rule[key]才能够保证生成的是
    rule:{
    name:[{ required: true, message: “请填写必填项”, trigger: “change” }],
    age:[{ required: true, message: “请填写必填项”, trigger: “change” }],
    }

    如果还是不能够理解,可以自己尝试在控制台打印出来看一看

    以下是完整代码:

    <template>
      <div class="form">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                  style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="线上品牌商赞助"></el-radio>
              <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          ruleForm: {
            name: "",
            region: "",
            date1: "",
            date2: "",
            delivery: false,
            type: [],
            resource: "",
            desc: "",
          },
          rules: {},
        };
      },
      methods: {
        submitForm(ruleForm) {
          this.$refs[ruleForm].validate((v) => {
            if (v) {
            } else {
            }
          });
        },
        setRequiredRules(data) {
          let rule = {};
          for (var key in data) {
            if (key !== "desc") {
              rule[key] = [
                { required: true, message: "请填写必填项", trigger: "change" },
              ];
            }
          }
          this.rules = rule;
        },
      },
      created() {
        this.setRequiredRules(this.ruleForm);
      },
    };
    </script>
    <style lang="less" scoped>
    .form {
      width: 400px;
    }
    </style>
    
    展开全文
  • 但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的“if else”判断。所以为了提高代码的...
  •  本文实例为大家分享了vue更多筛选项小组件的实现方法,供大家参考,具体内容如下 效果: 就是一个简单的小效果,当有很多筛选条件时,默认只展示几项,不会觉得很冗余,有需要可以点击展开,进行更过的条件筛选...
  • 你的网站中有没有 data,methods,props,computed里面出现冗余代码,本文介绍下如果查找到这些代码。然后删除~~~ 主要用到 eslint 的插件vue/no-unused-properties,下面的 no-unused-propertie这个插件的官网,有...

    你的网站中有没有 data,methods,props,computed里面出现冗余的代码,本文介绍下如果查找到这些代码。然后删除~~~

    主要用到 eslint 的插件vue/no-unused-properties,下面的 no-unused-propertie这个插件的官网,有兴趣的可以看看。https://eslint.vuejs.org/rules/no-unused-properties.html

    下面介绍下如何在网站中实现检测的功能。

    一、在package.json里初始化如下组件  

         "eslint""^7.14.0",

        "eslint-plugin-vue""^7.1.0",

        "eslint-webpack-plugin""^2.4.0",

        "vue-eslint-parser""^7.1.1",

    二、创建 .eslintrc.js 文件

    • 可以使用 ./node_modules/.bin/eslint --init 创建文件
    • .eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件,这里使用 .js文件
    • 也可以在 package.json 里创建一个 eslintConfig 属性,同样可以定义你的配置
    • 如果 .eslintrc.js 和 package.json里的 eslintConfig 同时存在,则只读取 .eslintrc.js文件。
    • 如果有想细致了解 eslint配置规则的可以参考官网:http://eslint.cn/docs/rules/

    网站基本配置如下(详细配置需要继续往下看第五项哦)

    1. module.exports = {  
    2.   //一旦配置了rootESlint停止在父级目录中查找配置文件  
    3.   root: true,  
    4.   parser: "vue-eslint-parser",  
    5.   //想要支持的JS语言选项  
    6.   parserOptions: {  
    7.     //启用ES6语法支持(如果支持es6的全局变量{env: {es6: true}},则默认启用ES6语法支持)  
    8.     //此处也可以使用年份命名的版本号:2019  
    9.     ecmaVersion: 6,  
    10.     //默认为script  
    11.     sourceType: "module",  
    12.     //支持其他的语言特性  
    13.     ecmaFeatures: {  
    14.       jsx: true//启用jsx  
    15.       globalReturn: true//在全局作用域下使用return语句  
    16.       experimentalObjectRestSpread: false,  
    17.     },  
    18.   },  
    19.   //代码运行的环境,每个环境都会有一套预定义的全局对象,不同环境可以组合使用  
    20.   env: {  
    21.     es6: true,  
    22.     browser: true,  
    23.   },  
    24.   //支持第三方插件的规则,插件以eslint-plugin-作为前缀,配置时该前缀可省略  
    25.   //检查vue文件需要eslint-plugin-vue插件  
    26.   plugins: ["vue"],  
    27.   //集成推荐的规则  
    28.   extends: ["eslint:recommended""plugin:vue/essential"],  
    29.   //启用额外的规则或者覆盖默认的规则  
    30.   //规则级别分别:为"off"(0)关闭、"warn"(1)警告、"error"(2)错误--error触发时,程序退出  
    31.   rules: {  
    32.     //关闭禁用console”规则  
    33.     "no-console""off",  
    34.     "vue/no-unused-properties": [  
    35.       "error",  
    36.       {  
    37.         groups: ["props", "data", "methods", "computed"],  
    38.       },  
    39.     ],  
    40.     "vue/no-parsing-error": [  
    41.       "error",  
    42.       {  
    43.         "x-invalid-end-tag"false,  
    44.         "invalid-first-character-of-tag-name"false,  
    45.       },  
    46.     ],  
    47.   },  
    48. };  

    三、需要配置环境引用

    新增eslint的loader, 但是 webpack的官网写到 很快这种写法会被废弃,不建议使用,建议采用另外一种写法 require('eslint-webpack-plugin')

    原有写法:  (需要写在webpack.base.js中.)

    1. {  
    2.         test: /\.(js|vue)$/,  
    3.         loader: "eslint-loader",  
    4.         enforce: "pre"// 编译前检查  
    5.         exclude: /node_modules/, // 不检测的文件  
    6.         include: [path.resolve(__dirname, "src")], // 指定检查的目录  
    7.    }  

    新写法:(需要写在 webpack.dev.conf.js文件的plugins中.)

    1. const ESLintPlugin = require('eslint-webpack-plugin');  
    2. module.exports = {  
    3.   // ...  
    4.   plugins: [new ESLintPlugin({extensions: ["js", "vue"]})],  
    5.   // ...  
    6. }; 

    四、 设置忽略文件 .eslintignore

    .eslintignore (没有后缀哦)这个文件是纯文本文件 只接受字符串,每一行代表一个路径

    例如:

    1. /test  
    2. /src/xxxx
    3. /static  

    配置完以上步骤,运行npm run  dev (你自己开发环境的启动项)如果你的网站显示了类似下图是错误提示,恭喜你,已经正确配置好了。

    五、 以下列举了部分ESlint的部分错误的修改

    你如果按照上面配置完后发现错误太多了(20000+条),而且很多错误根本看不太懂,更不知道如何下手去改,那么请在 .eslintrc.js的rules中增加以下配置。

    1.增加忽略space和tab混用的 选项"no-mixed-spaces-and-tabs": [0false],

    1.  7519 problems (7519 errors, 0 warnings)  
    2. 31 errors and 0 warnings potentially fixable with the `--fix` option.  

    2.增加忽略不规则空格 "no-irregular-whitespace": 0

    1.  7477 problems (7477 errors, 0 warnings)  
    2. 31 errors and 0 warnings potentially fixable with the `--fix` option

    3.增加 忽略不必要的转义字符"no-useless-escape": 0

    1.  7336 problems (7336 errors, 0 warnings)  
    2. 31 errors and 0 warnings potentially fixable with the `--fix` option.  

     

    通过以上配置终于错误条数降到7000+条了,现在可以开始你的工作了。

    六、设置vscode终端显示条数

    如果你发现你的错误显示不全,不要着急,因为vscode默认终端(terminal)只显示1000条提示,你需要打开vscode 找到文件--首选项--设置打开如下页面找到终端,如下图,自定义下显示条数最好>3W哦!

     

     

    展开全文
  •  缺点:由于脚手架适用于各种项目的开发,而不是单独的针对某一项目单独研发的,会出现代码冗余 脚手架的使用:  1、安装脚手架 vue-cli  全局安装打开cmd运行:cnpm install -g @vue/cli  2、查看当前版本号: ...
  • 随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 ...
  • 1、代码冗余。 可将参数改为动态的,根据不同操作类型赋值不同参数 2、代码逻辑重复,不符合单一原则,不利于后期维护。 可将获取校验规则逻辑抽离成函数,定义枚举,根据传入不同证件种类返回不同校验规则。 3...
  • //核心:解决代码冗余 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } ...
  • 纯净无冗余代码及配置文件,干净整洁的 vuePress 模板。 基于此模板,拒绝繁琐的配置及搭建,直接根据模板进行嵌套及新增内容。 项目代码 Gitee 仓库:https://gitee.com/wangjiabin-x/vuepressTemplate 克隆...
  • 开发环境建议下载源代码版本,包含了常见的错误提示和警告。 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。 3) 或者通过 npm 获取 ...
  • 前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护。 Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件...
  • vue-happy-bus 注意 此版本基于 vue3 使用,如果您是 vue2 用户请查看 当前版本基于 vue3 和 运行,如果您是 React/Angular/原生JS ...这样带来的冗余代码就是: $on 的回调函数必须是具名函数。不能简单的 $on('even
  • vue添加购物车代码封装 网址:...
  • 张天禹老师 尚硅谷Vue2.0+Vue3.0全套教程视频 最全笔记+代码 每节课的重点内容都有记录,比老师写的还全! P101 - P135
  • vue实战入门基础篇十:从零开始仿门户网站实例-代码重构并发布项目
  • 但是要写出代码量少,冗余度低的代码就要动脑子思考一下了。 最近写了一个百度地图的项目,要求底部有一个导航栏。具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种。灰色的代表未选中,选中的用...
  • 写编程式路由导航时,vue-router报错。 问题描述: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home/message/detail?id=003&title=%E6%B6%88%E6%81%...
  • Vue的优化问题

    2021-10-08 16:18:07
    vue的性能优化 开启gzip压缩 yarn add compression-webpack-plugin -D // 在vue.config.js中修改配置 const CompressionPlugin = require('compression-webpack-plugin') configureWebpack: (config) => { if...
  • vue项目中封装echarts的步骤  为什么需要封装echarts   每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 ...
  • 但是将paper.js用于数据可视化之类的任务并不是很方便,并且可能会产生许多冗余代码行。 另一方面, Vue是数据驱动的框架,对数据相关的操作极为友好。 通过将这两个强大的工具结合在一起,可以实现非常好的数据...
  • 因为本项目集成了很多你可能用不到的功能,会造成过多的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。基础模版-template分支单页模版-单页分支功能- 登录 / 注销- 权限验证 - 页面权限...
  • 组件在项目的各个角落都存在,不利于管理,代码极度冗余。 (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中。比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会...
  • Vue 进阶系列丨Vuex+TS 代码提示

    千次阅读 2022-03-26 01:00:47
    Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快...2013年7月28日,尤雨溪第一次在 GItHub 上为 Vue.js 提交代码;2015年10月26日,Vue.js 1.0.0版本发布;2016年10月1日,Vue.js 2.0发布。最早的 Vue.js ...
  • 这三个小技巧应该熟知: ... Vue权限控制:高精度全局权限控制 Render函数:拯救繁乱的template...import Vue from 'vue' // 引入vue // 处理首字母大写 abc => Abc function changeStr(str){ return str.charAt(0...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,503
精华内容 3,401
关键字:

代码冗余vue