97久久的操,精精品人妻一区二区,亚洲医院54区在线

1.定義全局組件

1.1 方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37-Vue組件-自定義全局組件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
Vue兩大核心: 1.數(shù)據(jù)驅(qū)動界面改變 2.組件化
1.什么是組件? 什么是組件化?
1.1在前端開發(fā)中組件就是把一個很大的界面拆分為多個小的界面, 每一個小的界面就是一個組件
1.2將大界面拆分成小界面就是組件化

2.組件化的好處
2.1可以簡化Vue實例的代碼
2.2可以提高復(fù)用性

3.Vue中如何創(chuàng)建組件?
3.1創(chuàng)建組件構(gòu)造器
3.2注冊已經(jīng)創(chuàng)建好的組件
3.3使用注冊好的組件
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <!--// 3.3使用注冊好的組件-->
    <abc></abc>
</div>
<script>
    // 3.1創(chuàng)建組件構(gòu)造器
    let Profile = Vue.extend({
        // 注意點: 在創(chuàng)建組件指定組件的模板的時候, 模板只能有一個根元素
        template: `
           <div>
                <img src="images/fm.jpg"/>
                <p>我是描述信息</p>
            </div>
        `
    });
    // 3.2注冊已經(jīng)創(chuàng)建好的組件
    // 第一個參數(shù): 指定注冊的組件的名稱
    // 第二個參數(shù): 傳入已經(jīng)創(chuàng)建好的組件構(gòu)造器
    Vue.component("abc", Profile );

    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        }
    });
</script>
 
</body>
</html>

1.2 方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-Vue組件-自定義全局組件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.創(chuàng)建組件的其它方式
1.1在注冊組件的時候, 除了傳入一個組件構(gòu)造器以外, 還可以直接傳入一個對象
1.2在編寫組件模板的時候, 除了可以在字符串模板中編寫以外, 還可以像過去的art-template一樣在script中編寫
1.3在編寫組件模板的時候, 除了可以在script中編寫以外, vue還專門提供了一個編寫模板的標(biāo)簽template(推薦)
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <!--// 3.3使用注冊好的組件-->
    <abc></abc>
</div>
<!--
<script id="info" type="text/html">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</script>
-->
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</template>
<script>
    Vue.component("abc", {
        // 注意點: 在創(chuàng)建組件指定組件的模板的時候, 模板只能有一個根元素
        template: "#info"
    });

    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        }
    });
</script>
</body>
</html>

2.定義局部組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-Vue組件-自定義局部組件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.自定義全局組件特點
在任何一個Vue實例控制的區(qū)域中都可以使用

2.自定義局部組件特點
只能在自定義的那個Vue實例控制的區(qū)域中可以使用

3.如何自定義一個局部組件
在vue實例中新增components: {}
在{}中通過key/vue形式注冊組件
components:{
   abc: {}
}
-->
<!--這里就是MVVM中的View-->
<div id="app1">
    <abc></abc>
</div>
<div id="app2">
    <abc></abc>
</div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</template>
<script>
    // 這里就是MVVM中的View Model
    let vue1 = new Vue({
        el: '#app1',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        }
    });
    // 這里就是MVVM中的View Model
    let vue2 = new Vue({
        el: '#app2',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        },
        // 專門用于定義局部組件的
        components: {
            "abc": {
                // 注意點: 在創(chuàng)建組件指定組件的模板的時候, 模板只能有一個根元素
                template: "#info"
            }
        }
    });
</script>
</body>
</html>

3.組件中的data和method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-Vue組件-組件中的data和methods</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.自定義組件中的data和methods
Vue實例控制的區(qū)域相當(dāng)于一個大的組件, 在大組件中我們可以使用data和methods
而我們自定義的組件也是一個組件, 所以在自定義的組件中也能使用data和methods

2.自定義組件中data注意點
在自定義組件中不能像在vue實例中一樣直接使用data
而是必須通過返回函數(shù)的方式來使用data

3.自定義組件中的datadata為什么是一個函數(shù)
因為自定義組件可以復(fù)用, 為了保證復(fù)用時每個組件的數(shù)據(jù)都是獨立的, 所以必須是一個函數(shù)
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <!--
    由于我們是在Vue實例控制的區(qū)域中使用的函數(shù)
    所以系統(tǒng)回去Vue實例中查找有沒有對應(yīng)的方法
    所以我們需要在Vue實例中實現(xiàn)對應(yīng)的方法
    -->
    <button @click="appFn">我是按鈕</button>
    <!--
    由于我們是在Vue實例控制的區(qū)域中使用了數(shù)據(jù)
    所以系統(tǒng)回去Vue實例中查找有沒有對應(yīng)的數(shù)據(jù)
    所以我們需要在Vue實例中添加對應(yīng)的數(shù)據(jù)
    -->
    <p>{{appMsg}}</p>
    <abc></abc>
