vue.js-过滤器、指令、事件、语法糖

小练习

• 需求： 在页面中实时显示当前时间

    {{date}}

过滤器

• Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格
  式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义
  的， 通过给 Vue 实例添加选项 filters 属性来设置

• 过滤器的串联
  过滤器：{{ data | filter1 |filter2}}

• 过滤器的参数
  {{date | formatDate(‘argue’，‘arg2’)}} 中的第一个和第二个参数，分别对应过滤器的第二个和第三个参数。例如：
  {{date | formatDate(66,99)}}和formatDate: function(value,a,b)中，a=66,b=99

• 对date中的数据进行处理

    {{date}}
    

    
    {{date | formatDate}}
//过滤器
var plusDate = function(value){
      return value < 10 ? '0' + value : value //如果value < 10返回 0+value,大于10，返回value
    };
    var app = new Vue({
        el: "#dataApp",
        data: {
          date: new Date()
        },
        //定义过滤器,因为过滤器不只是一个，所以生成对象
        filters: {
          //value是默认属性，必须添加,va
            formatDate: function(value){
              //将字符串转化成date类型
                var date = new Date(value);
                var year = date.getFullYear(); //年
                var month = plusDate(date.getMonth() + 1);//月
                var day = plusDate(date.getDay()); //日
                var hours = plusDate(date.getHours()); //时
                var min = plusDate(date.getMinutes()); //分
                var sec = plusDate(date.getSeconds()) //秒
                //将整理好的数据返回
                return year + '--' + month + '--' + day + '--' + hours + '--' + min + '--' + sec;

          }
        },
.....

指令和事件

指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们
快速完成DOM操作。循环渲染。显示和隐藏

• v-­text:—————­解析文本 和{{ }} 作用一样，只会解析文本，把字符串直接渲染到页面上。
  在标签中以属性的形式引入v-text = 'apple',那么在data中定义的apple的内容就会渲染到页面上。
  {{apple}}
和作用一模一样
• v-­html:————— 解析html
  
• v-­bind—————–v-­bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、
  class 等。v-bind只能绑定活的属性！

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

vue中用到的所有方法都定义在methods中，和data平级。

• 指令具体的代码实现

    

        获取message数据：{{message}}

        v-text:解析文本：

        v-text解析HTML，显示的HTML字符串而不是相应地元素渲染

        

        v-html解析HTML:

        v-bind绑定活的属性：

        v-bind的语法糖:

        v-on绑定事件：{{countnum}}

        v-on绑定事件的语法糖：{{countnum}}
    
    

语法糖

语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 ， 从而更加方便程序开发。

v-bind: 可以转换成 :
v-on: 可以转换成@