2.1. 过滤器
Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格 式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义 的， 通过给 Vue 实例添加属性 filters 来设置 过滤器：{{ data | filter1 |filter2}}, {{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和 第三个参数，也就是formatDate(value, a, b)，其中value就是date，a就是66，b就是69
具体案例：
<div id="app">
没加过滤器
{{data}} <br>
<br>
加了过滤器
{{data | formData}}
</div>
<script>
//在页面日期小于10的时候补零
function plusData(value){
return value>=10 ? value : '0' + value;
}
var app = new Vue({
el: '#app',
data: {
data: new Date()
},
filters: {
formData(value){ //这里的value参数就是上面的data
var year = value.getFullYear();
var month = plusData(value.getMonth()+1)
var day = plusData(value.getDate())
var hours = plusData(value.getHours())
var min = plusData(value.getMinutes())
var sec = plusData(value.getSeconds())
return year + '-' + month + '-' + day + '-' + hours + ':' + min + ':' + sec
}
},
mounted(){
var _this = this;
_this.timer = setInterval(function(){
_this.data = new Date()
},1000)
},
beforeDestroy(){
if(this.timer){
clearInterval(this.timer)
}
}
})
最后的显示效果
2.2. 指令和事件
指令（Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们 快速完成DOM操作。循环渲染。显示和隐藏
v-text:—————解析文本 和{{ }} 作用一样
{{message}}
//等价于
<span v-text="message"></span>
v-html:————— 解析html
对于定义的变量如果它里面的数据是html的，那么为了解析它，你只能使用v-html,如：
var app = new Vue({
el: '#app',
data: {
info: '<div style="color: red;">我在这里</div>'
}
}
{{info}}
<span v-text="info"></span>
页面就会把html作为字符串全部显示出来
所以你需要使用
<span v-html="info"></span>
v-bind:—————–v-bind 的基本用途是动态更新 HTML 元素上的属性，比如id 、 class 等,本节只介绍基本章节，后面章节会更加深入详细讲述
v-on:——————它用来绑定事件监听器
<div id="app">
<button v-on:click="addOne">{{count}}</button>
</div>
var app = new Vue({
el: '#app',
data: {
data: new Date(),
count: 0
},
methods: {
addOne(){
this.count = this.count + 1
}
}
}
@wheel：鼠标滚动事件
@
2.3. 语法糖
语法糖是指在不影响功能的情况下，添加某种简洁方法实现同样的效果，从而更加方便程序开发。
v-bind ——> : (冒号)
v-on ——> @
网友评论