From 6555c46f0fe9c99b0e008a0bacf3e3532bb07105 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Sat, 14 Jun 2025 22:25:00 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=2013-=E8=BF=87=E6=BB=A4=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue2-tutorials/import-script/1-模板语法.html | 46 +- vue2-tutorials/import-script/13-过滤器.html | 51 ++ vue2-tutorials/import-script/13-过滤器.md | 143 ++++++ vue2-tutorials/import-script/js/dayjs.min.js | 481 +++++++++++++++++++ 4 files changed, 697 insertions(+), 24 deletions(-) create mode 100644 vue2-tutorials/import-script/13-过滤器.html create mode 100644 vue2-tutorials/import-script/13-过滤器.md create mode 100644 vue2-tutorials/import-script/js/dayjs.min.js diff --git a/vue2-tutorials/import-script/1-模板语法.html b/vue2-tutorials/import-script/1-模板语法.html index b51dd83..6a69d7f 100644 --- a/vue2-tutorials/import-script/1-模板语法.html +++ b/vue2-tutorials/import-script/1-模板语法.html @@ -1,34 +1,32 @@ - - - - + + + 模板语法 - + - +
-

插值语法

-

你好：{{name}}

-
+

插值语法

+

你好：{{name}}

+
-

指令语法

- v2.cn.vuejs.org +

指令语法

+ v2.cn.vuejs.org - - v2.cn.vuejs.org + + v2.cn.vuejs.org
- - - - \ No newline at end of file + el: "#app", + data: { + name: "Bunny", + url: "https://v2.cn.vuejs.org/", + }, + }); + + diff --git a/vue2-tutorials/import-script/13-过滤器.html b/vue2-tutorials/import-script/13-过滤器.html new file mode 100644 index 0000000..d3f990f --- /dev/null +++ b/vue2-tutorials/import-script/13-过滤器.html @@ -0,0 +1,51 @@ + + + + + + + + 过滤器 + + +
+ +

现在是：{{time | timeFormater}}

+

现在是：{{time | timeFormater("YYYY年MM月DD日 HH:mm:ss")}}

+

+ 现在是：{{time | timeFormater("YYYY年MM月DD日 HH:mm:ss") | + timeFormaterSlice}} +

+ + +

+ 使用全局过滤器：{{message | globeTimeFormaterSlice}} +

+
+ + + + diff --git a/vue2-tutorials/import-script/13-过滤器.md b/vue2-tutorials/import-script/13-过滤器.md new file mode 100644 index 0000000..5ebab63 --- /dev/null +++ b/vue2-tutorials/import-script/13-过滤器.md @@ -0,0 +1,143 @@ +# Vue2 过滤器(Filter)使用指南 + +## 一、基本概念 + +过滤器(Filters)是Vue2中用于文本格式化处理的特殊函数，可以在模板中使用管道符(`|`)对数据进行转换处理。 + +## 二、代码示例解析 + +```html +
+ +

现在是：{{time | timeFormater}}

+ + +

现在是：{{time | timeFormater("YYYY年MM月DD日 HH:mm:ss")}}

+ + +

现在是：{{time | timeFormater("YYYY年MM月DD日 HH:mm:ss") | timeFormaterSlice}}

+ + +

+ 使用全局过滤器：{{message | globeTimeFormaterSlice}} +

