08: vue組件

時間  2019-11-14
標籤 vue 組件 简体版
原文   原文鏈接

1.1 初識組件

　　一、什麼是組件javascript

　　　　　　1. Html中有組件，是一段能夠被複用的結構代碼css

　　　　　　2. Css中有組件，是一段能夠被複用的樣式html

　　　　　　3. Js中有組件，是一段能夠被複用的功能vue

　　　　　　4. Vue中也有組件，指的就是一個模塊，是一個獨立的，完整的（包含html，css，js等），能夠直接拿來用的java

　　二、使用組件分紅三步數組

　　　　一、第一步 定義組件容器（定義自定義元素）app

　　　　二、第二步 定義組件Vue.extend方法ide

　　　　　　　　1. 參數是組件對象，對象屬性跟vue實例化時候傳遞的參數對象的屬性是同樣的，例如 data，methods，computed
　　　　　　　　2. 在vue實例化時候，data屬性的屬性值是一個對象，在組件中，data屬性值是一個函數，返回值是一個對象
　　　　　　　　3. 組件中，能夠經過template定義模板，一般模板寫在一個根元素內函數

　　　　三、第三步 將組件註冊到頁面中 Vue.componentui

　　　　　　　　第一個參數表示容器元素的名稱
　　　　　　　　第二個參數表示組件類

　　三、組件特性

　　　　　　　　1. 組件的實例化對象，跟vue實例化對象同樣，所以，咱們也能夠將vue實例化對象當作組件

　　　　　　　　2. 組件間是獨立的，所以數據要獨立存儲，方法要獨立定義，彼此間不能共享。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <Home></Home>
    </div>

    <script src="vue.js"></script>
    <script>
        var Home = Vue.extend({
           template:"<h1>I am h1!! 顯示變量： {{msg}}</h1>",
            data:function () {
                return {
                    'msg':'I am msg'
                }
            }
        });

        Vue.component('home',Home);

        var app = new Vue({
            el:'#app',
            data:{}
        })
    </script>
</body>
</html>
最簡單組件

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <h1 v-on:click="clickH1">{{msg}}</h1>
        <!-- 第一步 定義容器元素 -->
        <ickt></ickt>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 第二步 定義組件類
        var Ickt = Vue.extend({
            template: '<div><input type="text" v-model="msg" /><h1 v-on:click="clickH1">{{msg}}</h1></div>',            // 定義模板
            data: function() {            // 綁定數據
                return {
                    msg: 'ickt'          // 返回值纔是真正綁定的數據
                }
            },
            methods: {                   // 定義方法
                clickH1: function() {
                    console.log(222, this)
                }
            }
        });

        // 第三步 註冊組件
        Vue.component('ickt', Ickt);

        // vue實例化對象
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {            // 定義方法
                clickH1: function() {
                    console.log(111)
                }
            }
        })
    </script>
</body>
</html>
定義組件

1.2 父組件向子組件間的通訊

　　一、組件間的通訊說明

　　　　　　1. 組件間通訊就是指組件之間是如何傳遞數據的
　　　　　　　　　　父組件：vue實例化對象
　　　　　　　　　　子組件：自定義組件

　　　　　　2. 組件的tempalte屬性，除了能夠是字符串，還能夠是元素的id

　　　　　　3. 咱們在頁面中定義模板的時候，除了能夠定義在script模板標籤中，還能夠定義在template模板中

　　　　　　父組件子組件：若是你在一個組件A裏面，用到了另一個組件B，那麼B就是A的子組件，A就是B的父組件

 　　二、父組件向子組件通訊：分爲如下兩步

　　　　1. 第一步

　　　　　　　　1. 在組件容器元素上，定義自定義屬性，屬性值能夠傳遞父組件中的數據

　　　　　　　　2. 若是屬性使用了v-bind指令，屬性值就是js環境

　　　　　　　　3. 若是屬性沒有使用v-bind指令，屬性值就是字符串

　　　　　　　　<ickt demo="hello" v-bind:parent-msg="msg"></ickt>     # hello 是字符串，  msg是變量

　　　　2. 第二步

