Vue 2x 系列之（十五）过滤器

过滤器

BootCDN：包含了一些免费、优秀的第三方类库

官网：https://www.bootcdn.cn/

moment.js：js的日期处理类库

dayjs：moment.js的轻量化解决方案，API同moment.js完全一致

引入dayjs，全局就多了一个dayjs()函数，dayjs()函数默认解析当前时间的时间戳，也可传入时间戳进行解析

注：过滤器相对于函数有什么优势？

| 管道符

过滤器的本质就是一个函数

过滤器的执行流程

注：如果过滤器只有一个参数，在调用时是可以不写()的

过滤器的第一个参数固定为管道符前面的数据

一个组件就是一个微型的vm，它比vm身上少了一些东西

一个vm+多个组件

过滤器：
	定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理【过于复杂的通过计算属性/方法实现】）。
	语法：
			1.注册过滤器：Vue.filter(name,callback)【全局注册，要求必须在创建Vue实例之前就进行注册】 或 new Vue{filters:{}}【局部注册，通过创建Vue实例传入配置项filters实现，局部过滤器除了当前Vue实例可以用，其他的Vue实例都不可以用】
			2.使用过滤器【过滤器可以用在哪】：{{ xxx | 过滤器名}} 【插值语法】 或  v-bind:属性 = "xxx | 过滤器名"【这种用的较少】
	备注：
			1.过滤器也可以接收额外参数、多个过滤器也可以串联
			2.并没有改变原本的数据, 是产生新的对应的数据

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- 计算属性实现 -->
		<h3>现在是：{{fmtTime}}</h3>
		<!-- methods实现 -->
		<h3>现在是：{{getFmtTime()}}</h3>
		<!-- 过滤器实现 -->
		<h3>现在是：{{time | timeFormater}}</h3>
		<!-- 过滤器实现（传参） -->
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		<h3 :x="msg | mySlice">尚硅谷</h3>
	</div>

	<div id="root2">
		<h2>{{msg | mySlice}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	//全局过滤器
	Vue.filter('mySlice',function(value){
		return value.slice(0,4)
	})
	
	new Vue({
		el:'#root',
		data:{
			time:1621561377603, //时间戳
			msg:'你好，尚硅谷'
		},
		computed: {
			fmtTime(){
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		methods: {
			getFmtTime(){
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		//局部过滤器
		filters:{
          	 //这里用到了ES6的形参默认值
			timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
				// console.log('@',value)
				return dayjs(value).format(str)
			}
		}
	})

	new Vue({
		el:'#root2',
		data:{
			msg:'hello,atguigu!'
		}
	})
</script>