+
+ + +``` + +## 三、核心特性 + +### 1. 过滤器类型 + +| 类型 | 定义位置 | 作用域 | 示例 | +| ---------- | ---------------------- | -------- | --------------------------- | +| 局部过滤器 | Vue实例的`filters`选项 | 当前组件 | `{{ data | localFilter }}` | +| 全局过滤器 | `Vue.filter()` | 所有组件 | `{{ data | globalFilter }}` | + +### 2. 使用方式 + +| 方式 | 语法 | 说明 | +| -------- | --------------------------------- | ------------------ | +| 基本使用 | `{{ data | filter }}` | 单个过滤器 | +| 传参使用 | `{{ data | filter(arg1, arg2) }}` | 可传递额外参数 | +| 链式调用 | `{{ data | filter1 | filter2 }}` | 多个过滤器依次处理 | + +## 四、最佳实践 + +### 1. 命名规范 +- 使用动词+名词形式（如`formatDate`、`truncateText`） +- 全局过滤器加前缀（如`globe_`）避免命名冲突 + +### 2. 适用场景 +- 文本格式化（日期、货币等） +- 数据简单转换（截取、大小写转换等） +- 显示内容的修饰（添加前缀/后缀） + +### 3. 注意事项 +- **不能**在`v-model`中使用 +- **避免**复杂业务逻辑，复杂处理应使用计算属性 +- **推荐**纯函数实现，不要修改原始数据 + +## 五、高级用法 + +### 1. 动态过滤器名 +```javascript +filters: { + dynamicFilter(val, filterName) { + return this[filterName](val); + } +} +``` + +### 2. 过滤器工厂函数 +```javascript +function createPrefixFilter(prefix) { + return function(val) { + return prefix + val; + } +} + +Vue.filter('withPrefix', createPrefixFilter('Info: ')); +``` + +### 3. 结合计算属性使用 +```javascript +computed: { + formattedTime() { + return this.$options.filters.timeFormater(this.time); + } +} +``` + +## 六、与Vue3的区别 + +| 特性 | Vue2 | Vue3 | +| ---------- | ------ | ----------------- | +| 过滤器支持 | ✅ 支持 | ❌ 移除 | +| 替代方案 | - | 使用方法/计算属性 | + +## 七、常见问题 + +1. **为什么过滤器不生效？** + - 检查过滤器名称拼写 + - 确认是否在正确的作用域定义 + - 确保返回值不是undefined + +2. **如何调试过滤器？** + ```javascript + filters: { + debugFilter(val) { + console.log('Filter input:', val); + return val; + } + } + ``` + +3. **过滤器能接收多个参数吗？** + ```html + + {{ data | filter(arg1, arg2) }} + ``` diff --git a/vue2-tutorials/import-script/js/dayjs.min.js b/vue2-tutorials/import-script/js/dayjs.min.js new file mode 100644 index 0000000..092d2ff --- /dev/null +++ b/vue2-tutorials/import-script/js/dayjs.min.js @@ -0,0 +1,481 @@ +!(function (t, e) { + "object" == typeof exports && "undefined" != typeof module + ? (module.exports = e()) + : "function" == typeof define && define.amd + ? define(e) + : ((t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs = + e()); +})(this, function () { + "use strict"; + var t = 1e3, + e = 6e4, + n = 36e5, + r = "millisecond", + i = "second", + s = "minute", + u = "hour", + a = "day", + o = "week", + c = "month", + f = "quarter", + h = "year", + d = "date", + l = "Invalid Date", + $ = + /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, + y = + /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, + M = { + name: "en", + weekdays: + "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), + months: + "January_February_March_April_May_June_July_August_September_October_November_December".split( + "_" + ), + ordinal: function (t) { + var e = ["th", "st", "nd", "rd"], + n = t % 100; + return "[" + t + (e[(n - 20) % 10] || e[n] || e[0]) + "]"; + }, + }, + m = function (t, e, n) { + var r = String(t); + return !r || r.length >= e ? t : "" + Array(e + 1 - r.length).join(n) + t; + }, + v = { + s: m, + z: function (t) { + var e = -t.utcOffset(), + n = Math.abs(e), + r = Math.floor(n / 60), + i = n % 60; + return (e <= 0 ? "+" : "-") + m(r, 2, "0") + ":" + m(i, 2, "0"); + }, + m: function t(e, n) { + if (e.date() < n.date()) return -t(n, e); + var r = 12 * (n.year() - e.year()) + (n.month() - e.month()), + i = e.clone().add(r, c), + s = n - i < 0, + u = e.clone().add(r + (s ? -1 : 1), c); + return +(-(r + (n - i) / (s ? i - u : u - i)) || 0); + }, + a: function (t) { + return t < 0 ? Math.ceil(t) || 0 : Math.floor(t); + }, + p: function (t) { + return ( + { M: c, y: h, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: f }[t] || + String(t || "") + .toLowerCase() + .replace(/s$/, "") + ); + }, + u: function (t) { + return void 0 === t; + }, + }, + g = "en", + D = {}; + D[g] = M; + var p = "$isDayjsObject", + S = function (t) { + return t instanceof _ || !(!t || !t[p]); + }, + w = function t(e, n, r) { + var i; + if (!e) return g; + if ("string" == typeof e) { + var s = e.toLowerCase(); + D[s] && (i = s), n && ((D[s] = n), (i = s)); + var u = e.split("-"); + if (!i && u.length > 1) return t(u[0]); + } else { + var a = e.name; + (D[a] = e), (i = a); + } + return !r && i && (g = i), i || (!r && g); + }, + O = function (t, e) { + if (S(t)) return t.clone(); + var n = "object" == typeof e ? e : {}; + return (n.date = t), (n.args = arguments), new _(n); + }, + b = v; + (b.l = w), + (b.i = S), + (b.w = function (t, e) { + return O(t, { locale: e.$L, utc: e.$u, x: e.$x, $offset: e.$offset }); + }); + var _ = (function () { + function M(t) { + (this.$L = w(t.locale, null, !0)), + this.parse(t), + (this.$x = this.$x || t.x || {}), + (this[p] = !0); + } + var m = M.prototype; + return ( + (m.parse = function (t) { + (this.$d = (function (t) { + var e = t.date, + n = t.utc; + if (null === e) return new Date(NaN); + if (b.u(e)) return new Date(); + if (e instanceof Date) return new Date(e); + if ("string" == typeof e && !/Z$/i.test(e)) { + var r = e.match($); + if (r) { + var i = r[2] - 1 || 0, + s = (r[7] || "0").substring(0, 3); + return n + ? new Date( + Date.UTC( + r[1], + i, + r[3] || 1, + r[4] || 0, + r[5] || 0, + r[6] || 0, + s + ) + ) + : new Date( + r[1], + i, + r[3] || 1, + r[4] || 0, + r[5] || 0, + r[6] || 0, + s + ); + } + } + return new Date(e); + })(t)), + this.init(); + }), + (m.init = function () { + var t = this.$d; + (this.$y = t.getFullYear()), + (this.$M = t.getMonth()), + (this.$D = t.getDate()), + (this.$W = t.getDay()), + (this.$H = t.getHours()), + (this.$m = t.getMinutes()), + (this.$s = t.getSeconds()), + (this.$ms = t.getMilliseconds()); + }), + (m.$utils = function () { + return b; + }), + (m.isValid = function () { + return !(this.$d.toString() === l); + }), + (m.isSame = function (t, e) { + var n = O(t); + return this.startOf(e) <= n && n <= this.endOf(e); + }), + (m.isAfter = function (t, e) { + return O(t) < this.startOf(e); + }), + (m.isBefore = function (t, e) { + return this.endOf(e) < O(t); + }), + (m.$g = function (t, e, n) { + return b.u(t) ? this[e] : this.set(n, t); + }), + (m.unix = function () { + return Math.floor(this.valueOf() / 1e3); + }), + (m.valueOf = function () { + return this.$d.getTime(); + }), + (m.startOf = function (t, e) { + var n = this, + r = !!b.u(e) || e, + f = b.p(t), + l = function (t, e) { + var i = b.w( + n.$u ? Date.UTC(n.$y, e, t) : new Date(n.$y, e, t), + n + ); + return r ? i : i.endOf(a); + }, + $ = function (t, e) { + return b.w( + n + .toDate() + [t].apply( + n.toDate("s"), + (r ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e) + ), + n + ); + }, + y = this.$W, + M = this.$M, + m = this.$D, + v = "set" + (this.$u ? "UTC" : ""); + switch (f) { + case h: + return r ? l(1, 0) : l(31, 11); + case c: + return r ? l(1, M) : l(0, M + 1); + case o: + var g = this.$locale().weekStart || 0, + D = (y < g ? y + 7 : y) - g; + return l(r ? m - D : m + (6 - D), M); + case a: + case d: + return $(v + "Hours", 0); + case u: + return $(v + "Minutes", 1); + case s: + return $(v + "Seconds", 2); + case i: + return $(v + "Milliseconds", 3); + default: + return this.clone(); + } + }), + (m.endOf = function (t) { + return this.startOf(t, !1); + }), + (m.$set = function (t, e) { + var n, + o = b.p(t), + f = "set" + (this.$u ? "UTC" : ""), + l = ((n = {}), + (n[a] = f + "Date"), + (n[d] = f + "Date"), + (n[c] = f + "Month"), + (n[h] = f + "FullYear"), + (n[u] = f + "Hours"), + (n[s] = f + "Minutes"), + (n[i] = f + "Seconds"), + (n[r] = f + "Milliseconds"), + n)[o], + $ = o === a ? this.$D + (e - this.$W) : e; + if (o === c || o === h) { + var y = this.clone().set(d, 1); + y.$d[l]($), + y.init(), + (this.$d = y.set(d, Math.min(this.$D, y.daysInMonth())).$d); + } else l && this.$d[l]($); + return this.init(), this; + }), + (m.set = function (t, e) { + return this.clone().$set(t, e); + }), + (m.get = function (t) { + return this[b.p(t)](); + }), + (m.add = function (r, f) { + var d, + l = this; + r = Number(r); + var $ = b.p(f), + y = function (t) { + var e = O(l); + return b.w(e.date(e.date() + Math.round(t * r)), l); + }; + if ($ === c) return this.set(c, this.$M + r); + if ($ === h) return this.set(h, this.$y + r); + if ($ === a) return y(1); + if ($ === o) return y(7); + var M = ((d = {}), (d[s] = e), (d[u] = n), (d[i] = t), d)[$] || 1, + m = this.$d.getTime() + r * M; + return b.w(m, this); + }), + (m.subtract = function (t, e) { + return this.add(-1 * t, e); + }), + (m.format = function (t) { + var e = this, + n = this.$locale(); + if (!this.isValid()) return n.invalidDate || l; + var r = t || "YYYY-MM-DDTHH:mm:ssZ", + i = b.z(this), + s = this.$H, + u = this.$m, + a = this.$M, + o = n.weekdays, + c = n.months, + f = n.meridiem, + h = function (t, n, i, s) { + return (t && (t[n] || t(e, r))) || i[n].slice(0, s); + }, + d = function (t) { + return b.s(s % 12 || 12, t, "0"); + }, + $ = + f || + function (t, _e, n) { + var r = t < 12 ? "AM" : "PM"; + return n ? r.toLowerCase() : r; + }; + return r.replace(y, function (t, r) { + return ( + r || + (function (t) { + switch (t) { + case "YY": + return String(e.$y).slice(-2); + case "YYYY": + return b.s(e.$y, 4, "0"); + case "M": + return a + 1; + case "MM": + return b.s(a + 1, 2, "0"); + case "MMM": + return h(n.monthsShort, a, c, 3); + case "MMMM": + return h(c, a); + case "D": + return e.$D; + case "DD": + return b.s(e.$D, 2, "0"); + case "d": + return String(e.$W); + case "dd": + return h(n.weekdaysMin, e.$W, o, 2); + case "ddd": + return h(n.weekdaysShort, e.$W, o, 3); + case "dddd": + return o[e.$W]; + case "H": + return String(s); + case "HH": + return b.s(s, 2, "0"); + case "h": + return d(1); + case "hh": + return d(2); + case "a": + return $(s, u, !0); + case "A": + return $(s, u, !1); + case "m": + return String(u); + case "mm": + return b.s(u, 2, "0"); + case "s": + return String(e.$s); + case "ss": + return b.s(e.$s, 2, "0"); + case "SSS": + return b.s(e.$ms, 3, "0"); + case "Z": + return i; + } + return null; + })(t) || + i.replace(":", "") + ); + }); + }), + (m.utcOffset = function () { + return 15 * -Math.round(this.$d.getTimezoneOffset() / 15); + }), + (m.diff = function (r, d, l) { + var $, + y = this, + M = b.p(d), + m = O(r), + v = (m.utcOffset() - this.utcOffset()) * e, + g = this - m, + D = function () { + return b.m(y, m); + }; + switch (M) { + case h: + $ = D() / 12; + break; + case c: + $ = D(); + break; + case f: + $ = D() / 3; + break; + case o: + $ = (g - v) / 6048e5; + break; + case a: + $ = (g - v) / 864e5; + break; + case u: + $ = g / n; + break; + case s: + $ = g / e; + break; + case i: + $ = g / t; + break; + default: + $ = g; + } + return l ? $ : b.a($); + }), + (m.daysInMonth = function () { + return this.endOf(c).$D; + }), + (m.$locale = function () { + return D[this.$L]; + }), + (m.locale = function (t, e) { + if (!t) return this.$L; + var n = this.clone(), + r = w(t, e, !0); + return r && (n.$L = r), n; + }), + (m.clone = function () { + return b.w(this.$d, this); + }), + (m.toDate = function () { + return new Date(this.valueOf()); + }), + (m.toJSON = function () { + return this.isValid() ? this.toISOString() : null; + }), + (m.toISOString = function () { + return this.$d.toISOString(); + }), + (m.toString = function () { + return this.$d.toUTCString(); + }), + M + ); + })(), + k = _.prototype; + return ( + (O.prototype = k), + [ + ["$ms", r], + ["$s", i], + ["$m", s], + ["$H", u], + ["$W", a], + ["$M", c], + ["$y", h], + ["$D", d], + ].forEach(function (t) { + k[t[1]] = function (e) { + return this.$g(e, t[0], t[1]); + }; + }), + (O.extend = function (t, e) { + return t.$i || (t(e, _, O), (t.$i = !0)), O; + }), + (O.locale = w), + (O.isDayjs = S), + (O.unix = function (t) { + return O(1e3 * t); + }), + (O.en = D[g]), + (O.Ls = D), + (O.p = {}), + O + ); +});