vue笔记2 -过滤器，v-text ，v-html ，v-bind，v-on指令
vue笔记2 -过滤器，v-text ，v-html ，v-bind，v-on指令
一、过滤器
1、语法：
Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤， 经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。
2、过滤的规则是自定义
的， 通过给 Vue 实例添加选项 filters 来设置 过滤器：{{ data | filter1 |filter2}}
3、实例
需求是 实时显示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</head>
<body>
<div id="aaa">
{{date}} 原始数据
{{date | formatDate}} 过滤后的数据
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
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
})
</script>
</body>
</html>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中
<style>
.transRed{
background-color:red;
height:30px;
}
</style> <div id="abc">
<span v-text='content'></span>
<div v-html='contentHtml'></div>
<div v-bind:class="className"></div>
<button v-on:click="count">{{countNum}}</button>
</div>var app2=new Vue({
el:'#abc',
data:{
content:'fff',
contentHtml:'<span style="color:blue">我是html</span>',
className:'transRed', //提前定义一个transred的属性
countNum:0
},
methods:{
count:function(){
this.countNum +=1
}//点击按钮加一
}
})4、语法糖 语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 ， 从而更加方便程 序开发。 v-bind ——> : (冒号) v-on ——> @
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/dev...