vue_过滤器.指令和事件,语法糖

例子一

在页面中实时显示当前的时间

var app = new Vue({
        el: "#dateApp",
        data: {
            date: new Date()
        },
        mounted: function () {
            var _this = this; //this代表的就是vue;
            //setInterval();定时器
            this.timer = setInterval(function () {
                _this.date = new Date()
            }, 1000)
        }
    })

例子二

过滤器修改date的属性值
这时候图片出现了这种形式的过滤页面

image.png

    /* 需求:在页面中实时显示当前时间*/
    //在月份，日期，小时，小于10的时候补0
    var plusDate = function (value) {
        return value < 10 ? '0' + value : value
    }
    var app = new Vue({
        el: "#dateApp",
        data: {
            date: new Date()
        },
        //定义过滤器
        filters: {
            //这里的value就是需要过滤的数据
            formatDate: function (value) {
                //将字符串转化为date类型
                var date = new Date(value);
                var year = date.getFullYear(); //年
                var month = plusDate(date.getMonth() + 1) //月
                var day = plusDate(date.getDate()) //日
                var hours = plusDate(date.getHours()) //时
                var min = plusDate(date.getMinutes()) //分
                var sec = plusDate(date.getSeconds()) //秒
                //将整理好的数据返回
                return year + '--' + month + '--' + day + '--' + hours + '--' + min + '--' + sec
            }
        },
        mounted: function () {
            var _this = this
            this.timer = setInterval(function () {
                _this.date = new Date()
            }, 1000)
        },
        beforeDestroy: function () {
            clearInterval(this.timer)
        }
    })

过滤器

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

  {{date | formatDate('66','99')}}
  var app = new Vue({
        el: "#dateApp",
        data: {
            date: new Date()
        },
        //定义过滤器
        filters: {
            //这里的value就是需要过滤的数据
            formatDate: 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 hours = plusDate(date.getHours()) //时
                var min = plusDate(date.getMinutes()) //分
                var sec = plusDate(date.getSeconds()) //秒
                //将整理好的数据返回
                return year + '--' + month + '--' + day + '--' + hours + '--' + min + '--' + sec

            }
        },
        mounted: function () {
            var _this = this
            this.timer = setInterval(function () {
                _this.date = new Date()
            }, 1000)
        },
        beforeDestroy: function () {
            clearInterval(this.timer)
        }
    }) 

指令和事件

指令（ 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-text

{{apple}}

image.png

v-html

image.png

v-bind

v-on

 {{countnum}}

语法糖

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

• v-bind ------> : (冒号)
  v-on: -----> @

v-text,v-html,v-bind,v-on,过滤器的运用

    

        

        

        

        {{num}}

        {{date | formatedate}}
    

想访问一个name为app的vue实例的el选项，下列正确的是？

app.$el

第一次页面加载会触发哪几个钩子？

beforeCreate created beforeMount mounted