过滤器
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—————–vbind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、class 等,本节只介绍基本章节，后面章节会更加深入详细讲述
v-on——————它用来绑定事件监听器v-on具体介绍
在普通元素上， von 可以监听原生的 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
