使用方法
配合 Vuepress 引入代码段
guide.md
<demo-box title="处理用户输入">
为了让用户和你的应用进行交互，我们可以用 `v-on` 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。
<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>
使用 markdown 代码块自定义代码
<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']">
> 来自 [Element-ui input number](https://element.eleme.cn/#/zh-CN/component/input-number#inputnumber-ji-shu-qi)
要使用它，只需要在 `el-input-number` 元素中使用 `v-model` 绑定变量即可，变量的初始值即为默认值。
<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>