Vue demo box

Guide

Use with Vuepress Import Code Snippets

guide.md

<demo-box title="Handling User Input">

To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances.

<reverse-message slot="demo" />

<template slot="code">

<<< docs/.vuepress/components/reverse-message.vue

</template>

</demo-box>

docs/.vuepress/components/reverse-message.vue

<template>
  <div>
    <p class="message">{{ message }}</p>
    <button v-on:click="reverseMessage">
      reverseMessage
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}
</script>

<style>
.message {
  font-size: 14px;
  color: red;
}
</style>

Use with markdown code block syntax

<demo-box
  :js-res="[
    '//unpkg.com/vue/dist/vue.js',
    '//unpkg.com/element-ui@2.12.0/lib/index.js'
  ]"
  :css-res="['//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css']">

> From [Element-ui input number](https://element.eleme.cn/#/en-US/component/input-number#basic-usage)

Bind a variable to `v-model` in `<el-input-number>` element and you are set.

<element-input-number slot="demo" />

<template slot="code">

```vue
<template>
  <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
</template>

<script>
export default {
  data() {
    return {
      num: 1
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>
```

</template>

</demo-box>

← Example→