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

前言

VitePress 中,markdown文档最终都会转换成为 html文件,我们在访问的时候,也是直接访问的 xxx.html 文件。而且,markdown文档会被作为 [vue单文件] 进行处理,因此,我们我们可以在文档中使用 vue 语法:
例如 : 差值表达式、指令 等基础语法;也可以使用 <script> 标签定义逻辑代码;也可以使用<style> 标签定义样式代码。本文将介绍一下 vitepress 中markdown文档使用 vue 的一些基础用法。

提示

markdown 文档中可以包含 <script><style> 标签,但是,没有<template>标签;
下面对 具体的使用进行一下案例展示。

模板语法-插值表达式

插值表达式 : {{ }} 即双大括号

文档内容

# vue的语法 - 差值表达式{{ 1+1 }} 

效果展示

页面渲染的是 1+1 的结果值 2,而不是 “1+1” 这个文本。

在这里插入图片描述

模板语法-指令

本案例展示 v-for 指令进行一个数据循环的展示;
为了效果更明显,给 div 标签添加了简单的样式,一看就懂的那种。

文档内容

# vue的语法 - 指令<div v-for="i in 3" style="width:30px;margin-top:10px;background:black;color:green;text-align:center;border-radius:5px">
{{i}}
</div>

效果展示

在这里插入图片描述

script 标签使用

在markdown 文档中写 <script> 标签,和在 vue组件 中写<script>是一样的;
而且,在 vitepress 项目的markdown文档中,可以直接应用 vue,因为我们初始化的时候已经引入的了 vue。
所以,整个的使用起来就非常的丝滑。

文档内容

由于下面的内容指定的md格式的,所以展示的效果是黑白色的,
阅读起来可能较为枯燥,但是请耐心阅读,代码还是非常简单的。

# vue的语法 - script 标签<div> 这是响应式的属性num : {{ num }}</div><script setup lang="ts">console.log('markdown 中写 script 标签 begin ');import {ref,onMounted} from 'vue'const num = ref(100)onMounted(()=>{console.log('markdown 中写 script 标签 - onMounted success ');})
</script>

效果展示

在这里插入图片描述

style 标签使用

在 vitepress 的文档中,进行【局部】样式的定义,
推荐使用 <style module> 的写法,
不推荐<style scoped>的写法,(官方文档提示会增加页面的大小)。

补充- style module 的语法

方式一 : 默认名称的方式

定义css
<style module>.divcolor{color:red;}
</style>
使用css :  动态绑定 : $style.xxx
<div :class="$style.divcolor">这是一个div标签</div>

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

定义css
<style module="abcmodule">.divcolor{color:red;}
</style>
使用css :  动态绑定 : $自定义的名称.xxx
<div :class="abcmodule.divcolor">这是一个div标签</div>

文档内容


# vue的语法 - style 标签<div :class="$style.divcolor"> 这是一个div</div>
<div :class="abcmodule.divcolor"> 这是第二个div</div><style module>.divcolor{color:red}
</style><style module="abcmodule">.divcolor{color:blue}
</style>

效果展示

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

在这里插入图片描述

插值语法的转义

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

语法 :
情境一 : 在 元素块中 添加v-pre 指令即可。如 在<span><div> 标签中添加。
情景二 : 自定义容器中 使用 v-pre 转义插值表达式。

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

文档内容

# vue的语法 - 插值表达式的转义<div>正常 :  1 + 1 = {{ 1 + 1}}</div> <div v-pre>转义  :    1 + 1 = {{ 1 + 1}}</div> ::: tip 正常1 + 1 = {{ 1+1 }}
:::::: v-pre1 + 1 = {{ 1+1 }}
:::

运行效果

在这里插入图片描述

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

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

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

文档内容

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

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/677388.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

决策树之scikit-learn