　　　　　　　　1. 在組件中定義props屬性，屬性值是數組，每個成員表明組件容器元素上的一個屬性

　　　　　　　　2. 做用：將屬性做爲變量，註冊在子組件中，能夠在子組件中使用（包括模板）

　　　　　　　　3. 注意: 若是屬性名稱，出現了-， 註冊的變量要使用駝峯式命名法

　　三、例子說明

　　　　　　1. 在當頁面中註冊了子組件：Ickt，在子組件中是沒法使用父組件中定義的數據 msg 的

　　　　　　2. 若是想要在子組件Ickt中使用父組件的 msg 變量，能夠使用 <ickt  v-bind:parent-msg="msg"></ickt> 

　　　　　　3. 在子組件中 使用{{parent-msg}} 就能夠訪問父組件的msg變量了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <h1 @click="clickH1">vue:{{msg}}</h1>

        <!-- 1 容器 第一步 綁定屬性   demo 沒有使用v-bind因此是字符串 -->
        <ickt demo="hello" v-bind:parentmsg="msg"></ickt>
    </div>
    <template id="tpl">
        <div>
            <input type="text" v-model="childMsg">
            <h1 @click="clickChildH1">demo: {{childMsg}}</h1>
            <h2>{{demo}}</h2>             <!-- demo 是父組件中的字符串 -->
            <h3>{{parentmsg}}</h3>        <!-- parentmsg 是父組件中的變量 -->
        </div>
    </template>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 2 組件類
        var Ickt = Vue.extend({            // 第二步 註冊屬性變量
            props: ['demo', 'parentmsg'],
            template: '#tpl',
            data: function() {             // 綁定數據
                return {
                    childMsg: ''
                }
            },
            methods: {                     // 綁定事件
                clickChildH1: function() {
                    console.log(222)
                }
            }
        });

        // 3 註冊
        Vue.component('ickt', Ickt);    // 建立vue實例化對象： 父組件

        var app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {                    // 定義方法
                clickH1: function() {
                    console.log(1111)
                }
            }
        })
    </script>
</body>
</html>
父組件向子組件通訊

1.3 子組件向父組件通訊

 　　一、1.0中子組件向父組件通訊分如下兩步

　　　　1. 第一步：註冊事件

　　　　　　　　在父組件的events屬性中 註冊消息，參數就是觸發是傳遞的數據，做用域是組件實例化對象

　　　　2.第二步：觸發事件

　　　　　　　　在子組件中，經過$dispatch方法觸發消息

　　二、2.0中改變 　　

　　　　　　1. 將$dispatch, $broadcast 移除了，新增了$emit, $on, $off

　　　　　　　　　　$emit發佈消息

　　　　　　　　　　$on 註冊消息： 參數就是$emit傳遞的數據，做用域就是組件實例化對象

　　　　　　　　　　$off 註銷消息

　　　　　　2. 每個組件至關於一個事件對象，只能在自身訂閱，觸發，以及發佈

　　　　　　3. 注意：工做中，註冊事件一般在組件生命週期方法中註冊，例如created

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <h1 @click="clickH1">vue:{{msg}}</h1>
        <!-- 1 容器 第一步 綁定屬性 -->
        <ickt demo="hello" v-bind:parent-msg="msg"></ickt>
    </div>
    <template id="tpl">
        <div>
            <input type="text" v-model="childMsg">
            <h1 @click="clickChildH1">demo: {{childMsg}}</h1>
            <h2>{{demo}}</h2>
            <h3>{{parentMsg}}</h3>
        </div>
    </template>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 2 組件類
        var Ickt = Vue.extend({
            props: ['demo', 'parentMsg'],       // 第二步 註冊屬性變量
            template: '#tpl',
            data: function() {                   // 綁定數據
                return {
                    childMsg: ''
                }
            },
            methods: {                          // 綁定事件
                clickChildH1: function() {
                    this.$parent.$emit('icktmsg', 'hello', 'everyone')       //二、觸發消息
                }
            }
        });
        // 3 註冊
        Vue.component('ickt', Ickt);

        var app = new Vue({             // 建立vue實例化對象： 父組件
            el: '#app',
            data: {
                msg: ''
            },
            methods: {                 // 定義方法
                clickH1: function() {
                    this.$on('icktmsg', function() {       //一、註冊消息
                        console.log(arguments, this)
                    })
                }
            }
        })
    </script>
