VitePress-12-markdown中使用vue的语法

前言

VitePress 中，markdown文档最终都会转换成为 html文件，我们在访问的时候，也是直接访问的 xxx.html 文件。

而且，markdown文档会被作为 [vue单文件] 进行处理，因此，我们我们可以在文档中使用 vue 语法：
例如 ： 
  差值表达式、指令 等基础语法；
  也可以使用 

效果展示

style 标签使用

在 vitepress 的文档中，进行【局部】样式的定义，
推荐使用

使用css :  动态绑定 ： $style.xxx
这是一个div标签

方式二 ： 指定module 名称的方式

定义css

使用css :  动态绑定 ： $自定义的名称.xxx
这是一个div标签

文档内容

# vue的语法 - style 标签

 这是一个div
 这是第二个div

效果展示

样式的动态绑定成功！
第一个字体为红色，使用的是默认的module名称的方式；
第二个字体为蓝色，使用的是指定module名称的方式；

插值语法的转义

转义 ：就是将内容解析为普通的字符串，不做特殊的处理。

语法 ：
情境一 ： 在 元素块中 添加v-pre 指令即可。如 在、

标签中添加。
情景二 ： 自定义容器中 使用 v-pre 转义插值表达式。

注意 ： 代码块中，默认是进行转义的，因此不需要进行任何的特殊操作。
即代码块中，插值表达式会默认被处理为一个普通的字符串。

文档内容

# vue的语法 - 插值表达式的转义

正常 ：  1 + 1 = {{ 1 + 1}}
 

转义  ：    1 + 1 = {{ 1 + 1}}
 

::: tip 正常
 1 + 1 = {{ 1+1 }}
:::

::: v-pre
 1 + 1 = {{ 1+1 }}
:::

运行效果

代码块中 取消默认的插值表达式的转义

本小结 需要和上一小结 一起阅读。

语法 ： 在代码块的类型后面添加-vue 即可以取消转义。

文档内容

	# vue的语法 - 代码块中取消插值表达式的转义
	```html
	
默认转义 ：  1 + 1 = {{ 1 + 1}}
 
	```
	
	```html-vue
	
取消转义 ：  1 + 1 = {{ 1 + 1}}
 
	```

效果