精华内容
下载资源
问答
  • Vue props用法小结

    2020-12-23 07:23:21
    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为:props down, events up父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。父子级...

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为:

    props down, events up

    父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。

    父子级组件 比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性。

    这里我们先定义父子两个组件和一个 Vue 对象:

    var childNode = {

    template: `

    childNode

    `

    };

    var parentNode = {

    template: `

    `,

    components: {

    child: childNode

    }

    };

    new Vue({

    el: "#example",

    components: {

    parent: parentNode

    }

    });

    这里的 childNode 定义的 template 是一个 div,并且内容是"childNode"字符串。 而在 parentNode 的 template 中定义了 div 的 class 名叫 parent 并且包含了两个 child 组件。

    静态 props 组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板中直接饮用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项。

    父组件向子组件传递数据分为两种方式:动态和静态,这里先介绍静态方式。

    子组件要显示的用 props 声明它期望获得的数据

    修改上例中的代码,给 childNode 添加一个 props 选项和需要的forChildMsg数据; 然后在父组件中的占位符添加特性的方式来传递数据。

    var childNode = {

    template: `

    {{forChildMsg}}

    `,

    props: ["for-child-msg"]

    };

    var parentNode = {

    template: `

    parentNode

    `,

    components: {

    child: childNode

    }

    };

    命名规范 对于 props 声明的属性,在父组件的 template 模板中,属性名需要使用中划线写法;

    子组件 props 属性声明时,使用小驼峰或者中划线写法都可以;而子组件的模板使用从父组件传来的变量时,需要使用对应的小驼峰写法。别担心,Vue 能够正确识别出小驼峰和下划线命名法混用的变量,如这里的forChildMsg和for-child-msg是同一值。

    动态 props

    在模板中,要动态地绑定父组件的数据到子组件模板的 props,和绑定 Html 标签特性一样,使用v-bind绑定;

    基于上述静态 props 的代码,这次只需要改动父组件:

    var parentNode = {

    template: `

    parentNode

    `,

    components: {

    child: childNode

    },

    data: function() {

    return {

    childMsg1: "Dynamic props msg for child-1",

    childMsg2: "Dynamic props msg for child-2"

    };

    }

    };

    在父组件的 data 的 return 数据中的 childMsg1 和 childMsg2 会被传入子组件中,

    props 验证 验证传入的 props 参数的数据规格,如果不符合数据规格,Vue 会发出警告。

    能判断的所有种类(也就是 type 值)有:String, Number, Boolean, Function, Object, Array, Symbol

    Vue.component("example", {

    props: {

    // 基础类型检测, null意味着任何类型都行

    propA: Number,

    // 多种类型

    propB: [String, Number],

    // 必传且是String

    propC: {

    type: String,

    required: true

    },

    // 数字有默认值

    propD: {

    type: Number,

    default: 101

    },

    // 数组、默认值是一个工厂函数返回对象

    propE: {

    type: Object,

    default: function() {

    console.log("propE default invoked.");

    return { message: "I am from propE." };

    }

    },

    // 自定义验证函数

    propF: {

    isValid: function(value) {

    return value > 100;

    }

    }

    }

    });

    let childNode = {

    template: "

    {{forChildMsg}}
    ",

    props: {

    "for-child-msg": Number

    }

    };

    let parentNode = {

    template: `

    `,

    components: {

    child: childNode

    },

    data() {

    return {

    // 当这里是字符串 "123456"时会报错

    msg: 123456

    };

    }

    };

    还可以在 props 定义的数据中加入自定义验证函数,当函数返回 false 时,输出警告。

    比如我们把上述例子中的 childNode 的for-child-msg修改成一个对象,并包含一个名叫validator的函数,该命名是规定叫validator的,自定义函数名不会生效。

    let childNode = {

    template: "

    {{forChildMsg}}
    ",

    props: {

    "for-child-msg": {

    validator: function(value) {

    return value > 100;

    }

    }

    }

    };

    在这里我们给for-child-msg变量设置了validator函数,并且要求传入的值必须大于 100,否则报出警告。

    单向数据流 props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件五一修改父组件的状态。

    所以不应该在子组件中修改 props 中的值,Vue 会报出警告。

    let childNode = {

    template: `

    子组件数据

    {{forChildMsg}}

    `,

    props: {

    "for-child-msg": String

    }

    };

    let parentNode = {

    template: `

    父组件数据

    {{msg}}

    `,

    components: {

    child: childNode

    },

    data() {

    return {

    msg: "default string."

    };

    }

    };

    这里我们给父组件和子组件都有一个输入框,并且显示出父组件数据和子组件的数据。当我们在父组件的输入框输入新数据时,同步的子组件数据也被修改了;这就是 props 的向子组件传递数据。而当我们修改子组件的输入框时,浏览器的控制台则报出错误警告

    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “forChildMsg”

    修改 props 数据 通常有两种原因:

    prop 作为初始值传入后,子组件想把它当做局部数据来用

    prop 作为初始值传入后,由子组件处理成其他数据输出 应对办法是

    定义一个局部变量,并用 prop 的值初始化它 但是由于定义的 ownChildMsg 只能接受 forChildMsg 的初始值,当父组件要传递的值变化发生时,ownChildMsg 无法收到更新。

    et childNode = {

    template: `

    子组件数据

    {{forChildMsg}}

    ownChildMsg : {{ownChildMsg}}

    `,

    props: {

    "for-child-msg": String

    },

    data() {

    return { ownChildMsg: this.forChildMsg };

    }

    };

    这里我们加了一个

    用于查看 ownChildMsg 数据是否变化,结果发现只有默认值传递给了 ownChildMsg,父组件改变只会变化到 forChildMsg,不会修改 ownChildMsg。

    定义一个计算属性,处理 prop 的值并返回 由于是计算属性,所以只能显示值,不能设置值。我们这里设置的是一旦从父组件修改了 forChildMsg 数据,我们就把 forChildMsg 加上一个字符串"---ownChildMsg",然后显示在屏幕上。这时是可以每当父组件修改了新数据,都会更新 ownChildMsg 数据的。

    let childNode = {

    template: `

    子组件数据

    {{forChildMsg}}

    ownChildMsg : {{ownChildMsg}}

    `,

    props: {

    "for-child-msg": String

    },

    computed: {

    ownChildMsg() {

    return this.forChildMsg + "---ownChildMsg";

    }

    }

    };

    更加妥帖的方式是使用变量存储 prop 的初始值,并用 watch 来观察 prop 值得变化。发生变化时,更新变量的值。

    let childNode = {

    template: `

    子组件数据

    {{forChildMsg}}

    ownChildMsg : {{ownChildMsg}}

    `,

    props: {

    "for-child-msg": String

    },

    data() {

    return {

    ownChildMsg: this.forChildMsg

    };

    },

    watch: {

    forChildMsg() {

    this.ownChildMsg = this.forChildMsg;

    }

    }

    };

    展开全文
  • 项目管理系统用的表格都是用JqGrid实现的,现在对项目中用到的功能进行总结,方便后续工作中使用时查看。 1.获取选中行id var ids=$("#macListTable").jqGrid("getGridParam",'selarrrow');//获取选中行id,得到的...

    项目管理系统用的表格都是用JqGrid实现的,现在对项目中用到的功能进行总结,方便后续工作中使用时查看。

    注:代码中所有的tabId指的是jqGrid表格的id,即:

    <table id="tabId"></table>

    1.获取选中行id:

    var ids=$("#tabId").jqGrid("getGridParam",'selarrrow');//获取选中行id,得到的结果是一个数组
    var ids = $("#tabId").jqGrid("getGridParam", 'selrow');//获取结果是行id,数字

    2.获取选中行信息:

    var ids = $("#tabId").jqGrid("getGridParam", 'selarrrow');
    if (ids || ids.length > 0) {
        for (var i = 0; i < ids.length; i++) {
            var id = $("#tabId").getRowData(ids[i]).id;
            var name = $("#tabId").getRowData(ids[i]).name;
            ...
            //todo 表格里有什么信息继续在for循环里写自己需要得到的数据即可
        }
    }
    

    3.弹框的使用:

    //警告提示框,其中type: 'warn'也可以修改为type: 'error'/type: 'success'
    if($("#inputWaitTime").val() != ""){
        var flag = /^[1-9]\d*$/.test($("#inputWaitTime").val());
        if (!flag) {
            $.confirmBox({type: 'warn', msg: "请输入正整数!", defaultCloseBtnName: '确认'})
            return;
        }
    }
    //出现几秒后自己消失
    $.messageBox("编辑成功!");
    $.confirmBox({
        msg: "请谨慎操作!",
        type: "warn",
        height: 200,
        width: 400,
        buttons: {
            "确定": function () {
                $.confirmBox("close");
            }
        }
    });

     

    //可以在提示后,执行相关请求
    $.confirmBox2({
        msg: "请确定删除?",
        height: 200,
        width: 400,
        type: "warn",
        addDefaultCloseBtn: true,
        buttons: {
        "确定": function () {
            $.ajax({
                url: '',
                type: 'post',
                data: data,
                success: function (res) {
                    if (res.code > 200) {
                        $.confirmBox({type: 'warn', msg: res.msg, defaultCloseBtnName: '确定'});
                        return;
                    }
                    $.confirmBox2("close");
                    $.messageBox("删除成功");
                   }
                })
              }
            }
    });
    //点击按钮的时候,弹出弹框页面
    $("#basicInformation").on('click',function () {
        if ($(this).isTRDisable()) {
            return;
        }
        $("#alertDialog").createDialog({
            title: "弹框页面",
            width: 400,
            height: 240,
            url: "alertDialog.jsp",
            buttons: {
                "确定": function () {
                    $("#alertDialog").closeDialog();
                }
            }
        })
        return false;
    });

     4.弹框“确定”,“取消”按钮的禁用与启用

    //启用
    $(".ui-dialog .ui-dialog-buttonpane button:first-child").removeAttr("disabled");
    $(".ui-dialog .ui-dialog-buttonpane button:first-child").css("background", "#286090").css("color", '#fff').css("cursor", "pointer");
    //禁用
    $(".ui-dialog .ui-dialog-buttonpane button:first-child").attr("disabled", "true");
    $(".ui-dialog .ui-dialog-buttonpane button:first-child").css("background", "#efefef").css("color", '#999').css("cursor", "default");

    5.点击“取消”或"X",关闭弹框时,中断ajax请求

    $(".ui-dialog .ui-dialog-buttonpane button:last-child").on('click', function () {
        request.abort();
    });
    $(".ui-dialog .ui-dialog-titlebar-close").on('click', function () {
        request.abort();
    });

    6.关闭弹框,根据弹框打开的方式,选择对应关闭弹框的方法:

    $("#alertDialog").closeDialog();
    
    
    $.confirmBox2("close");
    
    
    $.confirmBox("close");

     

    展开全文
  • 错误截图 踩坑原因 在配置vue-router的路由时和将router实例挂载至Vue实例上时,实例...false new Vue({ render: h => h(App), router }).$mount('#app') 总结使用vue-router时,记住两个特殊的名字routes与router

    错误截图

    在这里插入图片描述

    踩坑原因

    在配置vue-router的路由时和将router实例挂载至Vue实例上时,实例名称没有按照标准

    配置vue时

    在配置vue-router时,我们一般会将路由的映射关系抽成一个数组,就想下面这样

    const routes = [{
        path: '',
        redirect: '/home'
      },
      {
        path: '/home',
        component: Home
      },
      {
        path: '/category',
        component: Category
      },
      {
        path: '/shopcart',
        component: ShopCart
      },
      {
        path: '/profile',
        component: Profile
      }
    ];
    

    然后再将这个路由映射数组添加至VueRouter对象中,然后导出,就像下面这样,在添加至VueRouter实例时,可以采用ES6的新写法,即直接写数组名routes

    export default new VueRouter({
      routes,
      mode: 'history',
    })
    

    坑就在这,如果你在上面配置路由映射关系的数组时的数组名不叫routes,而是route1,那么你在下面添加至VueRouter实例时,你很可能会这样写,于是你就入坑了。。。。

    export default new VueRouter({
      route1,
      mode: 'history',
    })
    

    解决方法有二

    第一种:数组名直接取名为routes,然后再添加至VueRouter实例时这样写

    export default new VueRouter({
      routes,
      mode: 'history',
    })
    

    第二中:数组名字随便起,在添加至VueRouter实例时这样写

    export default new VueRouter({
      routes:你起的数组名
      mode: 'history',
    })
    

    挂载到Vue实例中时

    同理,vue实例名称只能是router,解决方法与上面一样

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
      router
    }).$mount('#app')
    
    

    总结

    在使用vue-router时,记住两个特殊的名字routesrouter

    展开全文
  • 文章目录一、解决启动nginx报[warn] 5052#0: the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /opt/modules/nginx/conf/nginx.conf:1问题二、解决方法1....

    一、解决启动nginx报[warn] 5052#0: the “user” directive makes sense only if the master process runs with super-user privileges, ignored in /opt/modules/nginx/conf/nginx.conf:1问题

    在这里插入图片描述

    [warn] 5052#0: the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /opt/modules/nginx/conf/nginx.conf:1
    

    二、解决方法

    方法一:

    1.进入nginx下的sbin目录下使用管理员权限启动

    执行命令:sudo ./nginx
    

    在这里插入图片描述
    方法二:

    1.进入nginx下的sbin目录下

    2.执行下面以下命令

    执行命令:chown root.root nginx
    执行命令:chmod 755 nginx
    执行命令:chmod u+s nginx
    

    3.重启nginx即可

    方法三:

    1.进入nginx下的sbin目录下

    2.执行下面以下命令

    执行命令:chown root.www nginx
    执行命令:chmod 750 nginx
    执行命令:chmod u+s nginx
    

    3.重启nginx即可

    总结

    提示:建议使用第二或者第三种方法,第一种是临时使用解决能启动nginx。当服务器重启后,nginx服务不会自启,没有达到满意的效果。

    展开全文
  • Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为:props down, events up父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。父子级...
  • AllenNLP 用法总结

    2021-09-01 20:33:45
    AllenNLP另外很重要的一点在于,它在torch的model的基础上添加了很多的方法,使得模型更加适用于NLP场景的使用。 AllenNLP设计模型的思想在于: 输出为dict格式,里面必须包含loss,其余则由我们自行决定。因此...
  • #和##用法总结

    千次阅读 2021-02-20 13:46:04
    下面对常遇到的宏的使用问题做了简单总结。 关于#和## 在C语言的宏中,#的功能是将其后面的宏参数进行字符串化操作(Stringfication),简单说就是在对它所引用的宏变量 通过替换后在其左右各加上一个双引号。比如...
  • if (methods.length == 0) { logger.warn("No method found in service interface " + interfaceClass.getName()); map.put(METHODS_KEY, ANY_VALUE); } else { //添加需要代理的方法 map.put(METHODS_KEY, ...
  • pandas.set_option 用法总结

    千次阅读 2021-02-27 23:43:08
     mode.chained_assignment:string 如果试图使用链式赋值,显示warn或没有显示,默认为“warn”; 50. mode.sim_interactive:boolean 是否为了测试而模拟交互模式,默认值为False; 51. mode.use_inf_as_na:...
  • java日志文件用法总结

    2021-02-12 13:19:05
    logback(Spring 系列在使用) ; log4j2(添加了异步logger的实现,提高了性能)2.具体使用(门面:slf4j 实现 : log4j2)①添加maven依赖org.apache.logging.log4jlog4j-core2.5org.apache.logging...
  • Logstash 使用小结

    2021-05-27 05:41:51
    # ../bin/logstash -f simpleinput_file.conf Sending Logstash logs to /opt/module/logstash-6.6.2/logs which is now configured via log4j2.properties [2021-05-26T18:06:27,277][WARN ][logstash.config....
  • warn_bad_lines : boolean, default True 如果error_bad_lines =False,并且warn_bad_lines =True 那么所有的“bad lines”将会被输出(只能在C解析器下使用)。 low_memory :boolean, default True 分块加载到内存...
  • Groovy小结:java调用Groovy方法并传递参数@(JAVA总结)1. 场景描述在网上查了资料发现,java有三种方式调用groovy脚本。但是真正在实际的服务器环境中,嵌入groovy脚本往往需要满足下面的条件:可以直接调用groovy...
  • 5种处理Vue异常的方法

    千次阅读 2021-01-17 16:42:08
    本文采用意译,版权归原作者所有去年一整年,我都在使用最爱的—Vue.js— 来做项目。最近突然意识到,我竟然从来没有认真去处理异常。我可以自恋地说:"我写的代码是完美的,没有BUG。" 我相信大家都明白这是迷之...
  • 打开开发者工具,点开错误的那个三角,便能看到详细信息,定位到错误发生在哪个文件的哪一行。 我的项目使用Element-UI组件进行开发,clDetailList是用于给el-table的data属性赋值的。clDetailList按照预期...
  • #re: log4j和commons.logging日志记录的使用方法2008-03-11 14:08芦苇一 最好与commons-logging一起用,why?1.标准接口,即使将来脱离了log4j也一样用2.简化了编码,减少耦合度:不需在代码中指定log4j配制文件位置...
  • 关于Commons-loggin + Log4j结合的使用方法网上文章较多,也比较简单,我这里后面有附摘录的认为写得较好的文章下面列出我在应用中碰到的问题问题1:commons-logging.properties文件中有设定org.apache.commons....
  • react native 环境搭建的问题总结复盘

    千次阅读 2021-01-17 22:37:17
    第一次学习使用react native开发,但搭建react native的开发环境的过程并不太顺利,大概花了五六个小时,中途遇到不少问题,现趁热总结复盘。 React Native是编写原生移动应用的框架,它可以让前端开发者直接使用 ...
  • 今天就来说说 Mybatis-Plus 的那些使用技巧1、条件查询(QueryWrapper)如果说,我们需要查询的 SQL 语句如下:SELECT * FROM user_info WHERE 1=1 AND age = 20那么对应的代码可以为:QueryWrapper queryWrapper = ...
  • 下面我就引用一牛人对#pragma的评论做个小结,顺便也给自己加强记忆: 在所有的预处理指令中,#Pragma 指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作。#pragma指令对每个...
  • 比较两文件的MD5值 diff -c rc1_md5.txt rc2_md5.txt或者用UltraCompare Professional比对结果 以上就是Linux md5sum命令的使用方法的详细内容,更多关于Linux md5sum命令请关注脚本之家其它相关文章!
  • Elasticsearch 错误小结

    2021-07-07 16:00:39
    # 报错1 ``` [2019-01-15T12:...delete为false 3、如果上面的方法执行完之后,过几分钟又会出现同样的错误,并且查看索引信息,read_only_allow_delete依然为true 这时就是因为你的磁盘空间不足导致的,查看[官方文档]...
  • } } 4、输出结果 首先,控制台输入如下图所示: 控制台输出结果 然后,查看 /Users/duqi/logs 目录下的debug.log和error.log文件,内容分别如下,可以看出,: debug.log error.log 二、Log4J基本使用方法 Log4j由...
  • 分享给大家供大家参考,具体如下:相关内容:messagebox介绍使用filedialog介绍使用首发时间:2018-03-04 22:18messagebox:介绍:messagebox是tkinter中的消息框、对话框使用:导入模块:import tkinter.messageb...
  • Maven是基于项目对象模型(POM),可以通过一段描述信息来管理项目的构建、报告和文档的软件项目管理工具。 2.Maven可以干啥: 添加第三方jar包 jar包之间的依赖关系: Maven 可以替我们自动的将当前 jar 包所...
  • 目录什么是MyBatis-PlusMyBatis-Plus基本特性整合和使用MyBatis-Plus1. 建测试表2. 新建springboot项目、导入相关依赖3. 配置文件application.yml4. 配置分页插件和自动化填充时间5. 新建实体类 什么是MyBatis-Plus ...
  • 【转】Linux内核调试方法总结 目录[-] 一 调试前的准备 二 内核中的bug 三 内核调试配置选项 1 内核配置 2 调试原子操作 四 引发bug并打印信息 1 BUG()和BUG_ON() 2 dump_stack() 五 printk() 1 printk...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,344
精华内容 13,337
关键字:

warn的用法总结