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 @@
-
-
-
-
+
+
+
模板语法
-
+
-
+
-
-
-
-
\ 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
+ );
+});