散装笔记

1、

vue 回车触发聚焦 @keyup.enter.native

、

前后端不存在跨域问题用coolie,存在跨域的问题用token

跨域问题：

CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。

作者：macrozheng
链接：https://www.imooc.com/article/292349
来源：慕课网
本文原创发布于慕课网，转载请注明出处，谢谢合作

热部署和热加载

首先，不管是热加载还是热部署，都可以在不重启服务的情况下编译/部署项目，都是基于 Java 的类加载器实现的。

二者区别如下：

在部署方式上：

热部署是在服务器运行时重新部署项目。

热加载是在运行时重新加载 class。

（视频教程推荐：java视频）

在实现原理上：

热部署是直接重新加载整个应用，耗时相对较高。

热加载是在运行时重新加载 class，后台会启动一个线程不断检测你的类是否改变。

在使用场景上：

热部署更多的是在生产环境使用。

热加载则更多的是在开发环境上使用。线上由于安全性问题不会使用，难以监控。

拓展：懒加载与预加载

链接：https://blog.csdn.net/ca817586/article/details/78665198

localStorage是持久化的存储机制

sessionStorage是会话期间的存储机制

git操作

由于云端没有login分支，将本地的login分支推送到云端的login分支

event.preventDefault() 方法阻止元素发生默认的行为。

例如：

当点击提交按钮时阻止对表单的提交
阻止以下 URL 的链接

PascalCase和camelCase：
依靠单词的大小写拼写复合词的做法，叫‘ 驼峰拼写法’ （CamelCase） ; 比如：BlackColor ; (单词只是为了示例)；

驼峰拼写法又分为两种，

第一种：第一个词的首字母小写，以后每个词的首字母大写，叫做‘ 小驼峰拼写法’ lowerCamelCase，比如：blackColor ;

第二种，第一个词以及后面的词的首字母都大写，叫 ‘大驼峰拼写法’ （UpperCamelCase），又称为 “帕斯卡拼写法” （PascalCase）。比如：BlackColor
————————————————
版权声明：本文为CSDN博主「尹东」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yinge0508/article/details/109249397

// props:['my-message'], props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式，他们在此处是相互转换

官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来，如图：

父组件代码：

<template>
    <div>
        <input type="button" 
               value="我是父组件中的按钮" 
               @click="show">
        <child v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            }
        }
    }
</script>

子组件child代码：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
    </div>
</template>

接下来加个需求，在子组当中增加一个按钮，通过该按钮来将自已隐藏起来！需要借助父子之间的传值了！如图：

父组件代码：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child @upIsShow="changeIsShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子组件代码：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("upIsShow",false);
            }
        }
    }
</script>

如果我要将父组件中的事@upIsShow修改为@update:isShow不违法吧：

<child @update:isShow="changeIsShow" v-show="isShow"/>

子组件的emit自然也要做对应调整：

upIsShow(){
    this.$emit("update:isShow",false);
}

运行一下，一切正常！真好！

那么如果现在我将父组件的changeIsShow直接写成匿名函数，也能运行吧：

<child @update:isShow="function(bol){isShow=bol}" v-show="isShow"/>

再次运行，一切还是那么美好，真好！

现在我将那匿名函数改成箭头函数，不过分吧：

<child @update:isShow="bol=>isShow=bol" v-show="isShow"/>

再运行一次，完美，真好！

最后我将上面那行代码做最后一次修改：

<child :isShow.sync="isShow" v-show="isShow"/>

至此终于涉及到了sync了。以上代码 :isShow.sync="isShow"其实是 @update:isShow="bol=>isShow=bol"语法糖。是其一种简写形式。附上完整代码。
父组件：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子组件：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

最后：sync只是给大家伙提供了一种与父组件沟通的思路而已！所以在后面日子里，你如果只是单纯的在子组件当中修改父组件的某个数据时，建议使用sync，简单，快捷，有档次！真好！

作者：张培跃
链接：https://www.jianshu.com/p/d42c508ea9de
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

posted @ 2021-02-01 15:02 水墨无痕258 阅读(69) 评论(0) 收藏举报

刷新页面返回顶部

水墨无痕258