day69:Vue:元件化開發&Vue-Router&Vue-client

Poke發表於2020-10-18
Vue元件化client

目錄

元件化開發

　　1.什麼是元件？

　　2.區域性元件

　　3.全域性元件

　　4.父元件向子元件傳值

　　5.子元件往父元件傳值

　　6.平行元件傳值

Vue-Router的使用

Vue自動化工具:Vue-Client

元件化開發

1.什麼是元件？

1.元件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重複的，而且很多不同的網站之間，也存在同樣的功能。

2.而在網頁中實現一個功能，需要使用html定義功能的內容結構，使用css宣告功能的外觀樣式，還要使用js來定義功能的特效，因此就產生了把一個功能相關的[HTML、css和javascript]程式碼封裝在一起組成一個整體的程式碼塊封裝模式，我們稱之為“元件”。

3.所以，元件就是一個html網頁中的功能，一般就是一個標籤，標籤中有自己的html內容結構，css樣式和js特效。

4.這樣，前端人員就可以在開發時，只需要書寫一次程式碼，隨處引入即可使用。

5.我們在進行vue開發的時候，還記得我們自己建立的vm物件嗎，這個vm物件我們稱為一個大元件，根元件(頁面上叫Root)，在一個網頁的開發中，根據網頁上的功能區域我們又可以細分成其他元件，或稱為子元件

 

2.區域性元件

區域性元件三步走:聲子、掛子、用子,即宣告子元件、掛載子元件、使用子元件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <div class="header">
            這是頭部{{ appmsg }}
        </div>
        <Sonapp/> <!-- 3.使用子元件 -->
    </div>

</body>
<script src="vue.js"></script>
<script>
    let Sonapp = {
        data(){ // 注意:元件中必須寫成函式形式
            return {
                'sonappmsg':'hello Sonapp!'
            }
        },
        template:`
         <div class="content">
                內容部分{{sonappmsg}}
            </div>
        `
    };

    let vm = new Vue({
        el:'#app',
        data(){
            return{
                'appmsg':'hello app!',
            }
        },
        components:{
            Sonapp, // 2.掛載子元件
        }

    })
</script>
</html>

3.全域性元件

區域性元件使用時需要掛載，全域性元件使用時不需要掛載。

區域性元件就在某個區域性使用的時候，全域性元件是大家公用的，或者說每個頁面都有這麼一個功能的時候，在哪裡可能都會用到的時候。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <Addnum></Addnum> <!-- 使用全域性元件 -->
    </div>

</body>
<script src="vue.js"></script>
<script>

    Vue.component("Addnum",{
        data(){
            return{
                num:1
            }
        },
        template:`
        <div><input type="text" v-model="num"><button @click="num+=1">點選</button></div>
        `
    })

    let vm =new Vue({
        el:'#app',
        data:{
            // 全域性元件不需要掛載
        }
    })
</script>
</html>

 4.父元件向子元件傳值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="show">
        <h1>hello !</h1>
        <Father></Father>
    </div>

</body>
<script src="vue.js"></script>
<script>
   let Son = {
       data(){
           return{
               sonmsg:'這是子元件資訊'
           }
       },
       template:`
              <div class="Son">
                <h1>{{sonmsg}}</h1>
                 <h2>子元件Template</h2>
                 <h2>{{ xx }}</h2>
        </div>
       `,
       props:['xx'] // 1.在子元件中使用prop屬性宣告
   };
   let Father ={
       data(){
           return{
               msg:'這是father元件',
               num:100,
           }
       },
       template:`

       <div class="nav">

                <h1 style="color:blue;">{{Msg}}---{{num}}</h1>
                <!--
                <Naver xx="xiaobei"></Naver> 靜態傳值
                <Naver :xx="num"></Naver>  動態傳值
                -->

                <Son :xx="num"></Son>

        </div>

       `,
       components:{
           Son,
       }
   };
   let vm = new Vue({
       el:'#show',
       data(){
           return{

           }
       },
       components: {
           Father,
       }
   })
</script>
</html>

父元件向子元件傳值，其實大致可以分為兩步：

1.首先我們在子元件需要定義prop屬性

宣告瞭prop屬性有xx之後，在子元件就可以使用xx了

