Vue生命周期、插值与表达式、过滤器、指令与事件

        每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

 Vue生命周期，比较常用的有：

•   created 实例创建完成之后调用，但尚未挂载，$el还不可以使用
•   mouted el挂载到实例上后调用，一般第一个业务逻辑会在这里
•   beforeDestory 实例销毁之前调用，主要解绑一些使用addEventListener监听事件 

插值与表达式： 

 使用双大括号{{}},最基本的文本插值方法，它会自动将双向绑定的数据实时显示出来

指令与事件：

• 指令(Directives)是Vue.js模板中最常见的一项功能。它带有前缀v-

• 指令的主要职能就是当表达式的值变化时，相应地将某些行为应用到DOM上。 

•  v-on来监听事件

 过滤器：

       Vue.js支持在{{}} 插值尾部添加一个管道符 “|”  对数据进行过滤，用于格式化文本，过滤规则是自定义的，通过添加filters来设置

<template>
  <div id="show">
    <input type="text" v-model="name" placeholder="你的名字"/>
    <h1>你好, {{name}}</h1>

    <!-- 过滤器 可以插入一个管道符 | 对数据进行过滤 -->
    当前时间: {{ date | formatDate }} <br/>
    <div>
      插件表达式可以进行简单的判断：<br/>
      {{ number / 10 }} <br/>
      {{ isOK ? 'OK' : 'NOT OK' }} <br/>
      <span>{{text.split(',').reverse().join(',')}}</span>
    </div>

    <div>
      <span v-html="link"></span>
      <button v-on:click="handleClose">点击隐藏</button>
      <p v-if="isShow">
        显示这段文本
      </p>
    </div>

    <div>
      <button v-on:click="changeData">更改图片源</button>
      <a v-bind:href="url" v-html="showName" target="_blank"></a>
      <img v-bind:src="imgUrl" class="img">
    </div>

    <!-- 简写方式 -->
    <!-- <img :src="imgUrl" class="img">
    <a :href="url" v-html="showName" target="_blank"></a>
    <button @click="handleClose">点击隐藏</button>-->

  </div>

</template>

<script>
  export default {
    name: "Hello",
    data() {
      return {
        name: "",
        date: new Date(),
        link: 'Hello World',
        number: 20,
        isOK: true,
        text: '123,456',
        isShow: true,
        // 数据变化时会自动的更新
        url: "http://www.baidu.com",
        imgUrl: "https://www.baidu.com/img/bd_logo1.png?where=super",
        showName: "百度"
      }
    },
    // 实例创建完成之后调用
    created: function () {
      console.log(this.name);
    },
    // el挂载实例后调用
    mounted: function () {
      console.log(this.$el);
    },
    mounted: function () {
      // 声明一个变量指向Vue实例this,保证作用域一致
      var _this = this;
      this.timer = setInterval(function () {
        // 修改时间
        _this.date = new Date();
      }, 1000);
    },
    beforeDestroy: function () {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    filters: {
      // value就是要过滤的值
      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;
      }
    },
    methods: {
      changeData: function () {
        this.showName = "gitee";
        this.changeHrefAddress("https://gitee.com/songlvjun/SongBoot");
        this.changeImgSrc("https://gitee.com/logo-black.svg?20171024");
      },
      // 更改图片源
      changeImgSrc: function (imgUrl) {
        this.imgUrl = imgUrl;
      },

      // 更改链接地址
      changeHrefAddress: function (url) {
        this.url = url;
      },

      // 设置隐藏
      handleClose: function () {
        this.close();
      },
      close: function () {
        this.isShow = false;
      }
    }
  }
  var padDate = function (value) {
    return value < 10 ? "0" + value : value;
  }
</script>

<style scoped>
    .img {
       width: 200px;
       height: 100px;
    }
</style>