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
vtext:—————解析文本和{{ }} 作用一样
vhtml:————— 解析html
vbind—————–vbind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、
class 等,本节只介绍基本章节，后面章节会更加深入详细讲述
von——————它用来绑定事件监听器

v-on具体介绍

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

v-text

{{apple}}<br>
<span v-text='apple'></span>

image.png

v-html

 <span v-text='banaba'></span><br>
<span v-html='banaba'></span><br>
<script>
var app = new Vue({
        data: {
            date: new Date(),
            apple: '苹果',
            banaba: '<span style="color: yellow;">香蕉</sapm> ',
            className: 'transRed'
        }
    })
</script>

image.png

v-bind

<div v-bind:class="className"></div>
<script>
var app = new Vue({
        data: {
            date: new Date(),
            apple: '苹果',
            banaba: '<span style="color: yellow;">香蕉</sapm> ',
            className: 'transRed'
        }
    })
</script>

v-on

<body>
<button v-on:click="count"> {{countnum}}</button>
</body>
<script>
var app = new Vue({
        methods: {
            count: function () {
                this.countnum = this.countnum + 1;
            }
        },
    })
</script>

语法糖

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

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

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

<body>
    <div id="content">
        <div v-text='text'></div>
        <div v-html='html'></div>
        <div v-bind:class='classname'></div>
        <button v-on:click="count">{{num}}</button><br>
        {{date | formatedate}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#content',
        data: {

            text: 'v-text 文本',
            html: '<sapn>v-html 我添加了一个html<span>',
            classname: 'change',
            num: 0,
            date: new Date()
        },
        methods: {
            count: function () {
                this.num = this.num + 1
            }
        },
        filters: {
            formatedate: function (value) {
                console.log(value)
                return value
            }
        }
    })
</script>

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

app.$el

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

beforeCreate created beforeMount mounted