vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

摘要：今天学习一下vue的生命周期，如何防止闪烁（也就是用户看得到花括号），计算属性的使用，vue实例简单方法，以及当有重复数据时如何循环

一、vue的生命周期：熟悉它的生命周期可以让开发更好的进行。

　　钩子函数:

　　created　　　　:实例已经创建   
　　beforeCompile:编译之前
　　compiled   :编译之后
　　ready:插入到文档中
　　beforedestroy  :销毁之前
　　destroyed:销毁之后
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生存周期</title>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
    <script>
        window.onload=function () {
           var vm= new Vue({
                el:'#box',
                data:{
                    msg:'well'
                },
                created:function () {
                    alert('实例已创建')
                },
                beforeCompile:function () {
                    alert('编译之前')
                },
                compiled:function () {
                    alert('编译之后')
                },
                ready:function(){
                    alert('插入到文档中');
                },
                beforeDestroy:function(){
                    alert('销毁之前');
                },
                destroyed:function(){
                    alert('销毁之后');
                }
            });
            /*点击页面销毁vue对象*/
            document.onclick=function(){
                vm.$destroy();
            };
        }
    </script>
</head>
<body>
    <div id="box">
        {{msg}}
    </div>
</body>
</html>
 运行结果：弹出编译前，实例已创建，编译之前，编译之后，插入到文档中，然后页面显示msg的内容，最后点击页面的任何位置vue对象销毁

为了更好地理解这个过程，可以参照下面的这个图片进行了解

二、如何解决用户看到花括号的问题:页面加载时出现vuejs变量名

　　例如：当加载如下代码时

　　

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

    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm= new Vue({
                el:"#box",
                data:{
                    a:1
                },
                computed:{
                    b:function () {
                        return this.a+1;
                    }
                }
            });
            document.onclick=function () {
                vm.a=101;
            }
        }
    </script>
</head>
<body>
<div id="box">
    a=>{{a}}
    <br>
    b=>{{b}}
</div>
</body>
</html>

可能会闪现

a=>{{a}}
b=>{{b}}
所以有以下几种方法来解决这个问题

1、v-cloak 防止闪烁,用于 比较大段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防止闪烁</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm= new Vue({
                el:"#box",
                data:{
                    a:1
                },
                computed:{
                    b:function () {
                        return this.a+1;
                    }
                }
            });
            document.onclick=function () {
                vm.a=101;
            }
        }
    </script>
</head>
<body>
<div id="box" v-cloak>
    a=>{{a}}
    <br>
    b=>{{b}}
</div>
</body>
</html>

原理：这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见。

2、v-text方法

　　2.1当没有html标签的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                    msg:'welcome'
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <!--这种写法在网速比较慢的时候会看的见花括号-->
        <span>{{msg}}</span>
        <!--这种写法网速再慢也看不见花括号-->
        <span v-text="msg"></span>
    </div>
</body>
</html>
2.2当有html标签的时候：v-text不起作用了，{{{}}}有作用
　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                    msg:'<strong>welcome</strong>'
                }
            })
        }
    </script>
</head>
<body>
<div id="box">
    <span>{{{msg}}}</span>
    <span v-text="msg"></span>
</div>
</body>
</html>
运行结果：

3、v-thml方法：解决到上面2.2的问题

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                    msg:'<strong>welcome</strong>'
                }
            })
        }
    </script>
</head>
<body>
<div id="box">
    <span>{{{msg}}}</span>
    <span v-html="msg"></span>
</div>
</body>
</html>
运行结果：


三、计算属性的使用

1、基本用法： 说明-〉b看起来像是一个函数名其实是一个属性，computed里面可以放置一些业务逻辑代码，一定记得return;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
           var vm= new Vue({
                el:"#box",
                data:{
                    a:1
                },
                computed:{
                    b:function () {　　　　　　　　　　//默认调用get
                        return this.a+1;
                    }
                }
            });
            document.onclick=function () {
               vm.a=101;
            }
        }
    </script>
</head>
<body>
<div id="box">
    a=>{{a}}
    <br>
    b=>{{b}}
</div>
</body>
</html>
 运行结果：当a改变的时候b也跟着变化
点击页面之前：

