1、过滤器的定义
Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “
|” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添加选项 filters 来设置。
1、过滤器：{{ date | filter1 | filter2}} 后面可以接一个过滤器或者多个过滤器，filter1是第一个过滤器、filter2是第二个过滤器
示例：{{date | formatDate(66,99)}} 其中formatDate是一个过滤器名字，紧接着第一个和第二个参数，66和99分别对应过滤器函数的第二个和第三个参数，过滤器函数第一个参数其实是date
结合上一篇说到的，Vue实现了数据双向绑定，下面一则实例可知需求就是要求能显示时间并实现同步刷新功能。
<div id="dateApp">
{{date}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({ //注意这里的Vue中的V是大写的
el: "#dateApp",
data: {
date: new Date()
},
mounted: function () { //mounted上实例已经挂载好的
var _this = this; //这里this就是指Vue本身
this.timer = setInterval(function () {
_this.date = new Date()
}, 1000)
},
beforeDestroy:function(){ //消除时间循环实例
if(this.timer){
clearInterval(this.timer)
}
}
})
</script>
通过上述例子，我们开始正式引入过滤器实例，对上述实例产生的结果，进行过滤出来，最终能实现我们想要的效果。下面是过滤条件和结果：
<div id="dateApp">
<!-- | 后面接的是过滤器名字 -->
{{date | formatDate}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
// 在月、 日 、小时、分 、秒小于10情况下补零
var plusDate=function(value){
return (value>=10? value : "0"+value)
}
var app = new Vue({
el: "#dateApp",
data: {
date: new Date()
},
filters:{
//这里value就是要过滤的数据
formatDate:function(value){
//将传进来的日期字符转化成date类型
var date=new Date(value);
console.log(date)
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
}
},
mounted: function () {
var _this = this;
this.timer = setInterval(function () {
_this.date = new Date()
}, 1000)
},
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer)
}
}
})
</script>
2、指令和事件
指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们快速完成DOM操作。循环渲染、显示和隐藏
1、v-text—解析文本 和{{ }} 作用一样
2、v-html—解析html
3、v-bind—基本用途是动态更新 HTML 元素上的属性，比如 id 、class 等,本节只介绍基本章节，后面再深入详细讲述
4、v-on—它用来绑定事件监听器
（1）、v-text的使用
<div id="app">
{{mgs}} //通过文本插值{{}}方式获取“你好”
<span v-text='mgs'></span> //通过v-text方法获取到“你好”，两者效果一样
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
mgs: "你好"
}
})
</script>
（2）、v-html的使用
<div id="app">
{{apple}} //只能拿到对应的apple中文本内容
<br>
<span v-html='apple'></span> //v-html能将apple中HTML样式在页面中渲染出来
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
apple:'<span style="color:red">苹果</span>'
}
})
</script>
v-html将苹果渲染成红色
（3）、v-bind的使用
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.transRed {
background: red;
/* 这里要给个高度，才能看到div变化 */
height: 50px;
}
</style>
</head>
<body>
<div id='app'>
<!-- //v-bind后面接的是冒号：，其中用{{}}获取都是错的 -->
<div v-bind:class='className'></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"> </script>
<script>
var app = new Vue({
el: "#app",
data: {
className: 'transRed'
}
})
</script>
</body>
（4）、v-on的使用
<div id='app'>
<!-- v-on监听click事件，实现每次点击一次就加1操作 -->
<button v-on:click='count'>{{countnum}}</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
countnum: 0 //定义countnum值开始是0，这里不能写成“0”字符串
},
// vue中用到的所有方法都定义在methods中
methods: {
count: function () {
this.countnum = this.countnum + 1;
}
}
})
</script>
von具体介绍
在普通元素上， von 可以监听原生的 DOM 事件，除了 click 外，还有dblclick、keyup, mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据
3、语法糖
语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 ， 从而更加方便程序开发。
1、v-bind ——> : (冒号) 这里可以将v-bind改成：使用
2、v-on ——> @ 这里可以将v-on改成@使用
网友评论