Vue_(组件)实例方法

其他 2019-02-26 20:47:59 阅读次数: 0

　　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

 　　

猜你喜欢

转载自www.cnblogs.com/1138720556Gary/p/10434819.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022