zoukankan      html  css  js  c++  java

  • 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="索引"这个属性将只能添加一次
    

    





     
    


     
    




















































    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  模块化工具require 学习笔记
                    
    学习Jade模板引擎
                    
    通过border来实现各种三角符号
                    
    使用vscode 编译 sass
                    
    Javascript 运行机制
                    
    Vue调试工具 vue-devtools
                    
    MVVM框架
                    
    通信类
                    
    面向对象
                    
    原型和原型链
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/15fj/p/8060261.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看