一.过滤器
(1)全局使用
1> 添加moment 模块 npm i moment
2> 在main.js中 通过 Vue.fileter 定义一个全局的过滤器
import moment from "moment";
Vue.filter("date", (val, type = "YYYY-MM-DD") => {
return moment(val).format(type);
});
3>HelloWorld.vue使用
<h1>{{ time | date("YYYY") }}</h1>
(2) 局部使用
1>HelloWorld.vue
<template> <div class="hello"> <h1>{{ time | date("YYYY") }}</h1> <h2>{{ time | date1("YYYY-MM") }}</h2> </div> </template> <script> import moment from "moment"; export default { name: "HelloWorld", data() { return { time: 1582169602000, }; }, filters: { date1: function(val) { return moment(val).format("YYYY-MM-DD"); }, // kk(val, type = "YYYY-MM-DD") { // return moment(val).format(type); // }, }, props: { msg: String, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>
结论:全局和局部是可以共存的,同一个模块也可以在不同的页面进行导入
若报错,可能是引用模块后没有被使用的问题
二.自定义指令
(1)全局定义
1>在main.js中 通过 Vue.fileter 定义一个全局的指令
Vue.directive("red", { inserted(el) { el.style.backgroundColor = "red"; }, });
2>在HelloWrold.vue中使用
<h1 v-red>{{ time | date("YYYY") }}</h1>
(2)局部定义
1>HelloWorld.vue文件
<input type="text" v-focus />
export default { name: "HelloWorld", data() { return { time: 1582169602000, }; }, directives: { focus: { inserted(el) { el.focus(); },
update(el)
{
el.focus();
} }, }, filters: { date1: function(val) { return moment(val).format("YYYY-MM-DD"); }, }, props: { msg: String, }, };