2018-09-18vue.js组件

一、组件：可以拓展HTML元素，封装可重用的代码
组件分为全局组件和局部组件
通过prop向子组件传递数据

全局组件：
body部分：

<div id="itany">

   <my-component></my-component>
  
  </div>

js部分：

<script src="js/vue.js"></script>
<script>
//全局组件
       Vue.component('my-component',{
      template:`
                <div>
                      <h1>这是我第一个组件</h1>
                      <a href="#">去百度</a>
                      <a href="#">去百度</a>
                      <a href="#">去百度</a>
                      <a href="#">去百度</a>
                      <a href="#">去百度</a>
                      <a href="#">去百度</a>
                   </div>
                `
             })
    new Vue({
        el:"#itany",
        data:{
            msg:'hello vue'
         }
        }
    })
</script>

局部组件：

body部分：

<div id="itany">

   <my-component></my-component>
  
  </div>

js部分：

    <script src="js/vue.js"></script>
    <script>

    new Vue({
        el:"#itany",
        data:{
            msg:'hello vue'
        },
         // 局部组件
        components:{
            'my-component':{
                template:`
                        <div>
                            <a href="#">去百度</a>
                            <a href="#">去百度</a>
                            <a href="#">去百度</a>
                            <a href="#">去百度</a>
                            <a href="#">去百度</a>
                        </div>
                    `
            }
        }
    })
</script>

二、全局组件和局部组件效果图：

全局组件和局部组件效果图.png

  组件可以被嵌套
  组件中的data属性必须是一个函数

body部分：

  <div id="itany">
       <my-component></my-component>
  </div>

js部分：

<script src="js/vue.js"></script>
<script>
  //组件一
    Vue.component("my-component",{
        template:`
            <div>
                <h1>{{msg}}</h1>
                <button @click="alt">点击按钮</button>
                <my-child></my-child>
            </div>
        `,
        data:function(){
            return{
                msg:'我是组件一中的内容'
            }
        },
        methods:{
            alt:function(){
                alert(1111)
            }
        }
    })
    
    //组件二
    Vue.component("my-child",{
        template:`
            <div>
                <p>我是组件二</p>
                <a href="#">去百度</a>
            </div>
        `
    })
    new Vue({
        el:"#itany",
    })
</script>

三、父给子传值案例props['属性名']

body部分：

  <div id="itany">
    <father></father>
 </div>

js部分：

<script src="js/vue.js"></script>
<script>
    Vue.component('father',{
        template:`
            <div>
                <h3>这是父元素</h3>
                <child v-bind:number='num'></child>
                <button @click="add">点击加1</button>
            </div>
        `,
        data:function(){
            return{
                num:1
            }
        },
        methods:{
            add:function(){
                this.num++
            }
        }
        
    })
    //子组件
    Vue.component('child',{
        props:['number'],
        template:`
            <div>
                <h5>这是子元素</h5>
                <a href="#">{{number}}</a>
            </div>
        `
    })
    new Vue({
        el:"#itany",
        data:{}
    })
</script>

效果图： 父给子传值案例.png

四、添加删除水果列表案例

body部分：

 <div id="itany">
    <father></father>
 </div>

js部分：

<script src="js/vue.js"></script>
<script>
    Vue.component('father',{
        template:`
                <div>
                    <h1>这是父元素</h1>
                    <child-one v-bind:lis='arrs'></child-one>
                    <input type="text" v-model="fruList">
                    <button @click="add">点击添加</button>
                    <child-two v-bind:fruit='arr'></child-two>
                    
                </div>
            `,
        data:function(){
            return{
                arr:['apple','pear','banana','orange','watermelon'],
                arrs:'水果列表',
                fruList:''
            }
        },
        methods:{
            add:function(){
                this.arr.push(this.fruList)
                this.fruList=''
            }
        }
    })
    
    
    //子组件一
            Vue.component('child-one',{
                props:['lis'],
                template:`
                        <h3>{{lis}}</h3>
                    `
            })
            
    //  子组件二
            Vue.component('child-two',{
                props:['fruit','contro'],
                template:`
                    <ul>
                        <li v-for="(value,index) in fruit">
                                {{value}}
                                <button @click='del(index)'>删除</button>
                        </li>
        
                    </ul>
                `,
                methods:{
                    del:function(ind){
                        this.fruit.splice(ind,1)
                    }
                }
            })
            
    new Vue({
        el:"#itany",
        data:{
            
        }
    })
</script>

效果图： 添加删除水果列表案例.png