【IMWeb训练营作业】Selector

来源：互联网发布：兰州大学网络教育入口编辑：程序博客网时间：2024/05/22 12:11

----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>

截图：

小结：

本课内容学习略为匆忙，之后还会重新复习，加深印象。

0 0