Vue.js组件(component)的应用---实现点击按钮转换页面的功能

组件的内部构成

组件和Vue实例类似，都有自己的data和methods属性，但是组件中的data和实例的data有点不一样：

实例中的data可以为一个对象，组件中的data除了必须是一个方法之外，该方法内部还必须返回一个对象

<div id="app">
    <mycom1/>
</div>
<script>
    Vue.component('mycom1',{
        template:'<h1>这是全局组件----{{msg}}</h1>',
        data:function(){
            return {
                msg:'这是组件中的data定义的数据'
            }
        }
    })
    new Vue({
        el:'#app',
        data:{},
        methods:{}
    })
</script>

组件内部除了有template属性绑定模板和data属性绑定数据之外，还可以有methods属性来绑定事件方法：

<div id="app">
    <counter/>
</div>
<template id="tmp">
    <div>
        <input type="button" value="+1" @click='btn'>
        <span>{{count}}</span>  
    </div>     
</template>
<script>
    Vue.component('counter',{
        template:'#tmp',
        data:function(){
            return{
                count:0
            }
        },
        methods:{
            btn(){
                this.count++;
            }
        }
    })
    new Vue({
        el:'#app',
        data:{}
    })
</script>

点击‘+1’按钮，后面就会根据点击的次数增加。

实现点击按钮出现相应的页面

想要实现某宝登录注册页面的效果，点击登录就是登录的内容出现，点击注册，则注册的内容出现，这里只是简单的实现以下这个效果，没有渲染页面。

<div id="app">
    <a href="#" @click.prevent='flag=true'>登录</a>
    <a href="#" @click.prevent='flag=false'>注册</a>
    <login v-if='flag'></login>
    <register v-else='flag'></register>

</div>
<template id="tmp1">
    <div>
        <h1>登录的界面</h1>  
    </div>     
</template>
<template id="tmp2">
    <div>
        <h1>注册的界面</h1>  
    </div>     
</template>
<script>
    Vue.component('login',{
        template:'#tmp1',
        
    })
    Vue.component('register',{
        template:'#tmp2'
    })
    new Vue({
        el:'#app',
        data:{
            flag:true,
        }
    })
</script>

点击注册

分析：在Vue实例中设定flag，当flag的值为true时，跳转至登录页面；当flag值为false时，跳转至注册页面。v-if和v-else指令控制转换条件；因为是超链接a标签，所以需要用事件修饰符.prevent来点击之后，防止默认事件(跳转) 发生。

回顾如何创建组件

组件的创建