代码展示

以雷霆击碎黑暗

A BiliBili video

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

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