Vue_(組件)實例方法

本文轉載自查看原文 2019-02-26 20:29 713 Vue

　　Vue.js實例方法/生命周期　　傳送門

　　常用的實例方法

　　數據：　　傳送門

　　　　vm.$set：設置屬性值

　　　　vm.$delete：刪除屬性值

　　　　vm.$watch：觀測數據變化

　　生命周期

　　　　vm.$mount：手動掛載Vue實例

　　　　vm.$destroy：銷毀Vue實例，清理數據綁定，移除事件監聽

　　　　vm.$nextTick：將方法中的回調函數，延遲到DOM更新后　　傳送門

　　Learn

　　　　一、vm.$set

　　　　二、vm.$delete

　　　　三、vm.$watch

　　　　四、實例方法-生命周期

　　項目結構

　　【每個demo下方都存有html源碼】

一、vm.$set　　傳送門

　　vm.$set：設置屬性值　

　　給user添加一個username屬性和兩個實例方法，通過changeUsername()方法去修改username屬性的值，通過addId()去添加用戶的id，通過按鈕點擊事件分別觸發這兩個方法

<div>
            Id：<span>{{user.id}}</span><br />
            用戶名：<span>{{user.username}}</span><br />
            <button @click="changeUsername">change</button><br />
            <button @click="addId">addId</button><br />
</div>

 　　　　data:{
                user:{
                    username:'Gary'
                }
            },
            methods:{
                changeUsername(){
                    this.user.username = 'Gary-2!!!';
                    console.log(this.user.username);
                },
                addId(){
                    this.user.id=1;
                    console.log(this.user.id);
                }
            }

　　可以看到user的id並沒有被賦值1，而user的username屬性已經是被改變

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
            Id：<span>{{user.id}}</span><br />
            用戶名：<span>{{user.username}}</span><br />
            <button @click="changeUsername">change</button><br />
            <button @click="addId">addId</button><br />
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                user:{
                    username:'Gary'
                }
            },
            methods:{
                changeUsername(){
                    this.user.username = 'Gary-2!!!';
                    console.log(this.user.username);
                },
                addId(){
                    this.user.id=1;
                    console.log(this.user.id);
                }
            }
        });
        
</script>



</html>

Gary_InstanceMethod.html

　　解決方法：使用vm.$set就可以給未設置屬性值的user設置屬性值id，全局方法Vue.set(this.user,'id',1);

                changeUsername(){
                    this.user.username = 'Gary-2!!!';
                    console.log(this.user.username);
                },
                addId(){
                    //his.user.id=1;
                    this.$set(this.user,'id',1);
                    console.log(this.user.id);
                }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
            Id：<span>{{user.id}}</span><br />
            用戶名：<span>{{user.username}}</span><br />
            <button @click="changeUsername">change</button><br />
            <button @click="addId">addId</button><br />
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                user:{
                    username:'Gary'
                }
            },
            methods:{
                changeUsername(){
                    this.user.username = 'Gary-2!!!';
                    console.log(this.user.username);
                },
                addId(){
                    //his.user.id=1;
                    this.$set(this.user,'id',1);
                    //全局方法
                    //Vue.set(this.user,'id',1);
                    console.log(this.user.id);
                }
            }
        });
        
</script>



</html>

Gary_InstanceMethod.html

二、vm.$delete　　傳送門

　　vm.$delete：刪除屬性值

　　當然也可以通過Vue.delete(this.user, 'id')去刪除ID對象，全局方法Vue.delete(this.user, 'id');

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
            Id：<span>{{user.id}}</span><br />
            用戶名：<span>{{user.username}}</span><br />
            <button @click="changeUsername">change</button><br />
            <button @click="addId">addId</button><br />
            <button @click="delId">delId</button>
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                user:{
                    username:'Gary'
                }
            },
            methods:{
                changeUsername(){
                    this.user.username = 'Gary-2!!!';
                    console.log(this.user.username);
                },
                addId(){
                    //his.user.id=1;
                    this.$set(this.user,'id',1);
                    //全局方法
                    //Vue.set(this.user,'id',1);
                    console.log(this.user.id);
                },
                delId(){
                    if(this.user.id){
                        //this.$delete(this.user, 'id');
                        Vue.delete(this.user, 'id');
                    }
                }
            }
        });
        
</script>



</html>

Gary_InstanceMethod.html

三、vm.$watch　　傳送門

　　vm.$watch：觀測數據變化

　　觀測msg值發生的變化，使用時可以傳兩個參數，一個是oldValue，另一個是newValue

        <input type="text" v-model="msg" /><br />
        msg : <span>{{msg}}</span><br />

        vm.$watch('msg',function(newValue,oldValue){
            console.log("修改了msg old="+oldValue +"   new="+newValue);
        });

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
        <input type="text" v-model="msg" /><br />
        msg : <span>{{msg}}</span><br />
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
            msg:'Gary'    
            },
        });
        
        vm.$watch('msg',function(newValue,oldValue){
            console.log("修改了msg old="+oldValue +"   new="+newValue);
        });
        
