vue中的组件

为了拆分Vue实例中的代码量，以不同的组件划分不同的功能，使用功能的时候直接调用相关的额组件就行了

模块化：从代码的逻辑角度进行划分的，方便代码的分层开发，每个模块的只能单一

组件化：从ui界面的角度进行划分的，方便ui间的复用

组件的实现方式

方式一：

        var com1=Vue.extend({
            template:'<h3>这是使用Vue.extend属性创建的组件</h3>'//通过template属性，指定组件需要展示的HTML结构
        })
        // 使用vue.component('组建的名称',创建出来的组件模板对象)
        Vue.component('mycom1',com1)

使用

        <!-- 使用的时候直接当做HTML标签的形式使用，注意在驼峰的命名方式中名字需要改成 -小写 -->
        <mycom1></mycom1>

 

方式二：

        Vue.component('mycom2',{
            // 注意组件只能有唯一的根元素,有且仅有一个根元素
            template: '<div><h1>这是使用h1创建的</h1><span>123</span></div>'
        })

方式三：

直接控制一个template标签对象，这种方式可以写的时候有提示

        Vue.component('mycom3',{
            template: '#tmpl'
        })
    <template id="tmpl">
        <div>
            <h1>这是通过template元素定义的组件结构</h1>
        </div>
    </template>

el data methods filters directivess beforecreate

私有组件的使用

            components:{
                login: {
                    //template:'<h1>私有组件</h1>'
                    template: '#temp'
                }
            }

 

 

组件中的数据

        Vue.component('mycom1',{
            // 组件可以有自己的数据，组件的data和实例的data有点不一样，实例中的data可以是一个对象
            // 组建中的data必须是一个方法
            // 方法内部号必须返回一个对象
            // 组建中的数据和实例中的data使用方式完全一样，使用插值表达式
            template: '<h1>这是全局组件---{{msg}}</h1>',
            data: function(){
                return {
                    msg:'这是组件自己的数据'
                }
            }
        })

自定义的组件实现按钮加一并且显示的功能，

    <div id="app">
        <counter></counter>

    </div>
    <template id="temp">
        <div> 
            <input type="button" value="+1" @click="increment">
            <h3>{{count}}</h3>
        </div>
    </template>

    <script>

        Vue.component('counter', {
            template: '#temp',
            data: function () {
                return {
                    count:0
                }
            },
            methods:{
                increment(){
                    this.count++
                }
            }
        })


        var vm = new Vue({
            el: '#app',
        })

v-if和v-else实现点击相应的标签实现登录和注册界面的简单切换

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

    <script>
        Vue.component('login',{
            template:'<h3>登录组件</h3>'

        })
        Vue.component('register',{
            template:'<h3>注册组件</h3>'
        })
    
        var vm =new Vue({
            el:'#app',
            data:{
                flag:true
            }
        })
    </script>

 

实现组件切换的第二种形式

使用vue提供的component来指定需要放置的组件，里面有个属性需要放置组件的名字，这里我们将其放上一个VM中定义的变量，这样在不同的点击事件中将不同的组件名字赋予变量，这样来实现组件的切换

    <div id="app">

        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- 在这里指定需要展示组建的名称 -->
        <component :is="comName"></component>

    </div>
    

    <script>
        Vue.component('login',{
            template:'<h1>登录组件</h1>'
        })

        Vue.component('register',{
            template:'<h1>注册组件</h1>'
        })

        var vm= new Vue({
            el: '#app',
            data: {
                comName:'login'
            }
        })

        // component\template\transition\transitiongroup
    </script>

动画实现组件之间的切换，使用transition标签将需要切换的标签放在里面，还可以在transition标签中实现动画的切换模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px)
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease
        }
    </style>
</head>
<body>

    <div id="app">

        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- 在这里指定需要展示组建的名称 -->
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>

    </div>
    

    <script>
        Vue.component('login',{
            template:'<h1>登录组件</h1>'
        })

        Vue.component('register',{
            template:'<h1>注册组件</h1>'
        })

        var vm= new Vue({
            el: '#app',
            data: {
                comName:'login'
            }
        })

        // component\template\transition\transitiongroup
    </script>
</body>
</html>

 

posted on 2019-05-09 14:59  认真的谁  阅读(184)  评论(0)    收藏  举报

导航