<mark id="oyrth"></mark>
      <tbody id="oyrth"></tbody>
    1. <tbody id="oyrth"></tbody>
        <menuitem id="oyrth"></menuitem>
      1. Vue 全局变量,局部变量

        2019-4-18 释然 前端及开发文章及欣赏

        如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

        全局组件和局部组件
        * 1.先定义组件   Vue.component('组件名', { 组件模板对象 })
        *   注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写
        *                       例如: 组件-->mtText   使用时-->   <my-text></my-text>
        * 2.配置组件的模板  注意: 组件的模板内容有且只有一个根元素
        * 3.在视图层里调用 ,用双标签
        * 4.组件是一个独立的作用域, 也可以看成一个特殊的vue实例, 可以有data, methods,computed等等
        *   注意: 组件的data是函数, 函数中需要返回一个对象作为组件的data
        全局组件案例

        <body>
        <div id="app">
            <my-component></my-component>
        </div>
        <script src="lib/vue-2.4.0.js"></script>
        <script>
        //全局组件
            Vue.component('myComponent',{
                //1.组件的内容/模板
                template: '<div><div>头部组件</div><h1 @click="fn">呵呵{{msg}}</h1></div>',
                data(){
                    return {
                        msg:'hello,组件'
                    }
                },
                methods:{
                    fn(){
                        console.log(this.msg);
                    }
                }
            })
            let vm = new Vue({
                el:"#app",
                data:{
                },
                methods:{

                },

            })
        </script>
        </body>
        局部组件案例

        <body>
        <div id="app">
            <my-component></my-component>
            <my-test></my-test>
        </div>
        <template id="box1">
            <h1>haha</h1>
        </template>
        <template id="box2">
            <div>
                <ul>
                    <li v-for="item in arr">
                        {{ item }}
                    </li>
                </ul>
            </div>
        </template>
        <script src="lib/vue-2.4.0.js"></script>
        <script>
        let vm = new Vue({
                el:"#app",
                data:{
                },
                methods:{

                },
                //局部子组件
                components:{
                    // 组件名: {配置项}
                    "myComponent":{
                        template:'#box1',
                        data(){
                            return {
                                msg:"哈哈"
                            }
                        }
                    },
                    "myTest":{
                        template:"#box2",
                        data(){
                            return {
                                arr:[1,2,3,4]
                            }
                        }
                    }
                }
            })
        </script>
        </body>
        组件切换:法一

        <body>
        <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 src="lib/vue-2.4.0.js"></script>
        <script>
            Vue.component("login",{
                template:"<h1>登录组件</h1>"
            })
            Vue.component("register",{
                template:"<h1>注册组件</h1>"
            })
            let vm = new Vue({
                el:"#app",
                data:{
                    flag: false
                },
                methods:{
                },
            })
        </script>
        </body>
        组件切换:法二

         <style>
                .red{
                    color:red;
                }
                .v-enter{
                    opacity:0;
                    transform: translateX(150px);
                }
                .v-leave-to{
                    opacity:0;
                    transform: translateX(-150px);
                }
                .v-enter-active,
                .v-leave-active{
                    transition: all 0.5s;
                    position: absolute;
                }
            </style>
        </head>
        <body>
        <div id="app">
            <a href="" :class="{red: flag=='login'}" @click.prevent="flag='login'">登录</a>
            <a href="" :class="{red: flag=='register'}" @click.prevent="flag='register'">注册</a>
            <!--  vue提供了一个标签  component标签(理解为一个占位符), 用来展示对应名称的组件  :is属性设置指定的组件名  -->
            <transition>
                <component :is="flag"></component>
            </transition>
        </div>
        <script src="lib/vue-2.4.0.js"></script>
        <script>
            Vue.component("login",{
                template:"<h1>登录组件</h1>"
            })
            Vue.component("register",{
                template:"<h1>注册组件</h1>"
            })
            let vm = new Vue({
                el:"#app",
                data:{
                    flag: "login"
                },
                methods:{

                },
            })
        </script>
        </body>
        父组件向子组件传值

        <body>
        <div id="app">
            <my-component :fromfather="father"></my-component>
        </div>
        <template id="box1">
            <h1 @click="change">
                {{ fromfather }}
                子组件的数据
            </h1>
        </template>
        <template id="grandSon">
            <h1>孙子组件的数据</h1>
        </template>
        <!--1.子组件不能访问父组件的数据
        2. 解决办法: ①在引用子组件时, 通过属性绑定 v-bind方法, 把需要传递给子组件的数据以绑定的形式传过来
                      ② 在子组件配置项里添加 props: ['传递过来的数据']-->
        <script src="lib/vue-2.4.0.js"></script>
        <script>
            let vm = new Vue({
                el:"#app",
                data:{
                    father:'啊~~这是父组件的数据'
                },
                methods:{
                },
                //局部子组件
                components:{
                    // 组件名: {配置项}
                    "myComponent":{
                        template:'#box1',
                        data(){
                            return {
                                msg:"哈哈"
                            }
                        },
                        //在子组件配置项里添加 props: ['传递过来的数据']
                        //注意: 组件中所有的props中的数据, 都是通过父组件传递给子组件的, props中的数据是只读, 无法修改
                        props:['fromfather'],
                        methods:{
                            change(){
                               // this.fromfather = "被修改了"
                            }
                        },
                        //局部子子组件
                        components:{
                            'grandSon':{
                                template:'#grandSon'
                            }
                        }
                    }
                }
            })
        </script>
        </body>
        蓝蓝设计www.quanminreliao.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

        标签: VUE 全局变量 局部变量


        Powered by emlog 京ICP备12006971号-1 sitemap
        杀平特一肖-杀平特一肖不出-杀平特一肖公式
        m.2121buy.com m.304496092.com m.52chendumeishi.com m.52qqcz.com m.7568872.com m.99vv340.com m.agag70.com m.anpinglansai.com m.asshishicai.com m.baoshidamall.com m.bjoso.com m.bocdima.com m.bxxyzl.com m.cdjutaiedu.com m.cl1899.com m.cpexe.com m.cztxhg666.com m.diejuji66.com m.dmgjzx.com m.dphhw.com m.elitecld.com m.esexfree.com m.ezupdos.com m.fanfan-zone.com m.fengwoyidong.com m.getfault.com m.hcxiangjiao.com m.hf556.com m.hongfushangmao.com m.huibobet.com m.hyhatch.com m.hzybqh.com m.ibroyeur.com m.jiangyaqing.com m.ksuca.com m.liangdianjiaoyu.com m.lovegwu.com m.mayihuobang.com m.miaoxiangshike.com m.miiqin.com m.modelslimming.com m.msjyhs.com m.mysoushou.com m.myteenssex.com m.nanahey.com m.o48d.com m.o8jw.com m.pzsyr.com m.qgbrs.com m.rbrbt.com m.rfynq.com m.rqwdt.com m.rxbled.com m.rxdmn.com m.sct-ys.com m.sdyxtjy.com m.spark-eo.com m.spyware-pcrisk.com m.sxlrr.com m.syhrzg.com m.tadeyijia.com m.tengjingkj.com m.tiantianoa.com m.tykjr.com m.uxf7.com m.weakbug.com m.wgppd.com m.xajyz.net m.xiqidai.com m.yczszw.com m.youxiaad.com m.yue8888.com m.yzkths.com m.zqbf137.com m.zqssc05.com m.zsbxp.com m.zspxk.com m.zsxscj.com www.88366666.com www.942dn.com www.lottimes.com www.opc32.com www.ss-tm.com www.tiaopigui.com www.xmyinhe.com www.mfkof.com www.upsbbs.com www.gzesmb.com www.niqzone.com www.m-instyLe.cn m.1yguz.com m.2huoo.net m.51bpbpz.net m.53zy.net m.5ecn.net m.91youhui.net m.adospados.com m.afty.net m.afzn.net m.baobeiqianbao.net m.bestmeet.net m.bjbna.net m.bjkjwj.net m.cg365sc.net m.cnyntq.net m.congdash.net m.coybcs.net m.csoug.net m.dijier.net m.djhsc.net m.donghuiwan.com m.dsi-ag.com m.dzshgwx.net m.eamoy.net m.ecopote.com m.ehuiche.net m.eiconf.net m.eimeeting.net m.ez-ns.com m.freshkpop.net m.gaoxiaoduanzi.net m.glxiduobao.com m.guiqin.net m.guogai.net m.gydushu.com m.haokan5.net m.hltjq.net m.hshardcover.com m.huangjinnc.com m.huangzhe0910.com m.i517.net m.icauto.net m.ijiawei.net m.iyaorao.net m.iyuwei.net m.izxs.net m.jlskjk.com m.jnrstc.com m.jnxins.com m.joinchampions.com m.jsywym.net m.juezhe.net m.julisports.net m.kardon023.com m.keiee.net m.kkdb168.com m.ksb120.net m.kzbiz.net m.laziw.com m.lcoder.net m.lefuxx.com m.live-cam4sex.com m.louboutinb.com m.ly568.net m.matengfei.net m.mblabc.net m.mcmcmc.net m.meitwo.net m.miyueing.com m.mjrgb.com m.mmd47.com m.mms39.com m.nanjingwx.com m.naodongxueyuan.com m.ncwywk.com m.neimengguly.com m.newcityvr.com m.newhnwg.com m.ngzrb.com m.nianlai.net m.niuhuotong.com m.nj142.com m.nmgmmw.com m.nnwsn.com m.nongtaifruit.com m.npymh.com m.nqbcs.com m.nwezq.com m.oe2pq.com m.p950r.com m.panoad.net m.papasj.com m.pcfordlm.com m.pinkypunk.com m.pojox.net m.popo365.net m.portalfan.net m.qhy360.com m.qinghuayingyu.com m.qingjiankeji.com m.qirongzhongchou.net m.qiutianzichan.com m.quanminkuaiduobao.com m.quansiweizhiyuan.com m.readc.net m.rpocr.net m.sdell.net m.sdhzz.net m.senrijin.com m.shangzewangluo.com m.shanmeme.com m.shanrenzixunjituan.com m.shengwh.com m.shengzhiqi.net m.shfongwei.com m.shiguangji888.com m.shiyihui.net m.shop666.net m.shoppniac.com m.shyarun.com m.softsweet.net m.sxsgky.net m.szifresh.com m.tahuyu.net m.taiyear.net m.taowogo.com m.taxionghaizi.com m.thirftyfun.com m.tiqianme.com m.tjcbmy.com m.tjynet.com m.tyc1413191.com m.v-liandong.com m.v-quick.net m.vrwar.net m.walyy.net m.we30.net m.weixd.net m.wenancn.net m.wetrussian.com m.wuaimei.net m.wuyutong.net m.wzj0759.com m.xianyoujie.com m.xiaolangli.com m.xiaolieai.com m.xiawangshipin.com m.xiyuesh.com m.xuanf.net m.xyflower.net m.xzcit.net m.yifoobao.net m.yjhzttjq.com m.yjk1997.com m.ylmov.net m.yongyijinfu.com m.yueguoji.net m.zhansen8.com m.zhaokuandai.com m.zhc-nj.com m.zhongruiedu.com m.zivdoll.com m.zjjyjn.com m.zmkaolu.com m.zmtbs.com m.zmysjh.com m.zzfreemaker.com