代码展示
你们渴望成为强者吗,我渴望过,因为弱小的我,曾亲眼目睹家园的毁灭,所以我追寻力量,雷电改变了我,但强者,依然守护不了你们每一个人,弱小的你们,永远都被欺凌屠戮,我用尽全力,仍只是一个无能的失败者,真正的强者不应该只是我一个人的强大,雷霆所及,无不糜灭,你们逃避,我征服,惶惶世人,可知警钟,已在怒雷中长鸣,只有最震慑的雷霆才能击碎最沉重的黑暗,迈向光明之路,注定荆棘丛生,我的道路没有岔口,因为未来早已笃定,无尽征程漫漫,风暴如影随形,目睹过毁灭,才能看到新生,我掌中的不只是力量,也是打破桎梏的钥匙,弱小并不可怕,可怕的是懦弱,一个人的强大,并不是真正的强大,无法击垮我们的,只会令我们更加强大,不过只是一次小小的失败,向死方生! 
libie

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 交互演示