Vue（六）-- 过滤器、常用内置指令、自定义指令
1.过滤器
--1.1使用过滤器显示格式化日期时间
- bootcdn:可以搜索一些插件的js引入地址：(https://www.bootcdn.cn/)
- 推荐格式化日期插件:moment.js (http://momentjs.cn/)
- js引入地址：
- 定义过滤器
Vue.filter(filterName,function(value[,arg1,arg2,...]){
//进行一定的数据处理
return newValue
}) - 使用过滤器
----1.1.1代码示例
可以传入格式化日期模板
<body>
<div id="test">
<h2>
显示格式化的日期时间
</h2>
<p>{{date}}</p>
<p>{{date | dateString}}</p>
<p>{{date | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript">
//自定义过滤器
Vue.filter('dateString',function(value,format){//Vue为函数对象
return moment(value).format(format||'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el:'#test',
data:{
date:new Date()
}
})
</script>
</body>
- 除了上述的格式化日期传参，还可以使用形参默认值
Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){//Vue为函数对象
return moment(value).format(format)
})
new Vue({
el:'#test',
data:{
date:new Date()
}
})
2.常用内置指令
指令属性在解析之前还在在之后就没了
- v:text 更新元素的textContent
- v-html 更新元素的innerHTML
- v-if 如果为true，当前标签才会输出到页面
- v-else：如果为false，当前标签才会输出到页面
- v-show: 通过控制display样式来控制显示/隐藏
- v-for: 遍历数组/对象
- v-on: 绑定事件监听，一般简写为@
- v-bind:强制绑定解析表达式，可以省略b-bind
- v-model:双向数据绑定
- ref：指定唯一标识，vue对象通过$els属性访问这个元素对象
--v-cloak:防止闪现，与css配合：[v-cloak]
- 何为闪现
在页面的初次加载的过程中，会有'{{xxx}}'显示 - 解决：使用v-clock
利用了指令属性在Vue解析之前还在后面就消除的原理，和css搭配
当Vue解析完成之后v-clock就消除了，自然css语句也就没了意义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
[v-cloak]{
dispaly:none;
}
</style>
</head>
<body>
<div id="example">
<p v-cloak>{{msg}}</p>
</div>
</body>
</html>
3.自定义指令
指令名不包含‘v-’
1.注册全局指令(针对所有的Vue实例)
Vue.directive('my-directive',function(el,binging){
el.innerHTML = binding.value.toupperCase()
})
2.注册局部指令（针对特定的实例）
directives:{
'my-directive':{
bind(el,binding){
el.innerHTML = binding.value.toupperCase()
}
}
}
3.使用指令
v-my-directive='xxx'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="test2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
<script type="text/javascript">
// 指定全局指令
// el:指令属性所在的标签对象
// binding：包含指令相关信息数据的对象
Vue.directive('upper-text',function(el,binding){
console.log(el,binding)
el.textContent = binding.value.toUpperCase()
})
new Vue({
el:'#test1',
data:{
msg1:'Hello World!'
}
})
new Vue({
el:'#test2',
data:{
msg2:'Just do it!'
},
//注册局部指令
deriectives:{
/* ES6语法
'lower-text’(el,binding){
el.textContent = binding.value.toLowerCase()
}
*/
'lower-text':function(el,binding){
el.textContent = binding.value.toLowerCase()
}
}
})
</script>
</body>
</html>
