追求卓越一諾千金

藍藍設計__-3M彩票官网,2011年成立-__345彩票官网,主創清華團隊||苑阳,專注軟件和互聯網ui設計開發_|木层网。擅長企業信息化管理|-重庆歪歌横行、監控__云鼎彩票、大數據軟件UIUE谘詢和設計開發服務|_-2019世界彩票大奖排行。立足UI|-偷天奇谋,好好學習_英优儿,天天進步__|电话订票几点开始放票!


Vue 全局變量-华嘉元,局部變量

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


如果您想訂閱本博客內容-_360彩票缩水软件手机版,每天自動發到您的郵箱中_|wifi密码破解软件, 請點這裏

全局組件和局部組件
* 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 )是一家專注而深入的界麵設計公司_团结柱,為期望卓越的國內外企業提供卓越的UI界麵設計_-诺基亚e900、BS界麵設計 _|365彩票手机app下载、 cs界麵設計 |何小萌萌萌果照、 ipad界麵設計 ||班超之志、 包裝設計 -_1995彩票反水025漏洞、 圖標定製 -横扫天下升阶数据、 用戶體驗 -|_山东单独二胎什么时候放开、交互設計|-_觅血者、 網站建設 -|-铁纹、平麵設計服務||_众乐彩票app下载。

標簽: VUE 全局變量 局部變量 « B端產品 — 淺談Atlas設計思路 | 幹貨來襲_-链家司歌歌词!淘寶設計師談動效的高效設計與交付»


訂閱Rss