刚接触 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. es6的箭头函数

    1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 (  )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...

  2. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  3. GeoServer+PostgreSQL+PostGIS+pgRouting实现最短路径查询

    一.软件安装 GeoServer下载地址: http://geoserver.org/download/ PostgreSQL下载地址: https://www.postgresql.org/down ...

  4. 记一次vscode升级后,格式化Vue出现的问题

    一.VSCode中使用vetur插件格式化vue文件时,stylus代码会自动加上大括号.冒号和分号 本来就是简写比较方便舒服,结果一个格式化回到十年前 解决方案: vscode  文件 ->首 ...

  5. gevent的同步与异步

    from gevent import spawn,joinall,monkey;monkey.patch_all() import time def task(pid): time.sleep(0.5 ...

  6. mysql多实例-主从复制安装

    安装环境:Centos6.5 mysql版本:mysql-5.5.32.tar.gz 一:安装前准备: 1.安装一些依赖库 yum install cmake gcc gcc-c++ ncurses- ...

  7. spring boot 自己输出json数据

    @RequestMapping("/json")public void json(HttpServletResponse response, Pager pager, TruckF ...

  8. Tempter of the Bone

    Problem Description The doggie found a bone in an ancient maze, which fascinated him a lot. However, ...

  9. pandas数据结构练习题(部分)

    更多函数查阅http://pandas.pydata.org/pandas-docs/stable/10min.htmlimport pandas as pd#两种数据结构from pandas im ...

  10. 【G彩娱乐网】作为一名程序员,我应该如何选购一台电脑?

    G彩娱乐网说到程序员专用电脑,那肯定是苹果电脑.优点有很多,比如白平衡特别准.酷炫的黑科技.特别方便的软件等显而易见的优势:也有能够增加提案通过率.专注工作提高工作效率这样的玄学buff. 但是!并不 ...