vue组件大集合 component

　　vue组件分为全局组件、局部组件和父子组件，其中局部组件只能在el定义的范围内使用，全局组件可以在随意地方使用，父子组件之间的传值问题等。

Vue.extend 创建一个组件构造器
template:'' 组件要显示的内容
component('',); 　注册组件，接收两个参数，第一个参数用来使用的标签，第二个参数标识要显示内容的构建器

详情请看vue的API：　　http://v1-cn.vuejs.org/guide/components.html

一、简单的组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script type="text/javascript">
        var AAA = Vue.extend({        //创建一个组件构造器
            template:'<strong>123</strong>'    //组件要显示的内容
        });
        //var a = new AAA();    相当于又new了一个Vue，具有它的所有属性(一般不用这种方法)
        Vue.component('aaa',AAA);    //注册组件
        new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        })
    </script>
</html>

二、给组件添加事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('aaa',{
            data(){
                return {
                    msg:'我是p标签'
                };
            },
            methods:{
                sj:function(){
                    alert(111);
                }
            },
            template:'<p @click="sj()">{{msg}}</p>'    //接收的data值必须是函数的形式，函数必须返回一个对象
        })
        new Vue({
            el:'#box',
            data:{
                
            },
        })
    </script>
</html>

三、vue动态组件--选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body id="box">
        <input type="button" @click="s='suning'" value="选项卡1" /><!--is后面跟着组件的名称 -->
        <input type="button" @click="s='saning'" value="选项卡2" />
        <comment :is='s'></comment>
    </body>
    <script type="text/javascript">
         new Vue({
             el:'#box',
             data:{
                 s:'suning'
             },
             components:{
                 'suning':{
                     template:'<p>选项卡1</p>'
                 },
                 'saning':{
                     template:'<p>选项卡2</p>'
                 }
             },
         })
    </script>
</html>

四、路由的嵌套

<html>
    <head>
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-resource.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
    </head>
    <style>
        .v-link-active{
            color: red;
        }
    </style>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">首页</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新闻</a>
                </li>
            </ul>
            <div>
                <router-view></router-view><!-- 展示内容-->
            </div>
        </div>
        <template id="home">
            <h3>home</h3>
            <a v-link="{path:'/home/login'}">登陆</a>
            <a v-link="{path:'/home/reg'}">注册</a>
            <router-view></router-view>
        </template>
        <template id="news">
            <h3>新闻</h3>
            <div>
                <a v-link="{path:'/news/detail/001'}">新闻001</a>
                <a v-link="{path:'/news/detail/002'}">新闻002</a>                
            </div>
            <router-view></router-view>
        </template>
        <template id="detail">
            <!--{{$route | json}}-->
            {{$route.params | json}}　　　　<!-- 关于$route请看五，$route的参数 -->
        </template>
    </body>
    <script>
        var App = Vue.extend();
        var Home = Vue.extend({
            template:'#home'
        });
        var News = Vue.extend({
            template:'#news'
        });
        var Detail = Vue.extend({
            template:'#detail'
        });
        var router = new VueRouter();
        router.map({
            'home':{
                component:Home,
                subRoutes:{
                    'login':{
                        component:{
                            template:'你点击了登陆'
                        }
                    },
                    'reg':{
                        component:{
                            template:'你点击了注册'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{
                        component:Detail
                    }
                    
                }
            },
        });
        router.redirect({
            '/':'/home'
        })
        router.start(App,'#box');
    </script>
</html>

五、$route的参数

$route中包含路由的其他信息
$route.params 得到当前的参数
$route.path 得到当前的路径
$route.query 得到数据

vue组件大集合 component

猜你喜欢