v html 绑定事件参数,vue笔记2 -过滤器，v-­text ，v-­html ，v­-bind，v-on指令

一、过滤器

1、语法：

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，

经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。

2、过滤的规则是自定义

的， 通过给 Vue 实例添加选项 filters 来设置

过滤器：{{ data | filter1 |filter2}}

3、实例

需求是 实时显示当前时间

Document

{{date}} 原始数据

{{date | formatDate}} 过滤后的数据

var plusDate =function(value){

return value>10?value:'0'+value

}

//判断传入的数据是否是个位数，是个位数就补0

var app=new Vue({

el:'#aaa',

data:{

date:new Date(),

},

mounted:function(){

var _this=this

this.timer=setInterval(function(){

_this.date = new Date()

},1000) //设置定时器，一秒输出一次

},

beforeDestroy:function (){

if(this.timer){

clearInterval(this.timer)

} //在实例销毁，清除定时器

},

filters:{

formatDate:function(value){

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())

return year +'--'+month+'--'+day +' '+hour+':'+min+':'+sec

}

} //在filters对象定义所有过滤器，过滤器formatDate是一个函数，必须的参数是value值，其他参数是 {{date | formatDate(66,69)}} ,过滤器传入的数据。注意使用过滤器，传入的参数不用写value

})

4、过滤器的参数

{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和

第三个参数

{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和 第三个参数

filters:{

formatDate:function(value,a,b){ //formatDate是过滤器的名字，会有其他的过滤器

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+a+b;

}

},

结果会同时输出ab

我特别容易写错month，和Date不加大写

二、指令和事件

指令( Directives )是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们

快速完成DOM操作。循环渲染。显示和隐藏

本 节目标 v-text , v-html , v-bind , v-on

1、v-­text:—————­解析文本 和{{ }} 作用一样

2、v-­html:————— 把数据当成 html 解析

3、v­-bind—————–v­-bind 的基本用途是**动态更新 HTML 元素上的属性，比如 id 、

class** 等

4、v-­on——————它用来 绑定事件监听器

在普通元素上， v­-on 可以监听原生的 DOM 事件，除了 click 外，还有

dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都

写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向

的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数

据

vue中用 到的所有方法都定义在methods中

.transRed{

background-color:red;

height:30px;

}

{{countNum}}

var app2=new Vue({

el:'#abc',

data:{

content:'fff',

contentHtml:'我是html',

className:'transRed', //提前定义一个transred的属性

countNum:0

},

methods:{

count:function(){

this.countNum +=1

}//点击按钮加一

}

})

4、语法糖

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

序开发。

v-bind ——> : (冒号)

v-on ——> @