----style.css----------
*{ margin: 0; padding: 0; text-align: center; } .warp{ height: 300px; width: 250px; padding: 10px 10px; position: relative; margin-left: -125px; left: 50%; border: 1px solid red; text-align: center; } .warp ul li{ list-style-type: none; text-align: left; margin-left: 15px; }
------2-组件.html--------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <link type="text/css" rel="stylesheet" href="style.css"> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2>自定义的下拉框</h2> <customer-selector btn-value="查询"></customer-selector> <h2>自定义的下拉框2</h2> <customer-selector btn-value="搜索"></customer-selector> </div> <script> //全局注册组件 Vue.component("customer-selector",{ props:["btnValue"], template: `<section class="warp"> <div class="searchIpt clearFix"> <div class="clearFix"> <input type="text" class="keyword" value=""> <input type="button" :value="btnValue"> <span></span> </div> <ul class="list"> <li>html+css</li> <li>html5+css3</li> <li>javascript</li> <li>angular</li> <li>vue</li> <li>react</li> <li>jquery</li> <li>nodejs</li> </ul> </div> </section>` }); new Vue({ el: "#app", }) </script> </body> </html>
截图：
小结：
本课内容学习略为匆忙，之后还会重新复习，加深印象。
377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
