普通代码演示
Mr.Hope ... 2021-8-26 小于 1 分钟
# 格式
::: normal-demo 可选的标题文字
```html
<!-- html code -->
```
```js
// js code
```
```css
/* css code */
```
```json
// 配置 (可选)
{
"jsLib": [
...
],
"cssLib":[
...
]
}
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
注意事项
- 我们使用 "ShadowDOM" 进行样式隔离,并已经将
document
替换为了shadowRoot
对象。如果需要访问页面的 document,请访问window.document
。
# 例子
Demo 演示
<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>
1
2
2
document.querySelector("#very").addEventListener("click", () => {
alert("非常强大");
});
1
2
3
2
3
span {
color: red;
}
1
2
3
2
3
代码
::: normal-demo Demo 演示
```html
<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("非常强大");
});
```
```css
span {
color: red;
}
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20