我谈 Markdown

5763525-e4c8f312174fdf39.jpg
Markdown

程序员大多都是强迫症患者,我现在感觉自己的病也是越来越重了,因为自己对平时的笔记排版也很看重(难道自己真的要成为一个合格的程序员了?),所以今天来谈谈自己认识的 Markdown。

A. 我为什么用 Markdown

最初学习的时候,都是边看视频,边用记事本来做笔记,需要使用很多缩进来体现出知识的层次关系,但复习的时候看着挺不方便的。为什么我不用 Word?因为我觉得记个笔记,还要那么注意排版,会分心的。直到在一个网上的视频教程中听说 Markdown 这种轻量级的文本语言,就再也离不开它了。现在自己写东西,都是用 Markdown 做的。Markdown 是一门语言,但不是一门编程语言,学起来超快,用起来也比 Word方便。所有的样式都是通过简单的 Markdown 标记来实现的,也就是说不用像 Word 那样,用鼠标点来点去。Markdown 确实没有Word 那样丰富的排版样式,但是自己在平时写东西根本用不到那么复杂的排版,简洁清晰才是自己想要的。

B. 写 Markdown 的编辑器

个人目前使用是 Sublime + Markdown Editor插件来写的,然后配合 Markdown Preview 插件来预览 Markdown,使用起来还可以,但就是需要安装插件和配置。下面推荐两款 windows 平台下的国产编辑器和一款可以写Markdown 的 Google 插件,网上也有其他编写Markdown的软件,找个顺手看着顺眼的用就可以啦,另外说一下,Markdown 文件的扩展名是 md。

  1. HBulider
    编码利器,基于Eclipse开发而来的,我经常用它来写前端页面,个人感觉挺好的,当然也可以用来写Markdown,自带边改边看模式。
5763525-c81662451366e0aa.png
HBulider
  1. Yu Writer
    一款能找到写作乐趣的 Markdown 文本编辑器,致力为你营造一个舒适、专注、高效的写作环境。挺喜欢这款编辑器的 UI 设计的,虽然这款编辑器还在完善中,有一些Bug,但是丝毫不减对它的喜欢,写作体验真的很棒。
5763525-2d724629a65be12f.png
Yu Writer
  1. MaDe

Google 浏览器的一个插件,需要科学上网才能下载使用,插件的名字起的很那个,图标就是一个草书的妈,开发者对这个图标的解释是

MaDe的图标在传统印章样式中使用草书,表达了该APP在方圆之中桀傲不驯的狂野内心。而那个“妈”字,则是表达了对世界上最伟大的爱——母爱——的赞美。

单纯的我,姑且信了吧。MaDe 是一款插件,不想安装软件来写Markdown的小伙伴可以试一下,这款插件提供导出功能,还可以更改编辑区的主题。

5763525-08884b3449952320.png
MaDe

C. 三分钟轻松学会使用 Markdown

说明:下面用到的标记符号都是英文半角的。

a. 六级标题

在标题文字前面加上 # 号来表示这是几级标题,# 号与文字之间用一个空格分割。

一篇文章的题目使用一级标题,每一部分的小标题使用二级标题,这样一级接一级的使用。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

样式效果如下:

一级标题


二级标题


三级标题


四级标题

五级标题

六级标题

b. 常用的文本样式

1.加粗

在要加粗的文本左右加上两个星号,或者两个下划线,文字与标记之间不要有空格,个人是喜欢用两个星号。

**加粗样式1**
__加粗样式2__

样式效果如下:

加粗样式1
加粗样式2

2.斜体

*倾斜样式1*
_倾斜样式2_

在要倾斜的文本左右加上一个星号,或者一个下划线,文字与标记之间不要有空格。

样式效果如下:

倾斜样式1
倾斜样式2

3.加粗斜体

一个加粗是两个星号(下划线),一个斜体是一个星号(下划线),那么即加粗又倾斜该怎么写呢?没错,加粗倾斜就是三个星号(下划线)。

***加粗斜体1***
___加粗斜体2___

样式效果如下:

加粗斜体1
加粗斜体2

4.删除文本线

在要删除的文本左右加上两个波浪线,有人会觉得删除文本线有些多余,但在多次修改的文档中,我们可以记录我们的写作的修改历史。

~~删除文本线~~

样式效果如下:

删除文本线

5.分割线

文档中,每个部分之间,我们可以用分割线来分开,使文档层次更加清晰,只需要在一行中使用三个或者三个以上的短分割杠。

---

样式效果如下:



6.换行

