科技萌新成长营#

为什么要学习markdown

markdown入门门槛低，适用面广，排版格式简洁明了；

学习路径

基础语法—>GFM扩展语法—>写作规范—>编译器

基础语法

1. 标题分级

• 语法：

# 一级标题  
## 二级标题  
### 三级标题  

• 实现：

• 说明：
  几个#就是几级标题，最多6级。
  标题前后均1个空行，#与标题之间1个空格，标题顶行写，结尾不要加标点符号。

2. 字体

• 语法：

**粗体**
*斜体*
***粗斜体***

• 实现：

• 说明：
  粗体使用2个**包裹，斜体使用1个*包裹。

3. 换行与段落

• 语法

段落1：
这个和下一行
是同一行

段落2：
这个和下一行  
不是同一行

• 实现

段落1： 这个和下一行是同一行

段落2： 这个和下一行

不是同一行

• 说明
  同一段落内换行使用2个空格+换行 行与行之间有空行为段落，没有空行则为同一段落；
  每行不超过80字，一个长句后换行，长URL换行或者使用引用链接

4. 列表

• 语法

* * *
- - -
_ _ _

• 实现

• 说明
  有序列表：数字序号 + 英文句号 + 空格 + 列表内容；
  无序列表：- + 空格 + 列表内容；
  列表嵌套：Tab缩进层级，有序无序可相互嵌套；
  列表换行：无序3个空格，有序2个空格，且列表间添加空行；如果列表无换行，则不添加空行；
  列表前后均空1行,数字、字符、符号列表均使用英文半角字符+英文句号+空格。

5. 分割线

• 语法

![](https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/toutiao/static/img/logo.271e845.png)

• 实现

• 说明
  3个及以上* - _，之间可加空格

6. 图片

• 语法

**文字链接**
[](https://www.toutiao.com/)

**引用链接**
访问[]
[]:
https://www.toutiao.com/

**自链接**
<https://www.toutiao.com/>

• 实现

• 说明
  
  支持网络地址、相对路径、绝对路径
  不能控制图片的显示大小，比例

7. 链接

• 语法

**行内代码**
输入代码`make`

**单行代码**
    make install

**代码块**
```javascript
document.getElementById("demo").innerHTML="一起来学Markdown";
```

• 实现

文字链接

引用链接

访问

自链接

https://www.toutiao.com/

• 说明
  文字链接
  [链接文字](链接地址)
  引用链接
  [链接文字]
  [链接文字]: http://链接地址
  网址链接
  <网址>
  链接文字有意义，自链接<>包裹，自连接http/https开头。

8. 代码

• 语法

> 引用内容

• 实现

• 说明
  行内代码
  行内代码用``包裹；
  单行代码
  简单代码块采用4空格缩进；
  代码块
  多行代码采用围栏代码块；
  ```语法名称
  ``` shell命令不要使用换行，为了阅读便利，换行时加\，
  没有输出内容的shell命令，前面不要加$，有输出内容的，前面必加$。

9. 引用

• 语法

> 引用内容

• 实现

引用内容

• 说明
  > + 内容
  >后加空格，空行也要加>。

10. 转义

语法

\\
\*
\#
\>
\```

• 实现

\

*

#

>

```

• 说明
  所有特殊标记符号，都可以用反斜杠\标记转义

建议示例

令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

指令 attribute 的值预期一般是单个 JavaScript 表达式，除v-for外

指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<p v-if="seen">现在你看到我了</p>

此例中，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素

参数：

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

<a v-on:click="doSomething">...</a>

doSomething为监听的事件名称

动态参数：

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

此处的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus

对动态参数的值的约束：

动态参数预期会求出一个字符串，异常情况下值为 null。

这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告

对动态参数表达式的约束：

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

<a v-bind:['foo' + bar]="value"> ... </a>

此时会触发编译警告。

可以代替的方法：使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式

在 DOM 中使用模板时，还需要避免使用大写字符来命名键名，会被强制转换为小写。

修饰符：

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

缩写：

v- 前缀作为一种提示，用来识别模板中 Vue 特定的 attribute。

在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，

v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。

同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，

v- 前缀也变得没那么重要了。

因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind 用:代替

<a v-bind:href="url">...</a>
	<!-- 缩写 -->
	<a :href="url">...</a>
	<!-- 动态参数的缩写 (2.6.0+) -->
	<a :[key]="url"> ... </a>	

v-on 用@代替