普通代码演示

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

注意事项

  • 我们使用 "ShadowDOM" 进行样式隔离,并已经将 document 替换为了 shadowRoot 对象。如果需要访问页面的 document,请访问 window.document

# 例子

Demo 演示
<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>
1
2
document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});
1
2
3
span {
  color: red;
}
1
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
上次编辑于: 2022年6月4日 13:16
贡献者: Mr.Hope , Mr.Hope