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

更新时间：2017年11月27日 11:33:35 投稿：laozhang

这篇文章主要介绍了学习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合并行，就好比是代码格式化一样的，让写出的代码更加容易读，格式更加好看，如果大家还有其他问题，可以在下面留言区讨论。

linux系统安装msf的过程详解
这篇文章主要介绍了linux系统安装msf的过程，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
将你的Apache速度提高十倍的经验分享
你知道吗，如果你的web server是采用apache那你就有机会通过安装一个软件模块提高你的网站访问速度，最大能有10倍之多！这可不是吹牛，你看看原理就明白了
2013-04-04
sersync2 完全安装配置说明（二）可选功能与xml高级配置
sersync2 完全安装配置说明（二）可选功能与xml高级配置，需要的朋友可以参考下。
2011-11-11
CentOS7+apache+php7+mysql5.7配置教程详解
这篇文章主要介绍了CentOS7+apache+php7+mysql5.7配置教程详解,需要的朋友可以参考下
2017-10-10
linux DMA接口知识点详解
在本篇文章里小编给大家整理了关于linux DMA接口知识点内容，需要的朋友们可以学习参考下。
2020-02-02
Windows10安装Apache2.4的方法步骤
本文主要介绍了Windows10安装Apache2.4的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
2022-06-06
linux系统获取硬盘使用信息
linux查看硬盘信息要用的几个命令：df命令、du命令、statfs结构及函数,这里用图文说明一下使用方法。
2013-10-10
Vim命令高级用法
一些高级的Vim命令用法：同时编辑多个文件、文本重排、域操作、缓冲区的使用等命令。
2013-11-11
linux中Centos7增加swap分区详解
本篇文章给大家详细讲解了linux中Centos7增加swap分区的方法以及注意点，需要的朋友学习下。
2018-02-02
在linux中设置tomcat开机自启动的方法
由于各种各样的原因,服务器有重启的可能,这样tomcat就需要配置成开机自动启动,否则每次重启后就需要连远程手动启动tomcat,如果服务器被迫重启,而技术人员又不能及时运行tomcat,那么后果很严重,所以本文给大家介绍了在linux中设置tomcat开机自启动的方法
2024-02-02