vue实例的生命周期,模板语法以及计算属性，方法以及侦听器

最新推荐文章于 2022-11-26 14:54:23 发布

爱上口袋的天空

最新推荐文章于 2022-11-26 14:54:23 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/K_520_W/article/details/103513080

版权

一：vue实例的生命周期钩子

简介
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

相关函数代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">{{content}}</div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 content:'Hello world'
             },
             beforeCreate:function() {
                 console.log('beforeCreate函数......');
             },
             beforeMount:function() {
                 //mounted函数时页面标签的内容基本还没有渲染完成
                console.log('====beforeMount=====begin');
                console.log(this.$el);
                console.log('====beforeMount=====end');
             },
             created:function() {
                console.log('created函数......');
             },
             mounted:function(){
                 //mounted函数时页面标签的内容基本已经渲染完成时调用这个函数
                console.log('========mounted函数========begin');
                console.log(this.$el);
                console.log('========mounted函数========end');
             },
             beforeDestroy:function() {
                console.log('beforeDestroy函数......');
             },
             destroyed:function() {
                console.log('destroyed函数......');
             },
             beforeUpdate:function() {
                 //当数据发生改变时，在标签没有被渲染之前触发
                console.log('beforeUpdate函数......');
             },
             updated:function() {
                 //当数据发生改变时，在标签被渲染后触发
                console.log('updated函数......');
             },
         });     
    </script>
</body>
</html>

二：vue的模板语法

v-text标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <!--v-text的效果相当与{{content}}-->
        <div v-text="content"></div>
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 content:'Hello world1'
             }
            });        
    </script>
</body>
</html>

v-html和v-text的区别
a：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <!--v-text的效果相当与{{content}}-->
        <div v-text="content"></div>
        <div v-html="content"></div>
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 content:'<h1>Hello world1</h1>'
             }
            });        
    </script>
</body>
</html>

b:效果，可以发现v-html会解析h1标签，二v-text不会解析

v-html和v-text以及花括号都支持js表达式
a：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <!--v-text的效果相当与{{content}}-->
        <div>{{content + ' Lee'}}</div>
        <div v-text="content + ' Lee'"></div>
        <div v-html="content + ' Lee'"></div>
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 content:'Hello world1'
             }
            });        
    </script>
</body>
</html>

b：效果

三：计算属性，方法以及侦听器

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        {{fullName}}
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 firstName:'Hello',
                 lastName:'Lee'
             },
             computed: {//使用这个计算属性,他有一个非常重要的属性，是内置缓存的，当里面的变量没有发生变化时，这里面的方法不会再次调用，当它里面计算涉及到的变量发生变化，他是会调用的
                fullName:function(){
                    return this.firstName+" "+this.lastName;
                }
             },
            });        
    </script>
</body>
</html>

使用方法实现上面的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <!--直接调用方法-->
    <div id="root">
        {{fullName()}}
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 firstName:'Hello',
                 lastName:'Lee'
             },
             methods: {
                fullName:function(){//方法
                    return this.firstName+"||"+this.lastName;
                }
             }
            });        
    </script>
</body>
</html>

使用侦听器方式实现上面效果
a：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <!--直接调用方法-->
    <div id="root">
        {{fullName}}
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 firstName:'Hello',
                 lastName:'Lee',
                 fullName:'Hello Lee'
             },
             watch: {//侦听firstName，lastName变化时触发下面的方法
                firstName:function(){
                    this.fullName = this.firstName+"||"+this.lastName;
                },
                lastName:function(){
                    this.fullName = this.firstName+"||"+this.lastName;
                }
             }
            });        
    </script>
</body>
</html>

四：计算属性的get和set方法

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的get和set</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <!--直接调用方法-->
    <div id="root">
        {{fullName}}
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data:{
                 firstName:'Hello',
                 lastName:'Lee'
             },
             computed: {
                fullName:{
                    get:function(){
                        console.log('走起get.....');
                        return this.fullName = this.firstName+" "+this.lastName;
                    },
                    set:function(value){//当数据发生变化的时候，会调用set方法
                        console.log('走起set.....:'+value);
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
             }
            });        
    </script>
</body>
</html>