</script>


 </html>

Gary_InstanceMethod_watch.html

　　vm.$watch也有一個回調函數，回調函數得到的參數為新值和舊值。表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代。

　　觀測普通屬性值可直接使用

            watch : {
                num : function(newValue, oldValue){
                console.log("修改了num old= " + oldValue + "   new= " + newValue);
                }

　　觀為了發現對象內部值的變化，必須在選項參數中指定 deep: true，否則會觀測不到

                watch : {
                    num : function(newValue, oldValue){
                        console.log("修改了num old= " + oldValue + "   new= " + newValue);
                    },
//                    user : function(newValue, oldValue){
//                        console.log("修改了user old= " + oldValue + "   new= " + newValue);
//                    }
                    user : {
                        handler : function(newValue, oldValue){
                            console.log("修改了num old= " + oldValue.username + "   new= " + newValue.username);
                            console.log(oldValue == newValue);
                        },
                        deep : true
                    }
                }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
            <!--<input type="text" v-model="msg" /><br />
            msg : <span>{{msg}}</span><br />-->
            <input type="text" v-model="num" /><br />
            num : <span>{{num}}</span><br />
            <input type="text" v-model="user.username" /><br />
            username : <span>{{user.username}}</span><br />
<!--            <button onclick="unWatch()">unWatch</button>-->
</div>  
</body>

<script>
    let vm = new Vue({
                el : 'div',
                data : {
                    msg : 'Gary',
                    num : 1,
                    user : {
                        id : '01',
                        username : 'Gary-user'
                    }
                },
                watch : {
                    num : function(newValue, oldValue){
                        console.log("修改了num old= " + oldValue + "   new= " + newValue);
                    },
//                    user : function(newValue, oldValue){
//                        console.log("修改了user old= " + oldValue + "   new= " + newValue);
//                    }
                    user : {
                        handler : function(newValue, oldValue){
                            console.log("修改了num old= " + oldValue.username + "   new= " + newValue.username);
                            console.log(oldValue == newValue);
                        },
                        deep : true
                    }
                }
            });
            
//            let unwatch = vm.$watch('user', {
//                handler : function(newValue, oldValue){
//                    console.log("修改了msg old= " + oldValue + "   new= " + newValue);
//                },
//                deep : true
//            });
//            
//            function unWatch(){
//                unwatch();
//            }
            
        
</script>


 </html>

Gary_InstanceMethod_watch.html

四、實例方法-生命周期　　傳送門

　　Vue對象中把el：綁定的<div>標簽注解掉，通過使用vm.$mount("");方法去手動掛載<div>對象

<div id="GaryId">
        <input type="text" v-model="msg" /><br />
        num : <span>{{msg}}</span><br />
</div>

<script>
    let vm = new Vue({
            //el : 'div',
            data:{
                msg:'Gary'
            }
        });
        
//        手動掛載
        vm.$mount("#GaryId");
        
</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div id="GaryId">
        <input type="text" v-model="msg" /><br />
        num : <span>{{msg}}</span><br />
</div>  
</body>

<script>
    let vm = new Vue({
            //el : 'div',
            data:{
                msg:'Gary'
            }
        });
        
//        手動掛載
        vm.$mount("#GaryId");
        
</script>


 </html>

Gary_InstanceMethod_lifeCycle.html

　　通過button去調用_destory()方法，使用vm.$destroy()去銷毀數據的綁定

<div id="GaryId">
        <input type="text" v-model="msg" /><br />
        num : <span>{{msg}}</span><br />
        <button onclick="_destory()">銷毀</button>
</div>

    function _destory(){
        vm.$destroy();
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div id="GaryId">
        <input type="text" v-model="msg" /><br />
        num : <span>{{msg}}</span><br />
        <button onclick="_destory()">銷毀</button>
</div>  
</body>

<script>
//  let vm = new Vue({
//            //el : 'div',
//            data:{
//                msg:'Gary'
//            }
//        });
//        
//        手動掛載
//        vm.$mount("#GaryId");
    
    let vm =    new Vue({
            data:{
                msg:'Gary'
            }
        }).$mount('#GaryId');
    
    function _destory(){
        vm.$destroy();
    }
    
</script>


 </html>

Gary_InstanceMethod_lifeCycle.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 子組件獲取父組件的實例方法 Vue實例方法 vue——實例方法 / 數據 Vue實例實例方法與屬性 vue中與事件相關的實例方法 vue $mount掛載實例方法 vue中的實例方法的底層原理 Vue 源碼解讀（6）—— 實例方法 Vue實例方法之事件的實現外部js調用vue實例方法