</div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <!--
        由于我們是在自定義組件中使用了函數(shù)
        所以系統(tǒng)會去自定義的組件中查找有沒有對應(yīng)的方法
        所以我們需要在自定義的組件中實現(xiàn)對應(yīng)的方法
        -->
        <button @click="abcFn">我是按鈕</button>
        <p>{{abcMsg}}</p>
    </div>
</template>
<script>
    // 自定義全局組件
    Vue.component("abc", {
        // 注意點: 在創(chuàng)建組件指定組件的模板的時候, 模板只能有一個根元素
        template: "#info",
        methods: {
            abcFn(){
                alert("abcFn");
            }
        },
       
        // 注意點: 雖然在自定義的組件中也可以使用data, 但是在使用的時候, 使用的方式和Vue實例中不太一樣
        //         在自定義組件中使用data必須賦值一個函數(shù), 然后通過函數(shù)的返回值來定義有哪些數(shù)據(jù)
        /*
        組件中的data如果不是通過函數(shù)返回的, 那么多個組件就會公用一份數(shù)據(jù), 就會導(dǎo)致數(shù)據(jù)混亂
        如果組件中的data是通過函數(shù)返回的, 那么每創(chuàng)建一個新的組件, 都會調(diào)用一次這個方法
        將這個方法返回的數(shù)據(jù)和當(dāng)前創(chuàng)建的組件綁定在一起, 這樣就有效的避免了數(shù)據(jù)混亂
        * */
        data: function () {
            return {
                abcMsg: "學(xué)院"
            }
        }
    });
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
            appMsg:"知播漁"
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
            appFn(){
                alert("appFn");
            }
        },
        // 專門用于定義計算屬性的
        computed: {
        }
    });
</script>
</body>
</html>

4.組件切換

4.1 通過v-if切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>42-Vue組件-組件切換</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.組件切換
對于普通的元素我們可以通過v-if來實現(xiàn)切換
對于組件我們也可以通過v-if來實現(xiàn)切換
因為組件的本質(zhì)就是一個自定義元素
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <button @click="toggle">切換</button>
    <!--<p v-if="isShow">我是首頁</p>
    <img v-else src="images/fm.jpg" alt="">-->
    <home v-if="isShow"></home>
    <photo v-else></photo>
</div>
<template id="home">
    <div>
        <p>我是首頁</p>
    </div>
</template>
<template id="photo">
    <div>
        <img src="images/fm.jpg" alt="">
    </div>
</template>
<script>
    // 自定義全局組件
    Vue.component("home", {
        template: "#home",
    });
    Vue.component("photo", {
        template: "#photo",
    });
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
            isShow: true
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        },
        // 專門用于定義計算屬性的
        computed: {
        }
    });
</script>
</body>
</html>

4.2 通過component切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>43-Vue組件-動態(tài)組件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是動態(tài)組件?
通過v-if/v-else-if/v-else確實能夠切換組件
但是在Vue中切換組件還有一種更專業(yè)的方式
<component v-bind:is="需要顯示組件名稱"></component>
component我們稱之為動態(tài)組件, 也就是你讓我顯示誰我就顯示誰

2.為什么可以通過v-if切換還要有component
因為component可以配合keep-alive來保存被隱藏組件隱藏之前的狀態(tài)
比如一個組件中定義了一個單選框,選中后切換組件后依然處于選中狀態(tài)
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <button @click="toggle">切換</button>
    <keep-alive>
        <component :is="name"></component>
    </keep-alive>

</div>
<template id="home">
    <div>
        <p>我是首頁</p>
        <input type="checkbox">
    </div>
</template>
<template id="photo">
    <div>
        <img src="images/fm.jpg" alt="">
    </div>
</template>
<script>
    // 自定義全局組件
    Vue.component("home", {
        template: "#home",
    });
    Vue.component("photo", {
        template: "#photo",
    });
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
            //isShow: true,
            name: "home"
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
            toggle(){
                //this.isShow = !this.isShow;
                this.name = this.name === "home" ? "photo" : "home";
            }
        },
        // 專門用于定義計算屬性的
        computed: {
        }
    });