let Son = {
    data(){
        return{
            sonmsg:'這是子元件資訊'
        }
    },
    template:`
<div class="Son">
<h1>{{sonMsg}}</h1>
<h2>子元件Template</h2>
<h2>{{ xx }}</h2>
</div>
`,
    props:['xx'] // 1.在子元件中使用prop屬性宣告

2.父元件要定義自定義的屬性

let father ={
       data(){
           return{
               msg:'這是father元件',
               num:100,
           }
       },
       template:`
       <div class="nav">

                <h1 style="color:blue;">{{Msg}}---{{num}}</h1>
                <Son xx="xiaobei"></Son> // 靜態傳值
                <Son :xx="num"></Son>  // 動態傳值

        </div>
       `
   }

5.子元件往父元件傳值

子元件往父元件傳值，分三步。

第一步：既然是子元件往父元件傳值，肯定是在父元件想使用子元件的值

　　      所以第一步就是在父元件使用子元件的地方加上自定義事件 

第二步：在父元件中定義自定義事件對應的方法。方法需要寫引數，用來接收子元件傳遞過來的引數

第三步：子元件中呼叫方法來實現傳值動作​emit(父元件自定義事件名稱,資料)

step1.就是在父元件使用子元件的地方加上自定義事件 

 let App = {

     ......
        //1. 父元件使用子元件的地方加上自定事件
        // <Naver @fatherHandler="fuckSon"></Naver>
        template:
         `
          <div class="nav">

                <h1 style="color:blue;">{{Msg}}---子元件的num為:{{xx}}</h1>

                <Naver @fatherHandler="fuckSon"></Naver>
        </div>

        `,
      ......

step2.在父元件中定義自定義事件對應的方法

 let App = {
       ......
            // 2  在父元件中定義自定義事件對應的方法,方法需要寫引數,用來接收子元件傳遞過來的資料
            fuckSon(val){
                this.xx = val;
            }
      ......
        }


    };

step3.子元件中呼叫方法來實現傳值動作​emit

 let Naver = {
      ......

        methods:{
            zouni(){
                //
                console.log(this);
                // 3 子元件中呼叫$emit方法,來實現傳值動作 $emit(父元件自定義事件名稱,資料)
                this.$emit('fatherHandler',this.sonNum);
      ......
            }
        }

    };

所有程式碼如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>你好</h1>
    <App></App>
</div>



</body>
<script src="vue.js"></script>
<script>
    // 1 宣告子元件  聲子
    let Naver = {
        data(){
            return {
                navMsg:'這是頂部導航欄',
                sonNum:80,
            }
        },

        template:
         `
          <div class="Naver">
                <h1>{{navMsg}}</h1>
                <button @click="zouni">走你</button>

        </div>

        `,
        methods:{
            zouni(){
                //
                console.log(this);
                // 3 子元件中呼叫$emit方法,來實現傳值動作 $emit(父元件自定義事件名稱,資料)
                this.$emit('fatherHandler',this.sonNum);

            }
        }

    };

    let App = {
        data(){
            return {
                Msg:'這是App元件',
                num:100,
                xx:'',
            }
        },
        //1. 父元件使用子元件的地方加上自定事件
        // <Naver @fatherHandler="fuckSon"></Naver>
        template:
         `
          <div class="nav">

                <h1 style="color:blue;">{{Msg}}---子元件的num為:{{xx}}</h1>

                <Naver @fatherHandler="fuckSon"></Naver>
        </div>

        `,
        components:{
            Naver,
        },
        methods:{
            // 2  在父元件中定義自定義事件對應的方法,方法需要寫引數,用來接收子元件傳遞過來的資料
            fuckSon(val){
                this.xx = val;
            }

        }


    };


    let  vm = new Vue({
        el:'#app',
        data(){
            return {

            }
        },
        // 2 掛載子元件  掛子
        components:{
            // 掛載元件的簡寫形式
            App,
            // Naver,

        }


    })



</script>
</html>

6.平行元件傳值

 

平行元件傳值，需要在最外層宣告一個公交車bus，通過上車和下車的動作來進行平行元件的傳值功能。

平行元件傳值，大致分為三步:

第一步：宣告一個bus的Vue物件

第二步：假設是T1元件往T2元件傳值，那麼在T1的method中需要執行一個bus.$emit('name',this.t1num)

第三步:在T2元件中需要執行一個bus.$on('name',(val))=>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>你好</h1>
    <App></App>
    <div class="t1"></div>
</div>



</body>
<script src="vue.js"></script>
<script>
    // 1.宣告公交車物件
    let bus = new Vue();

    Vue.component('T1',{
        data(){
            return {
                t1Msg:'我是t1元件',
                t1Num:120,
            }
        },
        template:`
            <div class="t1">
                <h3>{{t1Msg}}</h3>
                <button @click="zouni">走你</button>
            </div>
        `,
        methods:{
            zouni(){
                // 2.通過公交車將t1的值傳送出去
              bus.$emit('kkk',this.t1Num);
            }
        }
    });
    Vue.component('T2',{
        data(){
            return {
                t2Msg:'我是t2元件',
                t2Num:130,
                t1msg:'',
            }
        },
        template:`
            <div class="t1">
                <h3>{{t2Msg}}</h3>
                <h3>t1元件傳遞過來的資料:{{t1msg}}</h3>
            </div>
        `,
        created(){
            // 3.通過公交車將t1傳送的值接收過來
            bus.$on('kkk', (val) => {
                console.log(this);
                this.t1msg = val;
            });

        },

    });





    let App = {
        data(){
            return {
                Msg:'這是App元件',
                num:100,
                xx:'',
            }
        },
        template:
         `
          <div class="nav">

                <h1 style="color:blue;">{{Msg}}---子元件的num為:{{xx}}</h1>
                <T1></T1>
                <T2></T2>

        </div>

        `,

        methods:{
            }

        }


    };


    let  vm = new Vue({
        el:'#app',
        data(){
            return {
            }
        },

        components:{
            App,
        }


    });
    console.log(vm);



