学习Vim合并行的方法和技巧

刚接触 Vim 会觉得它的学习曲线非常陡峭,要记住很多命令。所以这个系列的分享,不会
教你怎么配置它,而是教你怎么快速的使用它。

在开发时为了代码美观,经常会把属性用换行的方式显示。

<el-dialog
 title="批量编辑所属组织"
 :visible.sync="isShow"
 :before-close="beforeClose"
 >
...
</el-dialog>

这种场景适用于标签属性少,代码量也少的情况。

如果标签突然增多,阅读起来就会很不方便。比如下面这样:

<template>
 <el-table
 :data="tableData"
 border
 style="width: 100%">
 <el-table-column
  fixed
  prop="date"
  label="日期"
  width="150">
 </el-table-column>
 <el-table-column
  prop="name"
  label="姓名"
  width="120">
 </el-table-column>
 <el-table-column
  prop="province"
  label="省份"
  width="120">
 </el-table-column>
 <el-table-column
  prop="city"
  label="市区"
  width="120">
 </el-table-column>
 <el-table-column
  prop="address"
  label="地址"
  width="300">
 </el-table-column>
 <el-table-column
  prop="zip"
  label="邮编"
  width="120">
 </el-table-column>
 <el-table-column
  fixed="right"
  label="操作"
  width="100">
  <template scope="scope">
  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
  <el-button type="text" size="small">编辑</el-button>
  </template>
 </el-table-column>
 </el-table>
</template>

所以我们就需要把标签和属性变为一行。

<template>
 <el-table :data="tableData" border style="width: 100%">
 <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column>
 <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
 <el-table-column prop="province" label="省份" width="120"> </el-table-column>
 <el-table-column prop="city" label="市区" width="120"> </el-table-column>
 <el-table-column prop="address" label="地址" width="300"> </el-table-column>
 <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
 <el-table-column fixed="right" label="操作" width="100">
  <template scope="scope">
  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
  <el-button type="text" size="small">编辑</el-button>
  </template>
 </el-table-column>
 </el-table>
</template>

多数 IDE 在代码格式化时,都不会处理标签的属性。

我们只能通过光标换行,然后在按删除的方式进行解决。

那么接下来介绍的这个技巧,叫 “合并行”,能让我们快速的解决这个问题。

其实我们可以看出来,这个VIM合并行,就好比是代码格式化一样的,让写出的代码更加容易读,格式更加好看,如果大家还有其他问题,可以在下面留言区讨论。

(0)

相关推荐

  • 学习Vim合并行的方法和技巧

    刚接触 Vim 会觉得它的学习曲线非常陡峭,要记住很多命令.所以这个系列的分享,不会 教你怎么配置它,而是教你怎么快速的使用它. 在开发时为了代码美观,经常会把属性用换行的方式显示. <el-dialog title="批量编辑所属组织" :visible.sync="isShow" :before-close="beforeClose" > ... </el-dialog> 这种场景适用于标签属性少,代码量也少的情况.

  • asp.net中rdlc 合并行的方法

    最终效果: 要合并内容行,我想是不可能的,我上网找了N久,也没找到,囧~ 后来经过自己的短暂思考,终于想到另一种合并了,:-) 实现方法很简单,就是在报表属性的代码里加上以下这段代码: 复制代码 代码如下: Function GetRemark(rowNum As Integer, remark As String) As String Dim cutLength As Integer = 10 Return Mid(remark, cutLength * (rowNum - 1) + 1, c

  • 解决linux下vim中文乱码的方法

    Vim编码的详细介绍 Vim和所有的流行文本编辑器一样,Vim 可以很好的编辑各种字符编码的文件,这当然包括 UCS-2.UTF-8 等流行的 Unicode 编码方式. Vim 有四个跟字符编码方式有关的选项,encoding.fileencoding.fileencodings.termencoding (这些选项可能的取值请参考 Vim 在线帮助  :help encoding-names),它们的意义如下: 1.encoding: Vim 内部使用的字符编码方式,包括 Vim 的 buf

  • 详解git合并冲突解决方法

    1.git merge冲突了,根据提示找到冲突的文件,解决冲突 如果文件有冲突,那么会有类似的标记 2.修改完之后,执行git add 冲突文件名 3.git commit 注意:没有-m选项 进去类似于vim的操作界面,把conflict相关的行删除掉 4.直接push就可以了,因为刚刚已经执行过相关merge操作了 相关的操作如下 冲突产生 [root@Monitor Demo]# git branch #当前在master分支下 * master psr/psr-01 psr/psr-02

  • mysql 列转行,合并字段的方法(必看)

    数据表: 列转行:利用max(case when then) max---聚合函数 取最大值 (case course when '语文' then score else 0 end) ---判断 as 语文---别名作为列名 SELECT `name`, MAX( CASE WHEN course='语文' THEN score END ) AS 语文, MAX( CASE WHEN course='数学' THEN score END ) AS 数学, MAX( CASE WHEN cour

  • JS实现为排序好的字符串找出重复行的方法

    本文实例讲述了JS实现为排序好的字符串找出重复行的方法.分享给大家供大家参考,具体如下: 实现这样一个需求,在一个Editplus文档中,有很多行10位的数字,这些数字已经排好序了. 比如: 1234567890 1234567891 1234567892 1234534124 1234614124 4321412414 5636373573 有什么办法能方便的找出两行至少前7位相同的数字吗? 比如,上面的数字中,能够找出 1234567890 1234567891 1234567892 <!D

  • java实现合并图片的方法示例

    本文实例讲述了java实现合并图片的方法.分享给大家供大家参考,具体如下: package com.test; import java.io.File; import java.awt.image.BufferedImage; import javax.imageio.ImageIO; public class ImageCombineTest { public static void main(String args[]) { try { // 读取第一张图片 File fileOne = n

  • java 在图片上写字,两个图片合并的实现方法

    实例如下: package writeimg; import javax.imageio.ImageIO; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.net.URL; public class pic

  • python学习之第三方包安装方法(两种方法)

    这篇文章主要介绍了python学习之第三方包安装方法,最近在学习QQ空间.微博(爬虫)模拟登录,都涉及到了RSA算法.这样需要下一个RSA包(第三方包),在网上搜了好多资料,具体有以下两种方法: 第一种方法(不使用pip或者easy_install): Step1:在网上找到的需要的包,下载下来.eg. rsa-3.1.4.tar.gz Step2:解压缩该文件. Step3:命令行工具cd切换到所要安装的包的目录,找到setup.py文件,然后输入python setup.py install

  • PHP将二维数组某一个字段相同的数组合并起来的方法

    本文实例讲述了PHP将二维数组某一个字段相同的数组合并起来的方法.分享给大家供大家参考,具体如下: 例子: array(3) { [0]=> array(16) { ["id"]=> string(2) "42" ["uid"]=> string(2) "14" ["euid"]=> string(2) "56" ["did"]=> st

随机推荐