</script>
</body>
</html>

4.3 切換動畫
也是通過transition和transition-group

5.父子組件

5.1 基本概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>46-Vue組件-父子組件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是父子組件?
在一個組件中又定義了其它組件就是父子組件
其實局部組件就是最簡單的父子組件, 因為我們說過可以把Vue實例看做是一個大組件
我們在Vue實例中定義了局部組件, 就相當(dāng)于在大組件里面定義了小組件, 所以局部組件就是最簡單的父子組件

2.如何定義其它的父子組件
前面我們說過, 自定義組件中可以使用data, 可以使用methods. 當(dāng)然自定義組件中也可以使用components
所以我們也可以在自定義組件中再定義其它組件
-->
<!--這里就是MVVM中的View-->
<div id="app">
<!--    <home></home>-->
    <father></father>
<!--    <son></son>-->
</div>
<template id="father">
    <div>
        <p>我是父組件</p>
        <son></son>
    </div>
</template>
<template id="son">
    <div>
        <p>我是子組件</p>
    </div>
</template>
<script>
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        },
        // 專門用于定義局部組件的
        components: {
            // "home": {
            //     template: "#home"
            // }
            "father": {
                template: "#father",
                components: {
                    "son": {
                        template: "#son"
                    }
                }
            }
        }
    });
</script>
</body>
</html>

5.2 父子組件數(shù)據(jù)傳遞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-Vue組件-父子組件數(shù)據(jù)傳遞</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.父子組件數(shù)據(jù)傳遞?
在Vue中子組件是不能訪問父組件的數(shù)據(jù)的,
如果子組件想要訪問父組件的數(shù)據(jù), 必須通過父組件傳遞

2.如何傳遞數(shù)據(jù)
2.1在父組件中通過v-bind傳遞數(shù)據(jù)
   傳遞格式 v-bind:自定義接收名稱 = "要傳遞數(shù)據(jù)"
2.2在子組件中通過props接收數(shù)據(jù)
   接收格式 props: ["自定義接收名稱"]
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <!--注意點: 組件是可以使用自己的數(shù)據(jù)的-->
        <p>{{name}}</p>
        <p>{{age}}</p>
        <!--這里將父組件的name通過parentname傳遞給了子組件-->
        <son :parentname="name" :abc="age"></son>
    </div>
</template>
<template id="son">
    <div>
        <!--這里通過parentname使用了父組件傳遞過來的數(shù)據(jù)-->
        <p>{{parentname}}</p>
        <p>{{abc}}</p>
    </div>
</template>
<script>
    // 父組件
    Vue.component("father", {
        template: "#father",
        data: function(){
          return {
              name: "lnj",
              age: 33
          }
        },
        // 子組件
        components: {
            "son": {
                template: "#son",
                // 這里通過parentname接收了父組件傳遞過來的數(shù)據(jù)
                props: ["parentname", "abc"]
            }
        }
    });
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        },
        // 專門用于定義局部組件的
        components: {
        }
    });
</script>
</body>
</html>

5.3 父子組件方法傳遞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-Vue組件-父子組件方法傳遞</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.父子組件方法傳遞?
在Vue中子組件是不能訪問父組件的方法的,
如果子組件想要訪問父組件的方法, 必須通過父組件傳遞

2.如何傳遞方法
2.1在父組件中通過v-on傳遞方法
   傳遞格式 v-on:自定義接收名稱 = "要傳遞方法"
2.2在子組件中自定義一個方法
2.3在自定義方法中通過 this.$emit('自定義接收名稱');觸發(fā)傳遞過來的方法
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <button @click="say">我是按鈕</button>
        <!--這里通過parentsay將父組件的say方法傳遞給了子組件-->
        <son @parentsay="say"></son>
    </div>
</template>
<template id="son">
    <div>
        <button @click="sonFn">我是按鈕</button>
    </div>
