【IMWeb训练营作业】 vue练习-组件select

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

suzhenhuisoso

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

阅读量343

点赞数

本文链接：https://blog.csdn.net/suzhenhuisoso/article/details/70620894

版权

基于vue2.0，先来看看效果图：

1、学习使用了全局组件和自定义组件。

<div class="app">
        <h3>select自定义组件</h3>
        
        <custom-select btn-value="go"></custom-select>
        <custom-select btn-value="搜索"></custom-select>
    </div>

/* 全局组件 */
        Vue.component('custom-select',{
            props:['btnValue'],
            template:`<section>
            <div class="clearfix">
                <input type="text" name="" id="" value="">
                <input type="button" :value="btnValue">
                <span></span>
            </div>
            <ul class="list">
                <li>html5</li>
                <li>css</li>
                <li>javascript</li>
                <li>react</li>
                <li>vue</li>
                <li>jquary</li>
            </ul>
        </section>`
        })

        var m=new Vue({
            el:'.app'
        })

        /* 局部组件 */
        var n=new Vue({
            el:'.app2',
            components:{
                "custom-select2":{
                    props:['btnValue'],
                    template:`<section>
                    <div class="clearfix">
                        <input type="text" name="" id="" value="">
                        <input type="button" :value="btnValue">
                        <span></span>
                    </div>
                    <ul class="list">
                        <li>html5</li>
                        <li>css</li>
                        <li>javascript</li>
                        <li>react</li>
                        <li>vue</li>
                        <li>jquary</li>
                    </ul>
                </section>`
                }
            }
        })