1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单事件绑定</title> 6 </head> 7 <body> 8 <div id="app"> 9 <alert-box> 10 Something bad happened. 11 </alert-box> 12 </div> 13 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15 <script type="text/javascript"> 16 // 定义一个名为 button-counter 的新组件 17 Vue.component('alert-box', { 18 template: ` 19 <div class="demo-alert-box"> 20 <strong>Error!</strong> 21 <slot></slot> 22 </div> 23 ` 24 }) 25 new Vue({ 26 el: '#app' 27 }) 28 29 30 </script> 31 </body> 32 </html>