实例 from sklearn.datasets import load_iris from sklearn import tree import matplotlib.pyplot as plt# Load iris dataset iris load_iris() X, y iris.data, iris.target# Fit the classifier clf tree.DecisionTreeClassifier() clf clf.fit(X, y)# Plot the deci…

Linux命令-batch命令(在系统不繁忙的时候执行定时任务)

说明 batch命令 用于在指定时间&#xff0c;当系统不繁忙时执行任务&#xff0c;用法与at相似。 语法 batch(选项)(参数)选项 -f&#xff1a;指定包含具体指令的任务文件&#xff1b; -q&#xff1a;指定新任务的队列名称&#xff1b; -m&#xff1a;任务执行完后向用户发送…

详细介绍Python网络编程模块

根据前面对网络分层棋型的介绍&#xff0c;我们知道实际的网络模型大致分为四层&#xff0c;这四层各有对应的网络协议提供支持&#xff0c; 网络层协议主要是 IP&#xff0c;它是所有互联网协议的基础&#xff0c;其中 ICMP&#xff08;Internet Control Message Protocol&…

烟雨要饭网带后台,附带搭建教程

直接上传访问即可&#xff0c;有安装向导&#xff0c;php环境不得低于7.0 后台地址/Admin&#xff0c;默认账号admin 默认密码123456 自带乞讨音乐&#xff0c;增加樱花特效

域内NAT:如何让内网client通过公网地址访问内网server?

第一步&#xff0c;实现任意公网用户访问内网server。按教育网规矩&#xff0c;公网过来的流量要访问校内网的server必须从教育专线&#xff08;路由器接口G0/0/1)进入。 第二步&#xff0c;实现内网主机通过公网地址210.43.2.3能够访问内网server192.168.1.2&#xff0c;图中①…

C++ 类和对象篇(九) 初始化列表

目录 一、什么是初始化列表&#xff1f; 二、为什么需要初始化列表&#xff1f; 三、初始化列表怎么使用&#xff1f; 3.1 在构造函数中使用初始化列表 3.2 注意 3.3 结论 3.4 应用场景 四、初始化列表的初始化顺序 五、另一种初始化成员变量的方法 【总结 一、什么是初始化列…

12.05 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 吉利控股集团2024届全球校园招聘补招岗位发布&#xff08;内推&#xff09; 校招 | 吉利控股集团2024届全球校园招聘补招岗位发布&#xff08;内推&#xff09; 2、校招 | 浪潮科…

