2018-09-20 Vue.js 组件

组件(component)：组件化开发 组件可以扩展 HTML 元素，封装可重用的代码。
全局组件 局部组件
注： 组件名不可以使用已经存在的html元素 组件中的data数据是一个函数，并且要有一个返回值
全局组件：

<div id="app">
    <my-componet></my-componet>
</div>
<script>
    //全局组件
    Vue.component('my-componet',{
        template:`
        <ul>
            <li><a href="">组件1</a></li>
            <li><a href="">组件2</a></li>
            <li><a href="">组件3</a></li>
        </ul>
        `
    });
    new Vue({
        el:"#app"
    });
</script>

局部组件：

<div class="add">
    <you-componet></you-componet>
</div>
<script>
    //局部组件
    new Vue({
        el:".add",
        components:{
            'you-componet':{
                template:`
                <ul>
                    <li><a href="">还有十天</a></li>
                    <li><a href="">我就放假了</a></li>
                    <li><a href="">回家</a></li>
                </ul>
                `
            }
        }
    });
</script>

练习：

<div id="aqq">
        <her-componet></her-componet>
</div>
<script>
//template:``  里面标签如果有两个或多个同级要加
    Vue.component('her-componet',{
        template:`
        <div>
            <h1>胡歌</h1>
            <img src="../img/1.jpg" alt="">
            <a href=""></a>
            <p>李逍遥</p>
            <p>景田</p>
            <p>郭靖</p>
            <p>易小川</p>
            <p>梅长苏</p>
            <p>董永</p>
            <p>杨家六郎</p>
            <p>宁采臣</p>
        </div>>
        `
    });
    new Vue({
        el:"#aqq"
    });
</script>

结果如下：

QQ截图20180920105540.png
运用组件做出一些简单效果

<div id="app">
    <my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-component',{
        template:`
        <div>
            <h1>{{msg}}</h1>
            <button @click="akm">害怕</button>
        </div>
        `,
        data:function(){
            return{
                msg:"你害怕大雨吗"
            }
        },
        methods:{
            akm:function(){
                alert("哒哒哒");
            }
        }
    });
    new Vue({
        el:"#app"
    });
</script>