精华内容
下载资源
问答
  • 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>
    
    展开全文
  • 混入 (mixin) 提供了一种非常灵活的方式,来...把共同的方法或者数据提取出来 减少代码冗余 <div id="app"> <cpn></cpn> <cpn1></cpn1> </div> <script> // 变量名是自.

    混入 (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>
    

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

    展开全文
  • 纯净无冗余代码及配置文件,干净整洁的 vuePress 模板。 基于此模板,拒绝繁琐的配置及搭建,直接根据模板进行嵌套及新增内容。 项目代码 Gitee 仓库:https://gitee.com/wangjiabin-x/vuepressTemplate 克隆...

    效果图

    纯净无冗余代码及配置文件,干净整洁的 vuePress 模板。

    基于此模板,拒绝繁琐的配置及搭建,直接根据模板进行嵌套及新增内容。

    在这里插入图片描述

    项目代码

    Gitee 仓库:https://gitee.com/wangjiabin-x/vuepressTemplate

    克隆仓库,vuepress dev docs 运行即可。

    展开全文
  • vue-empty-site vue 空框架,开箱即用 版本信息 vue: 2.6.11 ant-design: 1.7.2 vue-router: 3.4.8 axios: 0.21.0 vuex: 3.5.1 package.json "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "ant-...
  • 你的网站中有没有 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哦!

     

     

    展开全文
  • 作用:解决templete里存在一值多判断的代码冗余问题 (v-if v-else-if v-else) render和templete创建dom的区别,类编译器 render真实节点,templete虚拟dom render免去了转译的过程,templete由虚拟dom–转译为...
  • router文件夹下的index.js中添加核心代码Vue.use(VueRouter) //核心 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, ...
  • 代码: //核心 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 全部代码: import...
  • 但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的“if else”判断。所以为了提高代码的...
  • 报错信息如图 解决方法 ...jumprouting(e){ ...方法2 : 在router.js 文件中添加如下代码 Vue.use(VueRouter); const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push
  • vue代码层面 data 尽可能扁平化处理(vue数据劫持方面的优化) 不需要修改的数据使用object.freeze冻结处理 v-if与v-show分场景使用 v-if:通过控制元素的添加和删除来实现显示和隐藏 v-show:直接控制元素的...
  • 如果你从未看过或者接触过 vue.js 源代码,建议你参考以下列出的 vue.js 解析的相关文章,因为这些文章更细致的讲解了这个工程,本文只是以一些 demo 演示某一功能点或 API 实现,力求简要梳理过程。 逐...
  • 随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 ...
  • 但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的“if else”判断。所以为了提高代码的...
  • Vue项目团队代码规范

    2020-06-02 11:09:58
    “ 关注 前端开发社区 ,回复 ‘领取资料’,免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步 规范与每个团队和个人都是息息相关的,因为其影响的不只是只是代码...
  • Vue.js 代码优化浅谈

    千次阅读 2018-08-25 16:44:09
    前言 vue之火,不言而喻,框架给前端带来了方便,但是代码的漏洞也会很多。如果不加以注意和优化就会陷入不必要的性能、冗余等问题,所以我们有必要关注优化的重要性,下面我们将把常用的优化做...1、代码冗余。 ...
  • 这三个小技巧应该熟知:组件 : 全局组件注册Vue权限控制 : 高精度全局权限控制Render函数 : 拯救繁乱的template路由分区以及动态添加路由「全局组件注册」...引入vue// 处理首字母大写 abc => Abcfunction chan...
  • 说到vue代码检查工具,离不开eslint的加持,经历过几个项目之后,发现eslint的配置也是千奇百怪的。 其实 eslint 的配置方式跟多个因素有关:vue/vue-cli 的版本、Airbnb/Standard/Prettier 的选择、js/ts 的选择...
  • Vue学习

    2021-09-20 21:00:07
    在项目开发中,需要经常请求数据,如果只用 axios.get() 或者 axios.post() 会造成代码冗余。 方法一:全局配置axios,所有组件共用一个axios实例。 直接把axios挂载到vue原型,axios配置全局Vue.prototype.$...
  • eslint 是js和jsx的静态代码检测工具,在代码未运行的时候即可检测代码中是否存在错误或不规范的写法。 配置方式 eslint官方文档–高级配置 eslint使用指南 方式一:Configuration Comments - 使用 JavaScript 注释...
  • 前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护。 Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件...
  • 目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术。此篇是准备篇,工欲善其事,必先利其器。我们先在代码层面进行优化,对我们完成整个技术架构是起到基础作用的。
  • Vue

    2020-03-23 11:28:03
    Vue绝大部分1、前端概述1.1、前端基本要素1.2、前端知识体系1、结构层(html)2、表现层(CSS)3、行为层(JavaScript)4、JavaScript 框架5、UI 框架6、...MVVM2.2、Vue2.3、利用Vue语法的一个简单的MVVM3、Vue...
  • vue

    2018-07-26 09:20:34
    vue1和vue2最大的区别是vue2使用了虚拟DOM来更新dom节点,提升渲染性能。 第一个参数createElement 第二个参数context,来提供临时上下文,比如this.level要改写成context.props.level。  render函数不需要vue的...
  • 这三个小技巧应该熟知: ... Vue权限控制:高精度全局权限控制 Render函数:拯救繁乱的template...import Vue from 'vue' // 引入vue // 处理首字母大写 abc => Abc function changeStr(str){ return str.charAt(0...
  • TSLint仅针对TS代码,因此如果采用TSLint规范TS代码,JS代码需要采用其他工具。而ESLint不仅能规范js代码,通过配置解析器,也能规范TS代码。此外由于性能问题,TypeScript 官方决定全面采用ESLint。 Eslint的主要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,708
精华内容 2,683
关键字:

代码冗余vue

vue 订阅