methods vue过滤器 和_Vue中全局过滤器期与局部过滤器期的使用

Document

{{dt | dateFormat('') }}

{{dt | dateFormat('') }}

//全局过滤器，进行时间的格式化 Vue.filter('dateFormat', function (dateSter, pattern) {

//根据给定的时间字符串，得到特定的时间 var dt = new Date(dateSter)

//yyyy-mm-dd var y = dt.getFullYear()

var m = dt.getMonth() + 1

var d = dt.getDate()

//return y + '-' + m + '-' + d

if (pattern.toLowerCase() === 'yyyy-mm-dd') {

return `${y}-${m}-${d}`

} else {

var hh = dt.getHours()

var mm = dt.getMinutes()

var ss = dt.getSeconds()

return `${y}-${m}-${d}${hh}:${mm}:${ss}`

}

})

var vm = new Vue({

el: '#app',

data: {

dt: new Date()

},

})

var vm2 = new Vue({

el: '#app2',

data: {

dt: new Date()

},

methods: {

show(){

console.log('执行show方法')

}

},

beforeCreate() {

//这是遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它 //注意：在beforeCreate 生命周期函数执行的时候， data 和 methods 中的 数据都还没有初始化 console.log(this.dt);

},

created() {

//这是遇到的第二个生命周期函数 //在created 中 data 和 methods 都已初始化好了 //如果要调用 methods 中的方法， 或者操作 data 中的数据，最早，只能在 created 中操作 console.log(this.dt);

},

beforeMount() {

//这是遇到第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中 //在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串 console.log(this.dt);

},

mounted() {

//这是遇到的第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户可以看到渲染好的页面 //注意：mounted 是 实例创建的最后一个生命周期函数， 执行 mounted 就表示 ， 实例已经被完全创建好了 console.log(this.dt);

},

beforeUpdate() {

//这个时候，表示，我们的界面还没有被更新 数据被更新 //当执行beforeUpdate的时候，页面中的显示数据 还是旧的 此时 data 中的数据是最新的， 页面尚未和最新的数据同步 console.log(this.dt);

},

updated() {

//updated 事件 执行的时候 ， 页面和data的数据已经保持同步了 都是最新的数据 console.log(this.dt);

},

beforeDestroy() {

//当执行 beforeDestroy 钩子函数的时候，vue 实例就已经从运行阶段进入了销毁的阶段 //实例身上所有的data和所有的methods，以及过滤器 指令。。。。都处于可用状态，此时，还有没真正执行销毁的过程 },

destroyed() {

//组件已经完全销毁，此时 组件中所有的 数据，方法，指令，过滤器.....都已近不可用了 },

filters: {

//私有过滤器有两个条件【过滤器名称 和 处理函数】 //过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器 dateFormat: function (dateSter, pattern = '') {

var dt = new Date(dateSter)

var y = dt.getFullYear()//年 var m = (dt.getMonth() + 1).toString().padStart(2,'0')//月 var d = dt.getDate().toString().padStart(2,'0')//日

//return y + '-' + m + '-' + d

if (pattern.toLowerCase() === 'yyyy-mm-dd') {

return `${y}-${m}-${d}`

} else {

var hh = dt.getHours().toString().padStart(2,'0')//时 var mm = dt.getMinutes().toString().padStart(2,'0')//分 var ss = dt.getSeconds().toString().padStart(2,'0')//秒 return `${y}-${m}-${d}${hh}:${mm}:${ss}`

}

}

}

})