</template>
<script>
    // 父組件
    Vue.component("father", {
        template: "#father",
        methods: {
            say(){
                alert("www.it666.com");
            }
        },
        // 子組件
        components: {
            "son": {
                template: "#son",
                /*
                注意點: 和傳遞數(shù)據(jù)不同, 如果傳遞的是方法, 那么在子組件中不需要接收
                        如果傳遞的是方法, 那么需要在子組件中自定義一個方法
                        如果傳遞的是方法, 那么在子組件中直接使用自定義的方法即可
                        如果傳遞的是方法, 那么需要在子組件自定義的方法中通過
                        this.$emit("自定義接收的名稱")的方法來觸發(fā)父組件傳遞過來的方法
                * */
                // props: ["parentsay"]
                methods: {
                    sonFn(){
                        this.$emit("parentsay");
                    }
                }
            }
        }
    });
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        },
        // 專門用于定義局部組件的
        components: {
        }
    });
</script>
</body>
</html>

5.4 組件命名注意點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50-Vue組件-組件中的命名注意點</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.組件中的命名注意點
1.1注冊組件的時候使用了"駝峰命名", 那么在使用時需要轉(zhuǎn)換成"短橫線分隔命名"
例如: 注冊時: myFather  ->  使用時: my-father
1.2在傳遞參數(shù)的時候如果想使用"駝峰名稱", 那么就必須寫"短橫線分隔命名"
例如: 傳遞時: parent-name="name" ->  接收時: props: ["parentName"]
1.3在傳遞方法的時候不能使用"駝峰命名", 只能用"短橫線分隔命名"
@parent-say="say"  -> this.$emit("parent-say");
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <my-father></my-father>
</div>
<template id="father">
    <div>
        <p>{{name}}</p>
        <button @click="say">我是按鈕</button>
        <son :parent-name="name" @parent-say="say"></son>
    </div>
</template>
<template id="son">
    <div>
        <p>{{parentName}}</p>
        <button @click="sonFn">我是按鈕</button>
    </div>
</template>
<script>
    // 父組件
    Vue.component("myFather", {
        template: "#father",
        data: function(){
            return {
                name: "lnj"
            }
        },
        methods: {
            say(){
                console.log("www.it666.com");
            }
        },
        // 子組件
        components: {
            "son": {
                template: "#son",
                props: ["parentName"],
                methods: {
                    sonFn(){
                        this.$emit("parent-say");
                    }
                }
            }
        }
    });
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        },
        // 專門用于定義局部組件的
        components: {
        }
    });
</script>
</body>
</html>

5.5 組件多級傳遞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-Vue組件-數(shù)據(jù)和方法的多級傳遞</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.數(shù)據(jù)和方法的多級傳遞
在Vue中如果兒子想使用爺爺?shù)臄?shù)據(jù), 必須一層一層往下傳遞
在Vue中如果兒子想使用爺爺?shù)姆椒? 必須一層一層往下傳遞
-->
<!--這里就是MVVM中的View-->
<div id="app">
    <grandfather></grandfather>
</div>
<template id="grandfather">
    <div>
        <p>{{name}}</p>
        <button @click="say">我是按鈕</button>
        <father :gfname="name" @gfsay="say"></father>
    </div>
</template>
<template id="father">
    <div>
        <p>{{gfname}}</p>
        <button @click="fatherFn">我是按鈕</button>
        <son :fname="gfname" @fsay="fatherFn"></son>
    </div>
</template>
<template id="son">
    <div>
        <p>{{fname}}</p>
        <button @click="sonFn">我是按鈕</button>
    </div>
</template>
<script>
    // 爺爺組件
    Vue.component("grandfather", {
        template: "#grandfather",
        data: function(){
            return {
                name: "lnj"
            }
        },
        methods: {
            say(){
                console.log("我是爺爺?shù)姆椒?);
            }
        },
        // 爸爸組件
        components: {
            "father": {
                template: "#father",
                props: ["gfname"],
                methods:{
                    fatherFn(){
                        this.$emit("gfsay");
                    }
                },
                // 兒子組件
                components: {
                    "son": {
                        template: "#son",
                        props: ["fname"],
                        methods: {
                            sonFn(){
                                this.$emit("fsay");
                            }
                        },
                    }
                }
            }
        }
    });
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
        },
        // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù)
        methods: {
        },
        // 專門用于定義計算屬性的
        computed: {
        },
        // 專門用于定義局部組件的
        components: {
        }
    });
</script>
</body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue總結(jié)3-組件相關(guān)

Vue總結(jié)3-組件相關(guān)

1.定義全局組件

2.定義局部組件

3.組件中的data和method

4.組件切換

5.父子組件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue總結(jié)3-組件相關(guān)

1.定義全局組件

2.定義局部組件

3.組件中的data和method

4.組件切換

5.父子組件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av