slimjs cdn调用使用示例
时间: 2023-05-27 20:02:56 浏览: 56
以下是 Slim.js CDN 的调用示例:
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Slim.js CDN 示范</title>
<script src="https://unpkg.com/slim-js"></script>
<script>
const { Slim } = window['slim-js'];
class MyApp extends Slim {
onClick() {
alert('你点击了按钮');
}
render() {
return (
<div>
<h1>Hello, Slim.js!</h1>
<button onclick={this.onClick.bind(this)}>点击我</button>
</div>
)
}
}
Slim.tag('my-app', MyApp);
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
```
注意,在使用 Slim.js CDN 的时候,我们需要在 `head` 标签中引用 `https://unpkg.com/slim-js` 这个地址,然后在代码中调用 `window['slim-js']` 得到 Slim.js 的相关内容,然后定义一个 Slim 组件,最后使用 `Slim.tag('my-app', MyApp)` 注册这个组件。
上述代码中,我们定义了一个 `MyApp` 组件,它有一个 `onClick` 方法,在点击按钮时会显示一个提示框。`render` 方法用于渲染组件结构。最后我们使用 `Slim.tag('my-app', MyApp)` 将 `MyApp` 组件注册为一个 `my-app` 标签,然后在 HTML 中使用 `<my-app></my-app>` 即可将组件渲染出来。