【计算机网络】时延,丢包,吞吐量(分组交换网络

时延 结点处理时延(nodal processing delay&#xff09; dproc 排队时延&#xff08;queuing delay&#xff09; dqueue 传输时延&#xff08;transmission delay&#xff09; dtrans 路由器将分组推出所需要的时间&#xff0c;是分组长度和链路传输速率的函数 传播时…

年后时段:内在成长的黄金期

在中华民族的传统习俗中&#xff0c;春节是一年一度辞旧迎新的重要节点&#xff0c;它不仅象征着时间的更迭&#xff0c;更是人们生活、工作与心态调整的重要时刻。本文将深入探讨的是&#xff0c;在过年后这一特定时间段内&#xff0c;人的内在成长往往能得到显著提升的现象。…

【深蓝学院】移动机器人运动规划--第4章 动力学约束下的运动规划--笔记

0. Outline 1. Introduction 什么是kinodynamic&#xff1f; 运动学&#xff08;Kinematics&#xff09;和动力学&#xff08;Dynamics&#xff09;都是力学的分支&#xff0c;涉及物体的运动&#xff0c;但它们研究的焦点不同。 运动学专注于描述物体的运动&#xff0c;而…

906. 区间分组(贪心)

路径&#xff1a;906. 区间分组 - AcWing题库 思路&#xff1a; 可以想到是求区间最厚的地方。 每次输入l,r区间让l*2&#xff0c;r*21存入同一个数组&#xff1b; 注意&#xff1a;当lr时,要先计算左点。 代码: #define _CRT_SECURE_NO_WARNINGS #include<iostream&g…

CS50x 2024 - Lecture 3 - Algorithms

TABLE OF CONTENTS 00:00:00 - Introduction 一种统计班上人数的方法&#xff0c;全部站起来&#xff0c;两两配对&#xff0c;一个坐下&#xff0c;循环 00:01:01 - Overview 00:02:58 - Attendance 00:09:40 - Linear Search 00:24:58 - Binary Search 二分搜索 分而治…

018 Linux

文章目录 操作系统定义分类Linux系统构成 Linux文件系统Linux常用命令基础操作命令文件操作压缩解压权限管理显示展示命令其他命令 vi编译器操作使用 添加用户基本概念用户管理命令 ubuntu软件安装ssh服务终端启动Python服务 操作系统 定义 操作系统是管理计算机硬件与软件资…

每日一个shell脚本之钓鱼游戏练手

每日一个shell脚本之钓鱼游戏练手 #!/usr/bin/bash # ************************************** # CSDN: M乔木 # qq邮箱: 2776617348qq.com # 解释器: 这是一个shell脚本 # **************************************# 游戏初始化 fishing_rod"…

接口测试:项目测试

接口测试:项目测试 API文档分析 API文档解析&#xff1a; href节点&#xff1a; 作用 href节&#xff1a;为资源的请求地址&#xff1b;-(请求资源集合时的请求地址要与href相符) “href”:" http://127.0.0.1:8000/api/departments/" items节点&#xff1a; …

【每日随笔】人性 - 如何避免被人伤害 ② ( 人性本善 / 人性本恶 | 如何分辨狼与狗 | 靠不住的关系 | 别人对你的态度 - 取决于你的实力 )

文章目录 一、人性本善 / 人性本恶1、人性本恶2、狼与狗3、如何分辨狼与狗 二、靠不住的关系1、夫妻关系靠不住2、父子关系靠不住3、君臣关系靠不住 三、别人对你的态度 - 取决于你的实力 你 实力强 , 能给周围的人带来利益 , 周围都是 善良的人 ; 你 实力弱 , 不能给别人带来…

政安晨:示例演绎机器学习中(深度学习)神经网络的数学基础——快速理解核心概念(二){两篇文章讲清楚}

这一篇与上一篇是兄弟篇&#xff0c;意在通过两篇文章讲清楚深度学习中神经网络的数学基础&#xff0c;第一次看到这篇文章的小伙伴可以从上一篇文章看起&#xff08;包括搭建环境等等都在上一篇&#xff09;&#xff0c;上一篇链接如下&#xff1a; 政安晨&#xff1a;示例演…

机器学习系列——(十八)K-means聚类

引言 在众多机器学习技术中&#xff0c;K-means聚类以其简洁高效著称&#xff0c;成为了数据分析师和算法工程师手中的利器。无论是在市场细分、社交网络分析&#xff0c;还是图像处理等领域&#xff0c;K-means都扮演着至关重要的角色。本文旨在深入解析K-means聚类的原理、实…

Bean 的作用域

Bean 的作用域种类 在 Spring 中⽀持 6 种作⽤域&#xff0c;后 4 种在 Spring MVC 环境才⽣效 1. singleton&#xff1a;单例作⽤域 2. prototype&#xff1a;原型作⽤域&#xff08;多例作⽤域&#xff09; 3. request&#xff1a;请求作⽤域 4. session&#xff1a;会话作⽤…

双重OSPF + OSPF综合实验

一、实验要求 1.R4为ISP&#xff0c;所连接的所有物理接口为公有网段&#xff0c;任意指定IP即可。 2.R1-2-3 构建一个星型结构的MGRE结构&#xff0c;其中R1为中心点&#xff0c;假设R1的公有IP为固定地址。 3.R1-5-6 构建另一个全连网状的MGRE网络&#xff0c;其中R1/5均为中…