刚接触 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 在代码格式化时,都不会处理标签的属性。
我们只能通过光标换行,然后在按删除的方式进行解决。
那么接下来介绍的这个技巧,叫 “合并行”,能让我们快速的解决这个问题。

操作步骤:
1. 按 ESC 进入 Normal 模式,移动游标定位到第 2 行的位置。
2. 按 shift+j 就可以实现合并行的操作。

Vim常用操作-合并行。的更多相关文章

  1. VIM常用操作手册

    VIM常用操作手册 1.多行操作,多行注释,多行取消注释 https://jingyan.baidu.com/article/9c69d48f43ed6d13c8024e7b.html 2.常用操作 ...

  2. VIM常用操作总结

    VIM常用的模式网上说法不太一样,但是大同小异,这里大致分一下,便于后面总结 1.一般模式 默认打开文件后的模式,这个时候只能移动光标,不能编辑 2.输入模式 一般模式按下i,就可以进入输入模式,输入 ...

  3. vim常用操作技巧与配置

    vi是linux与unix下的常用文本编辑器,其运行稳定,使用方便,本文将分两部分对其常用操作技巧和配置进行阐述,其中参考了网上的一些文章,对作者表示感谢 PART1 操作技巧 说明: 以下的例子中  ...

  4. [编辑器]vim常用操作

    我是ide的用户,对于vim一只停留在:打开.看.写.关闭基本操作,因为现在更多的接触linux服务器,所以为了提高 效率,用好vim是必备技能!下面罗列一些vim的常用操作,用做备忘(不断更新): ...

  5. 【linux】vim常用操作及vim插件的安装使用

    vim是linux下一个非常好用的文本编辑器,在linux下开发的人员要熟练掌握vim常用命令. 1.  打开在第n行 vim +143 filename.txt 2. 只读模式打开 vim -R / ...

  6. vim常用操作和使用技巧

    vi是linux与unix下的常用文本编辑器,其运行稳定,使用方便,本文将分两部分对其常用操作技巧和配置进行阐述,其中参考了网上的一些文章,对作者表示感谢 PART1 操作技巧 说明: 以下的例子中  ...

  7. Linux(Ubuntu)常用命令(五)—— vi/vim常用操作

    vi/vim常用命令 vim其实就是vi的升级版,vi里的所有命令vim里都可以用,一般使用来说几乎没什么差别. 注:本篇文章区分大小写! vi / vim三级模式的关系: 命令行模式 任何时候,不管 ...

  8. Linux下Vim常用操作

    linux下Vim的常用操作 linux ​ 首先\(ctrl+Alt+t\)打开小框框 ​ \(./\):相当于手机上的\(home\)键 ​ \(ls\):当前文件夹的东东 ​ \(mkdir\) ...

  9. 想法子记忆Vi/Vim常用操作及指令

    本笔记有特殊目录,点击开启: 专有目录 在Linux系统中编辑文本总是离不开一位老帮手--Vi.而因为其诞生的年代有些久远,有些操作在现在看来可能有点"反直觉". 于是我决定写这样 ...

随机推荐

  1. Django REST FrameWork中文教程3:基于类的视图

    我们也可以使用基于类的视图编写我们的API视图,而不是基于函数的视图.我们将看到这是一个强大的模式,允许我们重用常用功能,并帮助我们保持代码DRY. 使用基于类的视图重写我们的API 我们将首先将根视 ...

  2. vue-cli如何引入bootstrap工具

    以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用c ...

  3. WebService的简单运用添加删除

    WebService是一种跨编程语言和跨操作系统平台的远程调用技术,简单来说就是将数据存储到项目的文件夹下 .NET中基于DOM核心类 XmlDocument 表示一个XML文档 XmlNode表示X ...

  4. python日记

    今天学习了Python的一些基本知识,就是简单的输入输出.因为我安装的Python环境是3.6版本的,因此我说的自己体会到的问题都是基于这个版本而得出的问题,说一下今天感觉要注意的要点吧. 1.首先是 ...

  5. 【ASP.NET MVC 学习笔记】- 19 REST和RESTful Web API

    本文参考:http://www.cnblogs.com/willick/p/3441432.html 1.目前使用Web服务的三种主流的方式是:远程过程调用(RPC),面向服务架构(SOA)以及表征性 ...

  6. Yii2之AR类的坑与总结

    本文主要记录本人从学习yii2到使用yii2开发项目过程中遇到的一些问题以及解决方法和知识点总结. 1. AR类关联哪个数据表? 默认情况下,AR类会根据类名称关联和类名相关的数据表,如:类名为Cou ...

  7. LeetCode 54. Spiral Matrix(螺旋矩阵)

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  8. VNC 远程连接vmware下centOS7

    VNC ( Virtual Network Computing)是一个linux下提供远程桌面支持的服务,类似于windows下的远程桌面服务,本来我是准备用xmanager来远程连我虚拟机中的cen ...

  9. Warning: connect.static is not a function

    grunt-contrib-connect从0.11.x版本开始不支持connect.static和connect.directory 你应该安装serve-static(加载静态文件)和serve- ...

  10. Python Linear algebra

    Linear algebra 1.模块文档 NAME numpy.linalg DESCRIPTION Core Linear Algebra Tools ---------------------- ...