（腾讯课堂学习小demo：https://ke.qq.com/course/256052）
一、简单的指令应用 ——打击灭火器
图片素材点击腾讯课堂的链接获取
html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="author" content="xing.org1^-^"> 6 <title>敲烂灭火器</title> 7 <link rel="stylesheet" href="style.css"> 8 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <div class="img-box" v-bind:class="{imgburst:ended}"></div> 13 <div v-show="!ended">生命值剩余：{{health}} %</div> 14 <div v-show="ended">你赢了！</div> 15 <div class="progress"> 16 <div class="progress-child" v-bind:style="{width: health + '%'}"></div> 17 </div> 18 <div class="button-box"> 19 <button class="btn1" v-on:click="blow" v-bind:class="{disabled: ended}" >使劲敲</button> 20 <button v-on:click="restart">重新开始</button> 21 </div> 22 </div> 23 <script src="vueJson.js"></script> 24 </body> 25 </html>