【IMWeb训练营作业】Selector

最新推荐文章于 2017-04-25 11:48:05 发布

原创最新推荐文章于 2017-04-25 11:48:05 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文通过实例演示了如何使用Vue.js创建自定义组件，并详细展示了组件的样式设置及功能实现，包括属性传递和模板结构。

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