</script>
</html>

Vue-Router的使用

1.Vue-Router的介紹

vue就是我們前面學習的vue基礎，vue + vue-router 主要用來做SPA(Single Page Application)，單頁面應用

為什麼要使用單頁面應用呢？因為傳統的路由跳轉，如果後端資源過多，會導致頁面出現'白屏現象'，所以我們希望讓前端來做路由，

在某個生命週期的鉤子函式中，傳送ajax來請求資料，進行資料驅動，之前比如我們用django的MTV模式，我們是將後端的資料全部渲染給了模板，然後模板再傳送給前端進行瀏覽器頁面的渲染，一下將所有的資料都給了頁面，

而我們現在使用vue，我可以在元件的鉤子函式中傳送對應的ajax請求去獲取對應的資料，而不是一下子就把資料都放到頁面上了，單頁面應用給我們提供了很多的便利。

 

 

 

這樣的網站我們通過django是可以來完成頁面的渲染的，模板渲染嘛，但是這個論壇的資料資源有很多，我們通過django的MTV模式是一下子就將資料全部放到頁面裡面了，那麼頁面通過瀏覽器渲染的時候，瀏覽器可能沒有那麼快渲染出來，會出現幾秒鐘的白屏現象，也就是說幾秒鐘之後使用者才看到頁面的內容，這樣體驗起來就不好，為了使用者體驗好，就用到了我們說的單頁面應用，django模板渲染做大型應用的時候，也就是頁面很複雜，資料量很大的頁面的時候，是不太合適的，當然如果你夠nb，你也可以優化，但是一般它比較適合一些頁面資料比較小的應用。

那麼解釋一下什麼是單頁應用，看下圖：(react、angular也都是做單頁面應用，很多大型的網站像網易雲音樂，豆瓣等都是react寫的單頁面應用)

 

 

2.Vue-Router的簡單操作

一共分四步

1.定義 (路由) 元件。

2.定義路由

3. 建立 router 例項，然後傳 `routes` 配置

4.建立和掛載根例項。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>你好</h1>
    <App></App>

</div>



</body>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>

    // 1.定義兩個路由元件
    let Home = {
        data(){
            return {
                msg:'這是home頁面'
            }
        },
        template:`
        <div class="home">
            <h1>{{msg}}</h1>

        </div>
        `
    };

     let Course = {
        data(){
            return {
                msg:'這是Course頁面'
            }
        },
        template:`
        <div class="course">
            <h1>{{msg}}</h1>

        </div>
        `
    };


    let App = {
        data(){
            return {
                Msg:'這是App元件',
                num:100,
                xx:'',
            }
        },
        //1. 父元件使用子元件的地方加上自定事件
        // <Naver @fatherHandler="fuckSon"></Naver>
        template:
         `
          <div class="nav">

                <router-link to="/home">首頁</router-link>
                <router-link to="/course">課程頁</router-link>

                <router-view></router-view>

        </div>

        `,

        methods:{
            // 2  在父元件中定義自定義事件對應的方法,方法需要寫引數,用來接收子元件傳遞過來的資料
            fuckSon(val){
                this.xx = val;
            }

        }


    };
    // 2.定義路由
    const routes = [
        {path:'/home', component:Home},
        {path:'/course', component:Course},
    ];

    // 3.建 router 例項，然後傳 `routes` 配置
    let router = new VueRouter({
        routes,
    })


    let  vm = new Vue({
        el:'#app',
        router, // 4.掛載router
        data(){
            return {

            }
        },

        components:{

            App,

        }


    });
    console.log(vm);



</script>
</html>

Vue自動化工具:Vue-Client

。。。先留個坑。到時候再詳細補充。

相關文章