02-Vue基础-Vue基本特性

Vue 的一些特性

1. 生命周期函数

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

1.1. 生命周期实例

比如created钩子可以用来在一个实例被创建之后执行代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue 生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">Vue 生命周期函数</div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          a: 1
        },
        created() {
          // `this` 指向 vm 实例
          console.log("a is: " + this.a); // a is: 1
        }
      });
    </script>
  </body>
</html>

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如mounted、updated和destroyed。生命周期钩子的this上下文指向调用它的Vue实例。

1.2. 生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

生命周期图示

2. 过滤器

Vue支持在{{ }}插值的尾部添加一个管道符|对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置，如下实例，对时间进行格式化显示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue 过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ date | formatDate }}
    </div>
    <script>
      // 在月份、日期、小时等小于10时前面补0
      var padDate = function(value) {
        return value < 10 ? "0" + value : value;
      };
      var vm = new Vue({
        el: "#app",
        data: {
          date: new Date()
        },
        filters: {
          // 过滤时间数据
          formatDate: function(value) {
            var date = new Date(value);
            var year = date.getFullYear();
            var month = padDate(date.getMonth() + 1);
            var day = padDate(date.getDate());
            var hours = padDate(date.getHours());
            var minutes = padDate(date.getMinutes());
            var seconds = padDate(date.getSeconds());
            // 返回最终结果
            return (
              year +
              "-" +
              month +
              "-" +
              day +
              " " +
              hours +
              ":" +
              minutes +
              ":" +
              seconds
            );
          }
        },
        mounted() {
          // 声明一个变量指向Vue实例this ，保证作用域一致
          var _this = this;
          this.timer = setInterval(function() {
            // 修改data的数据
            _this.date = new Date();
          }, 1000);
        },
        beforeDestroy() {
          if (this.timer) {
            // 在Vue实例销毁前，清除我们的定时器
            clearInterval(this.timer);
          }
        }
      });
    </script>
  </body>
</html>

过滤器也可以串联，也可以接收参数：

<!-- 串联 -->
{{ message | filterA | filterB }}

<!-- 接收参数 -->
{{ message | filterA('arg1', 'arg2') }}

注意：这里的字符串参数arg1和arg2将分别传递给过滤器的第二个和第三个参数，因为第一个参数是数据本身。

3. 指令与事件

Vue指令是一种带v-前缀标识的标签属性，它具有特殊的功能，在Vue中，指令的使用非常普遍，比如v-if、v-bind、v-for等。
指令的主要职责是，当表达式的值改变时，相应的将某些行为应用到DOM上，比如下面的案例：

<div id="app">
  <!-- v-if 表示条件判断，它可以是具体的值，也可以是变量，还可以是表达式，当最终结果为true时，它将在DOM节点进行渲染，否者移除节点元素 -->
  <p v-if="show">显示文本</p>
</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      show: true
    }
  });
</script>

下面介绍两个最常见的指令：v-bind和v-on

  • v-bind

v-bind会动态更新HTML元素上的属性，比如class、value、id等，如下案例展示了v-bind指令绑定数据到属性上：

<div id="app">
  <a v-bind:href="url">链接</a>
  <img v-bind:src="imgUrl" />
</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      url: "https://www.baidu.com",
      imgUrl: "http://xxx.xxx.xx/img.png"
    }
  });
</script>

示例中的链接地址和图片地址都与数据进行了绑定，当改变url和imgUrl数据时，链接和图片都会自动更新。

  • v-on

v-on用来绑定监听事件的，这样，我们就可以做一些交互操作。示例如下：

<div id="app">
     <p v-if＝"show"＞ 这是一段文本 </p>
     <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose() {
                this.show = false;
            }
        }
    });
</script>

在button标签上，我们使用v-on:click绑定一个点击事件，v-on可以监听原生的DOM事件，除了click外，还可以监听多种事件，比如：focus、keyup、mousemove等。表达式一般是一个方法名，方法名一般采用驼峰命名法，方法可以接收参数，比如事件参数event。
方法一般会定义在methods属性里，可以使用this指针在其他方法中调用方法。

4. 语法糖

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而优化程序开发。
其实Vue为v-bind和v-on指令都提供了语法糖，比如v-bind可以省略，直接写一个:即可：

<!-- 原始格式 -->
<a v-bind:href="url">链接</a>
<!-- 语法糖格式 -->
<a :href="url"></a>

v-on也可以直接省略，使用@符号来缩写：

<!-- 原始格式 -->
<button v-on:click="handleClose">点击隐藏</button>
<!-- 语法糖格式 -->
<button @click="handleClose">点击隐藏</button>

使用语法糖可以简化代码书写，以后的代码示例将默认采用语法糖的格式进行书写。

5. 章节总结

本章节我们了解一些Vue的一些语法特性，比如，生命周期钩子、数据绑定、过滤器等特性，从这些内容，我们知道了怎么去绑定一个数据，让它自动更新，还有Vue指令，通过指令操作，我们可以对页面进行渲染。在下面的章节，我们将继续探讨这些属性，本章节只是简单了解一下。相信，经过章节的小示例，你了解了怎么去编辑一个Vue程序。

当你发现你的才华撑不起你的野心，那就努力学习吧！

posted on 2020-01-19 15:47  cculin  阅读(155)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3