您的当前位置：首页正文

Vue：生命周期,模板语法，计算属性和侦听器,样式绑定

来源：图艺博知识网

1.生命周期

Vue在创建实例的过程中，有生命周期钩子的函数让我们可以在Vue从实例化到销毁的过程中让我们调用


image.png
  • beforeCreate:我们的实例创建之前会被调用
  • created:在我们创建实例之后会被调用
  • beforeMount:挂载到dom前
  • mounted:挂载到dom后
  • beforeUpdate:在数据更新前
  • updated:数据更新后
  • beforeDestroy：在实例销毁前
  • destroy:在实例销毁之后
    个人认为这些方法不用强行记忆，在我们正在需要用到的时候在使用就可以了，里面可以加我们的业务逻辑~

2.模板语法

模板语法指的是我们如何在HTML规范下使用Vue来展现我们的数据

2.1：插值

image.png

这种直接在data里面定义的叫插值法，我们可以通过在data里面改变值来控制双括号里面的值的改变

2.2：v-text，v-html

除了上面的做法，我们还可以利用以下两个指令来输出值
v-text

image.png
image.png

v-html

image.png image.png

我们看到效果都一样的，那究竟这两个标签有啥不用呢？其实他们的区别在于一个会转义，一个不会转义；
看下面的例子


image.png
image.png

2.3：使用JS表达式

我们不仅可以通过变量来控制值，还可以将JS表达式写在以上三种数据表达方式里面


image.png
image.png

3.计算属性和侦听器

3.1：计算属性

计算属性，就是在进行复杂运算的时候（即要进行运算的时候），使用的一个属性，如何使用计算属性？下面进行举例


image.png 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
<html>
<head>
    <title>计算属性</title>
    <meta charset="utf-8">
    <!--引入vue框架-->
    <script 
</head>
<body>
    <div id = "app">
        {{fullName}}
    </div>
    <script type="text/javascript">
        var app = new Vue( {
            el:'#app',
            data: {
                firstName:"Dove",
                lastName:"Lee"
            },
            computed: {
                fullName : function () {
                    return this.firstName + " "+this.lastName;
                }
            }
        })
    </script>
</body>
</html>

从上面的代码我们可以看到我们在<div>块里面定义了一个fullName，这个fullName就是一个函数，可以返回
firstName +lastName；而这个函数放在computed里面；
这个时候我们应该有一个疑问为什么我们不写在methods里面，要写在computed里面呢？因为computed效率更好，computed会将结果添加到缓存里面，当我们再次使用这个fullName的时候会直接从缓存里面取出来，不会再做计算，而methods里面的话就会再做计算，下面我们做个实验


image.png
image.png

改成methods

image.png
image.png

从上面的结果我们可以看出来，当我们的页面重新进行渲染的时候如果使用计算属性，则不会重新进行运算，而methods的话就会重新进行运算

3.2：侦听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。就是当我们的数据发生变化的时候，数据也跟着改变


image.png image.png
image.png
和计算属性的比较
  • 都可以缓存数据如果数据不发生改变，在另外的地方使用该变量的时候也会从缓存中取出
  • 代码量比计算属性多，而且还要再data域定义变量，造成变量冗余
  • 如果两个都可以使用的时候，建议使用计算属性
    额外的补充：
    计算属性不但有自己的getter,还可以有自己的setter

4.样式的绑定

在我们进行页面开发的时候，有时候我们要根据条件进行判断然后绑定一个class从而实现样式的更改；比较经典的应用就是我们的tab切换。下面就介绍如何进行样式的绑定

4.1：在{{}}中实现，当我们点击文字的时候，文字会变红，当我们再次点击的时候文字会变回原样

步骤：
1.用v-bind:class指令绑定一个变量active;
2.在data区域首先设为false;
3.写一个方法进行更改的操作


image.png
image.png
image.png

点击变红了。
完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
<html 
<head>
    <title>样式绑定</title>
    <meta charset="utf-8">
    <!--引入vue框架-->
    <script 
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id = "app">
        <div v-bind:class =  "{active:isActive}"
             @click = "handleStyle">Hello</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data: {
                isActive:false
            },
            methods: {
                handleStyle: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

4.2:数组的方式

还有另外一种表现方式；数组。
修改上面的代码如下：


image.png

实现的效果和上面是一样的，这里就不贴图了
下面是完整的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
<html 
<head>
    <title>样式绑定</title>
    <meta charset="utf-8">
    <!--引入vue框架-->
    <script 
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id = "app">
        <div v-bind:class =  "[active]"
             @click = "handleStyle">Hello</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data: {
                active:""
            },
            methods: {
                handleStyle: function () {
                    this.active = this.active === "active" ? "" : "active"
                }
            }
        })
    </script>
</body>
</html>

4.3：以对象的形式

还有一种形式是以对象的形式去定义，我们可以直接在data里面将这个对象的属性定义出来（就和我们以前直接定义CSS样式一样）


image.png

效果如上面所述
下面是完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        
<html 
<head>
    <title>样式绑定</title>
    <meta charset="utf-8">
    <!--引入vue框架-->
    <script 
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id = "app">
        <div v-bind:style =  "styleObject"
             @click = "handleStyle">Hello</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data: {
                styleObject :{
                    color: "red"
                }
            },
            methods: {
                handleStyle: function () {
                    this.styleObject.color = this.styleObject.color === "black"? "red" : "black";
                }
            }
        })
    </script>
</body>
</html>

这种内联样式的绑定有数组的形式，具体形式如下

image.png

5.总结

  • 生命周期：Vue在初始化到销毁的时候都有对应的方法，我们可以在各个阶段加入我们的业务逻辑代码。不必要死记硬背，当我们想实现某些需求的时候，要记得想起来就好了~
  • 模板语法:有插值法和利用指令来展示我们想展示的数据
  • 计算属性和侦听器：非常重要。但是我们在写代码的时候可能没有第一时间想到用这个，更多的时候可能想到的是直接用Methods（我个人就是这样），不过当我们回过头来看过自己写过的业务代码的时候发现需要优化的时候不妨想想这个？毕竟缓存是个好东西~
  • 样式绑定：我们说Vue更注重的是数据的，利用数据来操作页面的变化，在Vue中我们使用样式绑定的方式来实现样式切换等效果。非常酷！几乎没有DOM操作！

Copyright © 2019- huatuoyibo.net 版权所有
湘ICP备2023021910号-2

Top