VuePress Markdown 与 Vue SFC：修订间差异
跳到导航
跳到搜索
（创建页面，内容为“ 每一个 Markdown 文件，首先都会编译为 HTML ，然后转换为一个 Vue 单文件组件 (SFC) 。换句话说，你可以像写 Vue SFC 一样来写 Markdown 文件： * <code><script></code> 和 <code><style></code> 标签会直接被当作 Vue SFC 中的标签。换句话说，它们是从 <code><template></code> 标签中提升到了 SFC 的顶层。 * 所有 <code><script></code> 和 <code><style></code> 标签的…”） |
无编辑摘要 |
||
| 第45行： | 第45行： | ||
</style></pre> | </style></pre> | ||
'''输出''' | '''输出''' | ||
<pre> | |||
''你好， {{ msg }}'' | ''你好， {{ msg }}'' | ||
| 第74行： | 第74行： | ||
} | } | ||
</style> | </style> | ||
</pre> | |||
2023年8月12日 (六) 15:38的最新版本
每一个 Markdown 文件，首先都会编译为 HTML ，然后转换为一个 Vue 单文件组件 (SFC) 。换句话说，你可以像写 Vue SFC 一样来写 Markdown 文件：
<script>和<style>标签会直接被当作 Vue SFC 中的标签。换句话说，它们是从<template>标签中提升到了 SFC 的顶层。- 所有
<script>和<style>标签的以外的内容，会先被编译为 HTML ，然后被当作 Vue SFC 的<template>标签。
由于 Vue 单文件组件只能包含一个 <script> 标签，你应该避免在 VuePress Markdown 中使用多于一个 <script> 标签。
我们来看一个例子：
输入
_你好， {{ msg }}_
<RedDiv>
_当前计数为： {{ count }}_
</RedDiv>
<button @click="count++">点我！</button>
<script setup>
import { h, ref } from 'vue'
const RedDiv = (_, ctx) => h(
'div',
{
class: 'red-div',
},
ctx.slots.default()
)
const msg = 'Markdown 中的 Vue'
const count = ref(0)
</script>
<style>
.red-div {
color: red;
}
</style>
输出
''你好， {{ msg }}''
<RedDiv>
''当前计数为： {{ count }}''
</RedDiv>
<button @click=“count++”>点我！</button>
<script setup>
import { h, ref } from 'vue'
const RedDiv = (_, ctx) => h(
'div',
{
class: 'red-div',
},
ctx.slots.default()
)
const msg = 'Markdown 中的 Vue'
const count = ref(0)
</script>
<style>
.red-div {
color: red;
}
</style>