All posts by 龙生

vi/vim下如何搜索字符串

1. 命令模式下，输入：/字符串 比如搜索user, 输入/user 按下回车之后，可以看到vim已经把光标移动到该字符处和高亮了匹配的字符串 2. 查看下一个匹配，按下n(小写n) 3. 跳转到上一个匹配，按下N（大写N） 4. 搜索后，我们打开别的文件，发现也被高亮了，怎么关闭高亮？ 命令模式下，输入:nohlsearch  也可以:set nohlsearch； 当然，可以简写，noh或者set noh。   from:https://blog.csdn.net/whynotldch/article/details/78163480

龙生   17 Aug 2020
View Details

SFTP登录及命令行用法

1.  sftp常用命令 ls  查看当前目录下文件 help 查看sftp支持哪些命令 cd 指定目录 pwd 查看当前目录 get xxx.txt 下载xxx文件 put xxx.txt 上传xxx文件 quit / bye / exit 退出sftp sftp  xxx.xxx.xxx.xxx   登录root用户 sftp zygf@xxx.xxx.xxx.xxx  进行登录zygf用户 2.  sftp命令行登录过程 ① sftp   xxx.xxx.xxx.xxx   登录（默认root用户），若指定用户 sftp zygf@xxx.xxx.xxx.xxx  进行登录（zygf为用户名） ② 登录成功后，会提示输入 密码 ③  然后，可进入目录， ls 查看目录下内容 ④  cd 切换目录，get 获取文件， put 上传文件 ⑤  quit /  bye / exit  退出sftp   from:https://www.cnblogs.com/cyb-652356/p/11679074.html

龙生   17 Aug 2020
View Details

vscode 设置整体界面字体的大小

1 打开 首选项-设置 2 按照下图1，2，3执行即可   from:https://blog.csdn.net/sunyan3517/article/details/103944040

龙生   06 Aug 2020
View Details

使用CSS实现表格细边框的三种方式