在 Markdown 中可不是敲一个 Enter 键就可以换行的,可以用两个空格,也可以加上一行空白行,也即是敲两次 Enter 键,只不过这样的行间距有点大。建议是在并排的几个段落,使用空格来换行;在几块内容时,使用 Enter 来换行。简书提倡的是全部使用 Enter 来换行,这样也是可以的。

7.引用

虽然说这个标记是引用一些话,但也可以有其他的使用,比如在文档开始,用作一些说明,在文档末尾加上一些总结,这都是可以的,引用的标记就是一个大于号。

>创作你的创作 ——简书

样式效果如下:

创作你的创作 ——简书

c. 代码

程序员在写文档中,经常有贴代码的需求,如果使用 Word,不管怎么设置样式,都不是太好看,Markdown 中有可以语法高亮的代码标记,行内的代码用一对反引号(键盘上ESC下面的)包围,代码块用一对三个的反引号包围,并且还可以加上代码所属的语言。

这是一个Html段落标签 `<p></p>`

```java
System.out.println("Hello, world!");
```

排版效果如下:

这是一个Html段落标签 <p></p>

System.out.println("Hello, world!");

d. 列表

1.无序列表

列表使我们的文档更有层次,大多使用在文档的目录,只需要使用一个短分割杠即可产生无序列表,并且可以多级嵌套,产生多级列表,注意每一级的缩进。

- C语言
- C++
- Java

- 编程语言
- C语言
- 入门
- 进阶
- C++
- Java

排版效果如下:

  • C语言
  • C++
  • Java

  • 编程语言
    • C语言
      • 入门
      • 进阶
    • C++
    • Java
2.有序列表

有序列表直接使用数字,数字之间可以不按顺序,但产生的确实按序排列的列表,同时和无序列表一样,也可以产生多级列表。

  1. HTML
  2. CSS
  3. JavaScript

在简书上实际写的是

5763525-4a822b306a57a52e.png
实际图

排版效果如下:

  1. HTML
  2. CSS
  3. JavaScript

3.表格

表格在 Markdown 中是用竖杠和短横线拼成表格的模样的,表头和表格内容直接用短横线风格,用冒号来设置一列内容对齐方式,如下所示。另外说下,Markdown 里面没有直接让文字居中的方法,可以通过写 HTML 标签,但很少 Markdown 编辑器支持 HTML 标签的,所以,本文没有使用 HTML 标签。下面是自己在写作时用到的表格表头文字居中的方法,介绍给大家,其实就是再次使用一个表格标记,记住和真正的表格内容之间空一行,因为表格在标记中才能设置内容的对齐方式。

|下面是一个表格示例|
|:---:|

| 水果 | 单价 | 数量 |
|:---|:---:|---:|
| 苹果 | 4元/斤 | 10 |
| 香蕉 | 3元/斤 | 10 |
| 桃子 | 2.5元/斤 | 10 |

水果单价数量
苹果4元/斤10
香蕉3元/斤10
桃子2.5元/斤10

e.链接和图片

1.链接

网址链接

把链接放在一对尖括号中,就可以使链接变成网址链接,简书的Markdown好像直接可以贴链接@--@。
http://www.jianshu.com/
<http://www.jianshu.com/>

样式效果如下:

http://www.jianshu.com/

文字链接

把文字放在一对中括号中,后面紧跟一对小括号,括号里面放链接,记住标记符号一定要是英文半角的哦~,另外可以写成文内链接,也可以做成全文链接,不过全文链接,简书不支持,这里就不在演示了,贴上地址,自行查阅 Markdown链接