点击页面之后：

2、计算属性的get和set方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm= new Vue({
                el:"#box",
                data:{
                    a:1
                },
                computed:{
                    b:{
                        get:function() {　　　　　　　　　　　　　　　　//将a的值加2后赋给b
                            return this.a+2;
                        },
                        set:function(val){
                            alert(val)
                            this.a=val;　　　　　　　　　　　
                        }

                    }
                }
            });
            document.onclick=function () {　　　　　　//点击页面之后将vue实例对象vm的b设置为101，调用set()函数
                vm.b=101;
            }
        }
    </script>
</head>
<body>
<div id="box">
    a=>{{a}}
    <br>
    b=>{{b}}
</div>
</body>
</html>
 运行结果：
点击页面之前：

点击页面之后：

弹出101，并且页面变为

四、vue实例简单方法

1、vm.$el  ->  就是元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例简单方法</title>
    <script src="vue.js"></script>
    <script >
        window.onload=function () {
            var vm=new Vue({
                el:"#box",
                data:{
                    a:1
                }
            });
            console.log(vm.$el);
            vm.$el.style.background='red'
        }
    </script>
</head>
<body>
    <div id="box">
        {{a}}
    </div>
</body>
</html>

 运行结果：

2、vm.$data -> 就是data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例简单方法2</title>
    <script src="vue.js"></script>
    <script >
        window.onload=function () {
            var vm=new Vue({
                el:"#box",
                data:{
                    a:1
                }
            });
            console.log(vm.$data);
            console.log(vm.$data.a);
        }
    </script>
</head>
<body>
<div id="box">
    {{a}}
</div>
</body>
</html>

 运行结果：

3、vm.$mount -> 手动挂载vue程序



<!DOCTYPE ht<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>vue实例简单方法3</title>
    <script src="vue.js"></script>
    <script >
        window.onload=function () {
//普通写法
            var vm=new Vue({　　　　　　　　　　　　　　
　　　　　　　　　//跟以前相比这里少了el，所以需要后面手动挂载
               data:{
                    a:1
                }
            });
            vm.$mount("#box");          //手动挂载     
　　　　　
//链式写法　　


　　　　　　//　var vm=new Vue({
   
 　　　　　　　　//　 data:{
       　　　　　　　　　　 a:1
    　　　　　　　　//　　}
　　　　　　　　　//　}).$mount("#box");//手动挂载




        }
    </script>
</head>
<body>
<div id="box">
    <span v-text="a"></span>
</div>
</body>
</html>





4、vm.$options -> 获取自定义属性




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例简单方法3</title>
    <script src="vue.js"></script>
    <script >
        window.onload=function () {
            var vm=new Vue({
                aa:11,       //自定义属性
                show:function () {          //自定义方法
                    alert(1)
                },
                data:{
                    a:1
                }
            }).$mount("#box");
            vm.$options.show();             //调用自定义方法
            console.log(vm.$options.aa);        //访问自定义属性
        }
    </script>
</head>
<body>
<div id="box">
    <span v-text="a"></span>
</div>
</body>
</html>




 运行结果：


弹出1，并且控制台输出11


 



5、vm.$log(); -> 查看现在数据的状态




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

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

    </script>
</head>
<body>
    <div id="box">
        <span v-text="a"></span>
    </div>
    <script>

        var vm=new Vue({
            data:{
                a:1,
                b:2
            }
        }).$mount('#box');

        console.log(vm.$log());
    </script>
</body>
</html>





 运行结果：





五、循环--数据重复： 当数据重复的时候，vue不会将其加载进来形成新的节点，为了解决这个没问题 vue提供了track-by="索引"这个属性，这个属性还能提高性能


下面代码将演示如何使用它





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环-重复数据</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                    arr:['apple','pine','orange']
                },
                methods:{
                    add:function () {
                        this.arr.push('tomato')
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @click="add()">
        <ul>
            <li v-for="value in arr" track-by="$index">
                {{value}}
            </li>
        </ul>
    </div>
</body>
</html>





运行结果：点击按钮，tomato被显示在页面而且可以添加多次，如果没有track-by="索引"这个属性将只能添加一次








 



 
























































        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/15fj/p/8060261.html