代码展示
chart
一个基础南丁格尔玫瑰图案例
一个基础南丁格尔玫瑰图案例
mermaid
code
一个函数式 React Demo
[react] 一个函数式 React Demo
export default () => {
const message = '十分帅'
const handler = () => {
alert(message)
}
return (
<div className='box'>
h7ml
<span id='very' onClick={handler}>
{message}
</span>
</div>
)
}
.box span {
color: blue;
}
Vue Demo
[vue] 一个 Vue Demo
<template>
<div class="box">
h7ml
<span @click="handler">{{ message }}</span>
</div>
</template>
<script>
export default {
data: () => ({ message: '十分帅' }),
methods: {
handler() {
alert(this.message)
}
}
}
</script>
<style>
.box span {
color: red;
}
</style>
react-demo 一个类式 React Demo
一个类式 React Demo
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = { message: '帅' }
}
handler() {
this.setState((state) => ({
message: `十分${state.message}`
}))
}
render() {
return (
<div className='box'>
<code>h7ml</code>
<span id='powerful' onClick={this.handler.bind(this)}>
{this.state.message}
</span>
</div>
)
}
}
.box #powerful {
color: blue;
}
Vue Composition Demo
一个 Vue Composition Demo
<template>
<div class="box">
<code>h7ml</code>
is
<span @click="handler">{{ message }}</span>
!
</div>
</template>
<script>
const { ref } = Vue
export default {
setup() {
const message = ref('powerful')
const handler = () => {
message.value = 'very ' + message.value
}
return {
message,
handler
}
}
}
</script>
<style>
.box span {
color: red;
}
</style>
Vue Option Demo
一个 Vue Option 演示
<template>
<div class="box">
<code>h7ml</code>
is
<span @click="handler">{{ message }}</span>
!
</div>
</template>
<script>
export default {
data: () => ({ message: 'powerful' }),
methods: {
handler() {
this.message = 'very ' + this.message
}
}
}
</script>
<style>
.box span {
color: red;
}
</style>
vue-playground Vue 交互演示
Vue 交互演示
vue-playground 自定义导入与映射的 Vue 交互演示
自定义导入与映射的 Vue 交互演示