跳至主要內容

代码展示


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