[简书](http://www.jianshu.com/)
样式效果如下:

简书

带说明的链接

鼠标放上去后,会有对这个链接的说明,只需要在链接后面加上说明文字即可。

[简书](http://www.jianshu.com/ "创作你的创作")

样式效果如下:

简书

2.图片

图片的标记和链接的很像,所以放在一块讲述,只需要在文字链接的前面加一个感叹号,中括号里面写图片的名称,后面的括号内写上图片的链接地址或者路径,在简书里面可以直接在编辑区粘贴一张图片,即可自动上传,生成图片标记,简书这里设计的还是挺方便的。

![简书首页](http://upload-images.jianshu.io/upload_images/5763525-3a5ea02965b8e871.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

样式效果如下:

5763525-3a5ea02965b8e871.png
简书首页

其他

1.转义标记

如果你不想让 Markdown 的标记生效,可以在标记字符前加上一个反斜杠,即可将标记字符转义为普通字符,两个反斜扛使反斜扛也变成普通字符,类似与编程语言中的转义字符。

\### 无效的三级标题

2.公式

Markdown 还有一大用途就是在科学领域,可以编写复杂的公式,不过在简书上是不支持的,有兴趣的小伙伴可以上网搜索相关资料。

现在的很多博客的编辑器也都是 Markdown 的,一些软件安装后,目录中会有一个叫做 REDEME,MD 的说明文件,GitHub也把 Markdown 作为可预览的文本语言,而不支持Word在线预览,Markdown其实已经在很广泛的使用了。有人说 Markdown 是未来互联网的主流文本语言,Markdown 确实很简洁,也很易学,绝对是编写文档的好帮手。

<think>嗯,用户想了解在Vue2中封装组件的最佳实践。首先,我需要回忆一下Vue2的组件封装方法。根据之前学过的知识,组件封装要考虑可复用性、可维护性以及灵活性。用户提到的引用内容里提到了完成80%的功能,剩下的20%通过slot解决,还有父子组件传参的问题。那应该怎么组织这些信息呢? 首先,要明确组件设计原则。高内聚低耦合是关键,所以每个组件应该有明确的职责。比如,一个按钮组件应该只处理按钮的样式和基本交互,而不涉及业务逻辑。然后,组件的可配置性,使用props来接收外部配置,比如颜色、尺寸等。这里可能需要举一些props的例子,比如定义类型和默认值。 然后是slot插槽的使用。引用里提到用slot解决剩下的20%功能,所以需要解释默认插槽和具名插槽的区别,以及作用域插槽的应用场景。比如表格组件允许自定义单元格内容,这时候作用域插槽就很有用。 接下来是组件通信。Vue2中父子组件通过props和events通信,子组件不能直接修改父组件的数据,所以需要emit事件。对于兄弟组件或深层嵌套的组件,可能需要使用事件总线或者Vuex。但用户的问题是关于封装组件的最佳实践,所以应该强调props和events,以及引用中提到的如果必须子传子,可以先传到父再传子。 状态管理部分,对于简单场景,可以用props和events,复杂情况用Vuex。需要说明什么时候该用Vuex,避免过度设计。 性能优化方面,提到的组件懒加载和v-once指令,可以提升大型应用的性能。比如异步组件和按需加载。 然后是文档和示例,这点很重要,好的文档能帮助其他人正确使用组件,包括props说明、示例代码和注意事项。 最后,实际案例部分,可以举一个按钮组件的例子,展示props、slot和事件的使用。代码示例要清晰,展示如何封装一个基础按钮,支持不同类型和自定义内容。 相关问题部分,需要生成几个相关问题,比如组件间通信方法、slot的最佳实践、Vue2和Vue3的区别、性能优化技巧以及单元测试方法。这些问题可以帮助用户进一步学习。 需要确保回答的结构清晰,分点说明,每个部分都有对应的解释和示例。同时,引用中的内容要自然地融入到回答中,比如在slot部分提到引用[1],在组件通信提到引用[2]。还要注意使用正确的中文表达,避免技术术语错误。</think>### Vue2组件封装最佳实践指南 #### 一、组件设计原则 1. **高内聚低耦合**:组件应聚焦单一功能,内部状态与外部接口解耦。例如表单验证组件只需处理校验逻辑,不包含具体业务代码[^1] 2. **可配置性**:通过props提供配置接口: ```javascript props: { color: { type: String, default: '#409EFF' }, disabled: { type: Boolean, default: false } } ``` #### 二、插槽机制运用 1. **默认插槽**处理主要内容区域 ```vue <template> <div class="card"> <slot>默认内容</slot> </div> </template> ``` 2. **具名插槽**实现多区域定制(引用[1]实践) ```vue <template> <div class="dialog"> <header><slot name="header"></slot></header> <main><slot></slot></main> </div> ``` 3. **作用域插槽**传递数据(适合表格组件等场景) ```vue <template> <tr v-for="item in data"> <slot :row="item"></slot> </tr> </template> ``` #### 三、组件通信规范 1. **父子通信**严格遵循`props down, events up`原则 ```javascript // 子组件 this.$emit('update', newValue) // 父组件 <child-component @update="handleUpdate"> ``` 2. **复杂场景**使用Vuex状态管理(超过3层组件嵌套时推荐) #### 四、性能优化方案 1. 使用`v-once`缓存静态内容 2. 异步组件实现按需加载 ```javascript components: { 'heavy-component': () => import('./HeavyComponent.vue') } ``` #### 五、文档规范 1. 必须包含props说明表 ```markdown | 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | size | String | 否 | 按钮尺寸 | ``` 2. 提供典型使用示例 #### 六、实际案例:通用按钮组件 ```vue <template> <button :class="['my-button', type, { disabled }]" @click="handleClick" > <slot></slot> </button> </template> <script> export default { props: { type: { type: String, default: 'default' }, disabled: Boolean }, methods: { handleClick() { if (!this.disabled) { this.$emit('click') } } } } </script> ```
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值