过滤器

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添加选项 filters 来设置
过滤器：{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和第三个参数

指令和事件

指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们快速完成DOM操作。循环渲染。显示和隐藏
本节目标 v-text , v-html , v-bind , v-on
v­-text:—————­解析文本 和{{ }} 作用一样
v­-html:————— 解析html
v­-bind—————–v­bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、class 等,本节只介绍基本章节，后面章节会更加深入详细讲述
v­-on——————它用来绑定事件监听器

v­-on具体介绍
在普通元素上， v­on 可以监听原生的 DOM 事件，除了 click 外，还有
dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据

语法糖

语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 从而更加方便程序开发。
v-bind ——> : (冒号)
v-on ——> @
效果预览

  <div id="dataApp">
    <!-- 过滤器后面|后面接过滤器的名字 -->
    <!-- {{date}} <br> -->
    <!-- {{date | formateDate}} -->
    <!-- 过滤器串联 -->
    <!-- {{date | filrer1|filter2}} -->
    <!-- 过滤器参数 -->
    {{date | formateDate(66,99)}}
    <hr>
    指令和事件<br>
    v-text 
    {{apple}} <br>
    <span v-text="apple"></span> <hr>
    v-html指令 解析HTML <br>
    {{banana}}<br>
    <div v-html="banana"></div><hr>
    v-bind指令：绑定活的属性 <br>
    <div v-bind:class="className"></div> <hr>
    <div :class="className"></div> <hr>
    v-on指令：绑定事件监听器 <br>
    <!-- 为按钮添加监听事件 <br> -->
    <button v-on:click="count">{{countnum}}</button>
    <button @click="count">{{countnum}}</button>    
  </div>

var plusDate = function(value){
  return value>10? value : '0'+value
}

//需求显示当前时间
var app = new Vue({
  el: '#dataApp',
  data: {
    date: new Date(),
    apple: '苹果',
    banana: '<span style="color: yellow">香蕉</span>',
    className: 'transRed',
    countnum: 0
  },
  //定义过滤器
  filters:{
    //这里value就是要过滤的数据
    formateDate: function(value,a,b){
      //将字符串转化为date类型
      var date = new Date(value)
      var year = date.getFullYear()
      var month = plusDate(date.getMonth()+1)
      var day = plusDate(date.getDate())
      var hour = plusDate(date.getHours())
      var min = plusDate(date.getMinutes())
      var sec = plusDate(date.getSeconds())
      //console.log(date)

      return year+'年'+month+'月'+day+'日'+hour+'时'+min+'分'+sec+'秒'+a+b
    }
  },
//vue中所有的方法都定义在methods中
  methods:{
    count: function(){
      this.countnum = this.countnum + 1
    }
  },
  mounted: function(){
    var _this = this //this代表就是vue实例
    //定时器setInterval
    this.timer = setInterval(function(){
      _this.date = new Date()
    },1000)
  },
  beforeDistroy: function(){
    //如果定时器存在，清除定时器
    if(this.timer){
      clearInterval(this.timer)
    }
  }
})

image.png