</body>
</html>
子組件向父組件通訊

1.4 組件的生命週期 

　　一、說明

　　　　　　1. Vue將組件當作是一個有生命的個體，跟人同樣，定義了各個階段，

　　　　　　2. 組件的生命週期：組件的建立過程

　　　　　　3. 組件生命週期鉤子函數：當組件處在某個階段，要執行某個方法，來通知咱們，組件進入某個階段，這個方法就是組件生命週期的鉤子函數

　　　　　　4. 組件的建立過程：這些方法在組件中直接定義，會按照順序執行，沒有參數，做用域都是組件實例化對象

　　二、組件生命週期中依次執行的八個鉤子函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <Home></Home>
    </div>

    <script src="vue.js"></script>
    <script>
        var Home = Vue.extend({
           template:"<h1>I am h1!! 顯示變量： {{msg}}</h1>",
            data:function () {
                return {
                    'msg':'I am msg'
                }
            },

            // 方法1：組件實例被建立，組件屬性計算以前，如data屬性等
             beforeCreate: function () {
                 console.log(111, this, arguments)
             },

            // 方法2：組件實例建立完成，屬性已經綁定，但DOM還未生成，$el 屬性還不存在
             created: function () {
                 console.log(222, this, arguments)
             },

            // 方法3：模板編譯/掛載以前
             beforeMount: function () {
                 console.log(333, this, arguments)
             },

            // 方法4：模板編譯/掛載以後（不保證組件已在document中）
             mounted: function () {
                 console.log(444, this, arguments)
             },


            // 方法5：組件更新以前
             beforeUpdate: function () {
                 console.log(555, this, arguments)
             },

            // 方法6：組件更新以後
             updated: function () {
                 console.log(666, this, arguments)
             },

             // 方法9：組件銷燬前調用
             beforeDestory: function () {
                 console.log(777, this, arguments)
             },

            // 方法10：主鍵銷燬後調用
             destoryed: function () {
                 console.log(888, this, arguments)
             },


            // 方法7：組件被激活時調用（用的少）
            // activated: function() {
            //     console.log(777, this, arguments)
            // },

            // 方法8：組件被移除時調用（用的少）
            // deactivated: function () {
            //     console.log(888, this, arguments)
            // },




        });

        Vue.component('home',Home);

        var app = new Vue({
            el:'#app',
            data:{
                'isShow':true,
            }
        })
    </script>
</body>
</html>
組件中八個鉤子函數執行順序

　　三、圖片展現

 　　　　

　　四、組件生命週期 經常使用的兩個過程

　　　　　　1）created： 實例已經建立完成，而且已經進行數據觀測和事件配置

　　　　　　2）mounted：模板編譯以後，已經掛載，此時纔會渲染頁面，才能看到頁面上數據的展現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命週期</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    msg:'welcome to itany'
                },
                methods:{
                    update(){
                        this.msg='歡迎來到南京網博！';
                    },
                    destroy(){
                        // this.$destroy();
                        vm.$destroy();
                    }
                },
                beforeCreate(){
                    alert('組件實例剛剛建立，還未進行數據觀測和事件配置');
                },
                created(){  //經常使用！！！
                    alert('實例已經建立完成，而且已經進行數據觀測和事件配置');
                },
                beforeMount(){
                    alert('模板編譯以前，還沒掛載');
                },
                mounted(){ //經常使用！！！
                    alert('模板編譯以後，已經掛載，此時纔會渲染頁面，才能看到頁面上數據的展現');
                },
                beforeUpdate(){
                    alert('組件更新以前');
                },
                updated(){
                    alert('組件更新以後');
                },
                beforeDestroy(){
                    alert('組件銷燬以前');
                },
                destroyed(){
                    alert('組件銷燬以後');
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}}
        <br>

        <button @click="update">更新數據</button>
        <button @click="destroy">銷燬組件</button>
    </div>
</body>
</html>
生命週期執行順序
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程