前言
VitePress 中,markdown文档最终都会转换成为 html文件,我们在访问的时候,也是直接访问的 xxx.html 文件。而且,markdown文档会被作为 [vue单文件] 进行处理,因此,我们我们可以在文档中使用 vue 语法:例如 : 差值表达式、指令 等基础语法;也可以使用 标签定义逻辑代码;也可以使用 标签定义样式代码。本文将介绍一下 vitepress 中markdown文档使用 vue 的一些基础用法。
提示
markdown 文档中可以包含
、
标签,但是,没有
标签;
下面对 具体的使用进行一下案例展示。
模板语法-插值表达式
插值表达式 :
{{ }}
即双大括号
文档内容
# vue的语法 - 差值表达式{{ 1+1 }}
效果展示
页面渲染的是 1+1 的结果值 2,而不是 “1+1” 这个文本。
模板语法-指令
本案例展示
v-for
指令进行一个数据循环的展示;
为了效果更明显,给div
标签添加了简单的样式,一看就懂的那种。
文档内容
# vue的语法 - 指令{{i}}
效果展示
script 标签使用
在markdown 文档中写
标签,和在 vue组件 中写
是一样的;
而且,在 vitepress 项目的markdown文档中,可以直接应用 vue,因为我们初始化的时候已经引入的了 vue。
所以,整个的使用起来就非常的丝滑。
文档内容
由于下面的内容指定的md格式的,所以展示的效果是黑白色的,
阅读起来可能较为枯燥,但是请耐心阅读,代码还是非常简单的。
# vue的语法 - script 标签 这是响应式的属性num : {{ num }}console.log('markdown 中写 script 标签 begin ');import {ref,onMounted} from 'vue'const num = ref(100)onMounted(()=>{console.log('markdown 中写 script 标签 - onMounted success ');})
效果展示
style 标签使用
在 vitepress 的文档中,进行【局部】样式的定义,
推荐使用的写法,
不推荐的写法,(官方文档提示会增加页面的大小)。
补充- style module 的语法
方式一 : 默认名称的方式
定义css .divcolor{ color:red; }
使用css :动态绑定 : $style.xxx这是一个div标签
方式二 : 指定module 名称的方式
定义css .divcolor{ color:red; }
使用css :动态绑定 : $自定义的名称.xxx这是一个div标签
文档内容
# vue的语法 - style 标签 这是一个div 这是第二个div.divcolor{color:red}.divcolor{color:blue}
效果展示
样式的动态绑定成功!
第一个字体为红色
,使用的是默认的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}} ```