说到表格，虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。 由于操作表格的时候不可避免使用到细边框效果，所以我就整理了一下常用的三种实现细边框表格的方式，分享给大家，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>细边框表格的实现方式</title>
    <style>
        /*可以应用于所有浏览器,但是需要设置table的标签属性:border="0" cellpadding="0" cellspacing=1*/
        .demo1 {
            background-color: #ccc;
        }
            .demo1 th,.demo1 td {
                background-color: #fff;
            }
        /* 利用表格样式:{border-spacing:0px;}和表格与单元格背景色的不同来实现细边框。[注:IE7及以前的浏览器不支持border-spacing]*/
        .demo2 {
            background-color: #ccc;
            border-spacing: 1px;
        }
            .demo2 th, .demo2 td {
                background-color: #fff;                
            }
        /* 为表格设置合并边框模型:{border-collapse: collapse;} 实现细边框。[注:如果没有规定 !DOCTYPE,则 border-collapse 可能产生意想不到的结果。] */
        .demo3 {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
            .demo3 th, .demo3 td{
                border: 1px solid #ccc;
            }
    </style>
</head>
<body>
    <p>Demo1</p>
    <table class="demo1" border="0" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th>Title1</th>
                <th>Title2</th>
                <th>Title3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row1-01</td>
                <td>Row1-02</td>
                <td>Row1-03</td>
            </tr>
            <tr>
                <td>Row2-01</td>
                <td>Row2-02</td>
                <td>Row2-03</td>
            </tr>
        </tbody>
    </table>
    <p>Demo2</p>
    <table class="demo2">
        <thead>
            <tr>
                <th>Title1</th>
                <th>Title2</th>
                <th>Title3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row1-01</td>
                <td>Row1-02</td>
                <td>Row1-03</td>
            </tr>
            <tr>
                <td>Row2-01</td>
                <td>Row2-02</td>
                <td>Row2-03</td>
            </tr>
        </tbody>
    </table>
    <p>Demo3</p>
    <table class="demo3">
        <thead>
            <tr>
                <th>Title1</th>
                <th>Title2</th>
                <th>Title3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row1-01</td>
                <td>Row1-02</td>
                <td>Row1-03</td>
            </tr>
            <tr>
                <td>Row2-01</td>
                <td>Row2-02</td>
                <td>Row2-03</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

1
2
<strong>效果图：
</strong>

  from:https://www.cnblogs.com/kutimes/p/5054357.html  

龙生   05 Aug 2020
View Details

git常用命令速查表-桌面图

  from:https://blog.csdn.net/lovequanquqn/article/details/81744744

龙生   04 Aug 2020
View Details

js删除数组指定下标的元素

现在遇到一个需求要删掉下标为index的元素，下面介绍两种方法： 一、splice：删除后，后面的元素自动填补到前面 arr.splice(index, 1) 举例：现在有数组  arr=['a',’b',’c',’d'] arr.splice(1, 1); //结果arr=['a',’c',’d']（下标1开始，删除1个） 注意： 上面的代码中，我们要注意，如果想修改 arr 的值，直接这样操作 arr 直接就变了，而不要写作 arr= arr.splice(1,1)，因为 splice() 方法的返回值为删除掉的元素。 补充： spice增加： arr.splice(1,0,’str'); //结果arr=['a',’str',’b',’c',’d'] spice替换： arr.splice(1,1,’str'); //结果arr=['a',’str',’c',’d'] spice替换2： arr.splice(1,2,’str'); //结果arr=['a',’str',’d']（就是说：下标1开始2个换成1个“str”） spice删除多个： arr.splice(1,2); //结果arr=['a',’d'] 二、delete:删除后，该下标位置元素为undefined deletearr[index];//结果arr=['a',undefined,’c',’d'] from:https://www.cnblogs.com/belongs-to-qinghua/p/12393296.html

龙生   31 Jul 2020
View Details

vue 强制刷新组件重新渲染

实现功能：使用富文本编辑器编写文章，然后把编写成功的文章用子组件显示。 问题描述：父组件给子组件传递数据，子组件第一次调用数据的时候页面渲染是正常的，当数据变化的时候，子组件的页面渲染就失效了。 问题判断：通过一次次测试发现，第一次打开子组件的时候页面的渲染是正常的，后面打开之后渲染就失效了。所以初步怀疑是第二次调用组件的时候没有对数据进行渲染。   解决方案一： 当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
   <third-comp v-if="reFresh"/>
</template>
<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){
                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

  解决方案二： 通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。（推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
   <third-comp  :message="menuData"  :key="menuKey"/>
</template>
<script>
   export default{
       data(){
          return {
                menuKey:1,
　　　　　        menuData: "",　
            }
       },
       watch:{
             menuData(){
                ++this.menuKey
            }
       }
}
</script>

  from:https://www.cnblogs.com/zyulike/p/12036456.html

龙生   30 Jul 2020
View Details

JS中find(), findIndex(), filter(), forEach(), some(), every(), map()方法

1. find()与findIndex() find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 [1, 2, 5, -1, 9].find((n) => n < 0) //找出数组中第一个小于 0 的成员 // -1 find()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。 findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 [1, 2, 5, -1, 9].findIndex((n) => n < 0) //返回符合条件的值的位置（索引） // 3 2. filter() filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。 filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter 不会改变原数组。 var arr = [10, 20, 30, 40, 50] var newArr = arr.filter(item => item > 30); console.log(newArr); //[40, 50] //数组去重 var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, […]

龙生   29 Jul 2020
View Details

JS数组转字符串（3种方法）

数组与字符串相互转换方法
toString() 将数组转换成一个字符串
toLocalString() 把数组转换成本地约定的字符串
join() 将数组元素连接起来以构建一个字符串

龙生   29 Jul 2020
View Details

element table 批量获取选择的行的数据（selection 勾选框）

批量选择table 的行数 代码实现： 在<el-table >添加属性 ref = "multipleTable " , 在<el-table-colum> 添加type属性 type=" selection "

1
 

再通过一下代码就能获取已选择的行的数据；

1
this.$refs.multipleTable.selection

这里的 multipleTable 是上面ref 的值；   from:https://blog.csdn.net/weixin_42517975/article/details/89631128

龙生   29 Jul 2020
View Details
1 … 120 121 122 … 413