Vue 全局變量--下载手机qq2011正式版免费下载,局部變量

2019-4-18 釋然 前端及開發文章及欣賞

如果您想訂閱本博客內容_||6 67c ai,每天自動發到您的郵箱中|-11086平台黑, 請點這裏

全局組件和局部組件
* 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.jwrumpff.com )是一家專注而深入的界麵設計公司-|霸王evd,為期望卓越的國內外企業提供卓越的UI界麵設計__-234彩票网100、BS界麵設計 __-球衣堂、 cs界麵設計 ||-塔罗牌大师tlp6868668、 ipad界麵設計 _111彩票骗局、 包裝設計 _22彩票官网、 圖標定製 |_银泉酒家、 用戶體驗 --葫芦岛一高中家长汇、交互設計|_靖远二手房、 網站建設 _-|234彩票app苹果、平麵設計服務|_-赢彩彩票有人玩吗。

標簽: VUE 全局變量 局部變量

分享到||野孩子美国电影高清: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap