Merge branch 'master' of github.com:luzhisheng/js_reverse

2025-04-20 03:59:57 +08:00 · 2025-03-18 23:34:43 +08:00 · 2025-03-18 23:34:43 +08:00 · 5119d4347d
commit 5119d4347d
parent 3a74895f48 a3225b9989
84 changed files with 2572 additions and 311 deletions
--- a/夜幕js逆向学习/夜幕-6-阻挠爬虫工程师的无限debugger/myjs.js
+++ b/夜幕js逆向学习/夜幕-6-阻挠爬虫工程师的无限debugger/myjs.js
@ -1,311 +0,0 @@
-var _0x4818 = ['\x63\x73\x4b\x48\x77\x71\x4d\x49', '\x5a\x73\x4b\x4a\x77\x72\x38\x56\x65\x41\x73\x79', '\x55\x63\x4b\x69\x4e\x38\x4f\x2f\x77\x70\x6c\x77\x4d\x41\x3d\x3d', '\x4a\x52\x38\x43\x54\x67\x3d\x3d', '\x59\x73\x4f\x6e\x62\x53\x45\x51\x77\x37\x6f\x7a\x77\x71\x5a\x4b\x65\x73\x4b\x55\x77\x37\x6b\x77\x58\x38\x4f\x52\x49\x51\x3d\x3d', '\x77\x37\x6f\x56\x53\x38\x4f\x53\x77\x6f\x50\x43\x6c\x33\x6a\x43\x68\x4d\x4b\x68\x77\x36\x48\x44\x6c\x73\x4b\x58\x77\x34\x73\x2f\x59\x73\x4f\x47', '\x66\x77\x56\x6d\x49\x31\x41\x74\x77\x70\x6c\x61\x59\x38\x4f\x74\x77\x35\x63\x4e\x66\x53\x67\x70\x77\x36\x4d\x3d', '\x4f\x63\x4f\x4e\x77\x72\x6a\x43\x71\x73\x4b\x78\x54\x47\x54\x43\x68\x73\x4f\x6a\x45\x57\x45\x38\x50\x63\x4f\x63\x4a\x38\x4b\x36', '\x55\x38\x4b\x35\x4c\x63\x4f\x74\x77\x70\x56\x30\x45\x4d\x4f\x6b\x77\x34\x37\x44\x72\x4d\x4f\x58', '\x48\x4d\x4f\x32\x77\x6f\x48\x43\x69\x4d\x4b\x39\x53\x6c\x58\x43\x6c\x63\x4f\x6f\x43\x31\x6b\x3d', '\x61\x73\x4b\x49\x77\x71\x4d\x44\x64\x67\x4d\x75\x50\x73\x4f\x4b\x42\x4d\x4b\x63\x77\x72\x72\x43\x74\x6b\x4c\x44\x72\x4d\x4b\x42\x77\x36\x34\x64', '\x77\x71\x49\x6d\x4d\x54\x30\x74\x77\x36\x52\x4e\x77\x35\x6b\x3d', '\x44\x4d\x4b\x63\x55\x30\x4a\x6d\x55\x77\x55\x76', '\x56\x6a\x48\x44\x6c\x4d\x4f\x48\x56\x63\x4f\x4e\x58\x33\x66\x44\x69\x63\x4b\x4a\x48\x51\x3d\x3d', '\x77\x71\x68\x42\x48\x38\x4b\x6e\x77\x34\x54\x44\x68\x53\x44\x44\x67\x4d\x4f\x64\x77\x72\x6a\x43\x6e\x63\x4f\x57\x77\x70\x68\x68\x4e\x38\x4b\x43\x47\x63\x4b\x71\x77\x36\x64\x48\x41\x55\x35\x2b\x77\x72\x67\x32\x4a\x63\x4b\x61\x77\x34\x49\x45\x4a\x63\x4f\x63\x77\x72\x52\x4a\x77\x6f\x5a\x30\x77\x71\x46\x39\x59\x67\x41\x56', '\x64\x7a\x64\x32\x77\x35\x62\x44\x6d\x33\x6a\x44\x70\x73\x4b\x33\x77\x70\x59\x3d', '\x77\x34\x50\x44\x67\x63\x4b\x58\x77\x6f\x33\x43\x6b\x63\x4b\x4c\x77\x72\x35\x71\x77\x72\x59\x3d', '\x77\x72\x4a\x4f\x54\x63\x4f\x51\x57\x4d\x4f\x67', '\x77\x71\x54\x44\x76\x63\x4f\x6a\x77\x34\x34\x37\x77\x72\x34\x3d', '\x77\x35\x58\x44\x71\x73\x4b\x68\x4d\x46\x31\x2f', '\x77\x72\x41\x79\x48\x73\x4f\x66\x77\x70\x70\x63', '\x4a\x33\x64\x56\x50\x63\x4f\x78\x4c\x67\x3d\x3d', '\x77\x72\x64\x48\x77\x37\x70\x39\x5a\x77\x3d\x3d', '\x77\x34\x72\x44\x6f\x38\x4b\x6d\x4e\x45\x77\x3d', '\x49\x4d\x4b\x41\x55\x6b\x42\x74', '\x77\x36\x62\x44\x72\x63\x4b\x51\x77\x70\x56\x48\x77\x70\x4e\x51\x77\x71\x55\x3d', '\x64\x38\x4f\x73\x57\x68\x41\x55\x77\x37\x59\x7a\x77\x72\x55\x3d', '\x77\x71\x6e\x43\x6b\x73\x4f\x65\x65\x7a\x72\x44\x68\x77\x3d\x3d', '\x55\x73\x4b\x6e\x49\x4d\x4b\x57\x56\x38\x4b\x2f', '\x77\x34\x7a\x44\x6f\x63\x4b\x38\x4e\x55\x5a\x76', '\x63\x38\x4f\x78\x5a\x68\x41\x4a\x77\x36\x73\x6b\x77\x71\x4a\x6a', '\x50\x63\x4b\x49\x77\x34\x6e\x43\x6b\x6b\x56\x62', '\x4b\x48\x67\x6f\x64\x4d\x4f\x32\x56\x51\x3d\x3d', '\x77\x70\x73\x6d\x77\x71\x76\x44\x6e\x47\x46\x71', '\x77\x71\x4c\x44\x74\x38\x4f\x6b\x77\x34\x63\x3d', '\x77\x37\x77\x31\x77\x34\x50\x43\x70\x73\x4f\x34\x77\x71\x41\x3d', '\x77\x71\x39\x46\x52\x73\x4f\x71\x57\x4d\x4f\x71', '\x62\x79\x42\x68\x77\x37\x72\x44\x6d\x33\x34\x3d', '\x4c\x48\x67\x2b\x53\x38\x4f\x74\x54\x77\x3d\x3d', '\x77\x71\x68\x4f\x77\x37\x31\x35\x64\x73\x4f\x48', '\x55\x38\x4f\x37\x56\x73\x4f\x30\x77\x71\x76\x44\x76\x63\x4b\x75\x4b\x73\x4f\x71\x58\x38\x4b\x72', '\x59\x69\x74\x74\x77\x35\x44\x44\x6e\x57\x6e\x44\x72\x41\x3d\x3d', '\x59\x4d\x4b\x49\x77\x71\x55\x55\x66\x67\x49\x6b', '\x61\x42\x37\x44\x6c\x4d\x4f\x44\x54\x51\x3d\x3d', '\x77\x70\x66\x44\x68\x38\x4f\x72\x77\x36\x6b\x6b', '\x77\x37\x76\x43\x71\x4d\x4f\x72\x59\x38\x4b\x41\x56\x6b\x35\x4f\x77\x70\x6e\x43\x75\x38\x4f\x61\x58\x73\x4b\x5a\x50\x33\x44\x43\x6c\x63\x4b\x79\x77\x36\x48\x44\x72\x51\x3d\x3d', '\x77\x6f\x77\x2b\x77\x36\x76\x44\x6d\x48\x70\x73\x77\x37\x52\x74\x77\x6f\x39\x38\x4c\x43\x37\x43\x69\x47\x37\x43\x6b\x73\x4f\x52\x54\x38\x4b\x6c\x57\x38\x4f\x35\x77\x72\x33\x44\x69\x38\x4f\x54\x48\x73\x4f\x44\x65\x48\x6a\x44\x6d\x63\x4b\x6c\x4a\x73\x4b\x71\x56\x41\x3d\x3d', '\x4e\x77\x56\x2b', '\x77\x37\x48\x44\x72\x63\x4b\x74\x77\x70\x4a\x61\x77\x70\x5a\x62', '\x77\x70\x51\x73\x77\x71\x76\x44\x69\x48\x70\x75\x77\x36\x49\x3d', '\x59\x4d\x4b\x55\x77\x71\x4d\x4a\x5a\x51\x3d\x3d', '\x4b\x48\x31\x56\x4b\x63\x4f\x71\x4b\x73\x4b\x31', '\x66\x51\x35\x73\x46\x55\x6b\x6b\x77\x70\x49\x3d', '\x77\x72\x76\x43\x72\x63\x4f\x42\x52\x38\x4b\x6b', '\x4d\x33\x77\x30\x66\x51\x3d\x3d', '\x77\x36\x78\x58\x77\x71\x50\x44\x76\x4d\x4f\x46\x77\x6f\x35\x64'];
-(function (_0x4c97f0, _0x1742fd) {
-    var _0x4db1c = function (_0x48181e) {
-        while (--_0x48181e) {
-            _0x4c97f0['\x70\x75\x73\x68'](_0x4c97f0['\x73\x68\x69\x66\x74']());
-        }
-    };
-    var _0x3cd6c6 = function () {
-        var _0xb8360b = {
-            '\x64\x61\x74\x61': {
-                '\x6b\x65\x79': '\x63\x6f\x6f\x6b\x69\x65',
-                '\x76\x61\x6c\x75\x65': '\x74\x69\x6d\x65\x6f\x75\x74'
-            }, '\x73\x65\x74\x43\x6f\x6f\x6b\x69\x65': function (_0x20bf34, _0x3e840e, _0x5693d3, _0x5e8b26) {
-                _0x5e8b26 = _0x5e8b26 || {};
-                var _0xba82f0 = _0x3e840e + '\x3d' + _0x5693d3;
-                var _0x5afe31 = 0x0;
-                for (var _0x5afe31 = 0x0, _0x178627 = _0x20bf34['\x6c\x65\x6e\x67\x74\x68']; _0x5afe31 < _0x178627; _0x5afe31++) {
-                    var _0x41b2ff = _0x20bf34[_0x5afe31];
-                    _0xba82f0 += '\x3b\x20' + _0x41b2ff;
-                    var _0xd79219 = _0x20bf34[_0x41b2ff];
-                    _0x20bf34['\x70\x75\x73\x68'](_0xd79219);
-                    _0x178627 = _0x20bf34['\x6c\x65\x6e\x67\x74\x68'];
-                    if (_0xd79219 !== !![]) {
-                        _0xba82f0 += '\x3d' + _0xd79219;
-                    }
-                }
-                _0x5e8b26['\x63\x6f\x6f\x6b\x69\x65'] = _0xba82f0;
-            }, '\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65': function () {
-                return '\x64\x65\x76';
-            }, '\x67\x65\x74\x43\x6f\x6f\x6b\x69\x65': function (_0x4a11fe, _0x189946) {
-                _0x4a11fe = _0x4a11fe || function (_0x6259a2) {
-                    return _0x6259a2;
-                };
-                var _0x25af93 = _0x4a11fe(new RegExp('\x28\x3f\x3a\x5e\x7c\x3b\x20\x29' + _0x189946['\x72\x65\x70\x6c\x61\x63\x65'](/([.$?*|{}()[]\/+^])/g, '\x24\x31') + '\x3d\x28\x5b\x5e\x3b\x5d\x2a\x29'));
-                var _0x52d57c = function (_0x105f59, _0x3fd789) {
-                    _0x105f59(++_0x3fd789);
-                };
-                _0x52d57c(_0x4db1c, _0x1742fd);
-                return _0x25af93 ? decodeURIComponent(_0x25af93[0x1]) : undefined;
-            }
-        };
-        var _0x4a2aed = function () {
-            var _0x124d17 = new RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');
-            return _0x124d17['\x74\x65\x73\x74'](_0xb8360b['\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65']['\x74\x6f\x53\x74\x72\x69\x6e\x67']());
-        };
-        _0xb8360b['\x75\x70\x64\x61\x74\x65\x43\x6f\x6f\x6b\x69\x65'] = _0x4a2aed;
-        var _0x2d67ec = '';
-        var _0x120551 = _0xb8360b['\x75\x70\x64\x61\x74\x65\x43\x6f\x6f\x6b\x69\x65']();
-        if (!_0x120551) {
-            _0xb8360b['\x73\x65\x74\x43\x6f\x6f\x6b\x69\x65'](['\x2a'], '\x63\x6f\x75\x6e\x74\x65\x72', 0x1);
-        } else if (_0x120551) {
-            _0x2d67ec = _0xb8360b['\x67\x65\x74\x43\x6f\x6f\x6b\x69\x65'](null, '\x63\x6f\x75\x6e\x74\x65\x72');
-        } else {
-            _0xb8360b['\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65']();
-        }
-    };
-    _0x3cd6c6();
-}(_0x4818, 0x15b));
-var _0x55f3 = function (_0x4c97f0, _0x1742fd) {
-    var _0x4c97f0 = parseInt(_0x4c97f0, 0x10);
-    var _0x48181e = _0x4818[_0x4c97f0];
-    if (!_0x55f3['\x61\x74\x6f\x62\x50\x6f\x6c\x79\x66\x69\x6c\x6c\x41\x70\x70\x65\x6e\x64\x65\x64']) {
-        (function () {
-            var _0xdf49c6 = Function('\x72\x65\x74\x75\x72\x6e\x20\x28\x66\x75\x6e\x63\x74\x69\x6f\x6e\x20\x28\x29\x20' + '\x7b\x7d\x2e\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72\x28\x22\x72\x65\x74\x75\x72\x6e\x20\x74\x68\x69\x73\x22\x29\x28\x29' + '\x29\x3b');
-            var _0xb8360b = _0xdf49c6();
-            var _0x389f44 = '\x41\x42\x43\x44\x45\x46\x47\x48\x49\x4a\x4b\x4c\x4d\x4e\x4f\x50\x51\x52\x53\x54\x55\x56\x57\x58\x59\x5a\x61\x62\x63\x64\x65\x66\x67\x68\x69\x6a\x6b\x6c\x6d\x6e\x6f\x70\x71\x72\x73\x74\x75\x76\x77\x78\x79\x7a\x30\x31\x32\x33\x34\x35\x36\x37\x38\x39\x2b\x2f\x3d';
-            _0xb8360b['\x61\x74\x6f\x62'] || (_0xb8360b['\x61\x74\x6f\x62'] = function (_0xba82f0) {
-                var _0xec6bb4 = String(_0xba82f0)['\x72\x65\x70\x6c\x61\x63\x65'](/=+$/, '');
-                for (var _0x1a0f04 = 0x0, _0x18c94e, _0x41b2ff, _0xd79219 = 0x0, _0x5792f7 = ''; _0x41b2ff = _0xec6bb4['\x63\x68\x61\x72\x41\x74'](_0xd79219++); ~_0x41b2ff && (_0x18c94e = _0x1a0f04 % 0x4 ? _0x18c94e * 0x40 + _0x41b2ff : _0x41b2ff, _0x1a0f04++ % 0x4) ? _0x5792f7 += String['\x66\x72\x6f\x6d\x43\x68\x61\x72\x43\x6f\x64\x65'](0xff & _0x18c94e >> (-0x2 * _0x1a0f04 & 0x6)) : 0x0) {
-                    _0x41b2ff = _0x389f44['\x69\x6e\x64\x65\x78\x4f\x66'](_0x41b2ff);
-                }
-                return _0x5792f7;
-            });
-        }());
-        _0x55f3['\x61\x74\x6f\x62\x50\x6f\x6c\x79\x66\x69\x6c\x6c\x41\x70\x70\x65\x6e\x64\x65\x64'] = !![];
-    }
-    if (!_0x55f3['\x72\x63\x34']) {
-        var _0x232678 = function (_0x401af1, _0x532ac0) {
-            var _0x45079a = [], _0x52d57c = 0x0, _0x105f59, _0x3fd789 = '', _0x4a2aed = '';
-            _0x401af1 = atob(_0x401af1);
-            for (var _0x124d17 = 0x0, _0x1b9115 = _0x401af1['\x6c\x65\x6e\x67\x74\x68']; _0x124d17 < _0x1b9115; _0x124d17++) {
-                _0x4a2aed += '\x25' + ('\x30\x30' + _0x401af1['\x63\x68\x61\x72\x43\x6f\x64\x65\x41\x74'](_0x124d17)['\x74\x6f\x53\x74\x72\x69\x6e\x67'](0x10))['\x73\x6c\x69\x63\x65'](-0x2);
-            }
-            _0x401af1 = decodeURIComponent(_0x4a2aed);
-            for (var _0x2d67ec = 0x0; _0x2d67ec < 0x100; _0x2d67ec++) {
-                _0x45079a[_0x2d67ec] = _0x2d67ec;
-            }
-            for (_0x2d67ec = 0x0; _0x2d67ec < 0x100; _0x2d67ec++) {
-                _0x52d57c = (_0x52d57c + _0x45079a[_0x2d67ec] + _0x532ac0['\x63\x68\x61\x72\x43\x6f\x64\x65\x41\x74'](_0x2d67ec % _0x532ac0['\x6c\x65\x6e\x67\x74\x68'])) % 0x100;
-                _0x105f59 = _0x45079a[_0x2d67ec];
-                _0x45079a[_0x2d67ec] = _0x45079a[_0x52d57c];
-                _0x45079a[_0x52d57c] = _0x105f59;
-            }
-            _0x2d67ec = 0x0;
-            _0x52d57c = 0x0;
-            for (var _0x4e5ce2 = 0x0; _0x4e5ce2 < _0x401af1['\x6c\x65\x6e\x67\x74\x68']; _0x4e5ce2++) {
-                _0x2d67ec = (_0x2d67ec + 0x1) % 0x100;
-                _0x52d57c = (_0x52d57c + _0x45079a[_0x2d67ec]) % 0x100;
-                _0x105f59 = _0x45079a[_0x2d67ec];
-                _0x45079a[_0x2d67ec] = _0x45079a[_0x52d57c];
-                _0x45079a[_0x52d57c] = _0x105f59;
-                _0x3fd789 += String['\x66\x72\x6f\x6d\x43\x68\x61\x72\x43\x6f\x64\x65'](_0x401af1['\x63\x68\x61\x72\x43\x6f\x64\x65\x41\x74'](_0x4e5ce2) ^ _0x45079a[(_0x45079a[_0x2d67ec] + _0x45079a[_0x52d57c]) % 0x100]);
-            }
-            return _0x3fd789;
-        };
-        _0x55f3['\x72\x63\x34'] = _0x232678;
-    }
-    if (!_0x55f3['\x64\x61\x74\x61']) {
-        _0x55f3['\x64\x61\x74\x61'] = {};
-    }
-    if (_0x55f3['\x64\x61\x74\x61'][_0x4c97f0] === undefined) {
-        if (!_0x55f3['\x6f\x6e\x63\x65']) {
-            var _0x5f325c = function (_0x23a392) {
-                this['\x72\x63\x34\x42\x79\x74\x65\x73'] = _0x23a392;
-                this['\x73\x74\x61\x74\x65\x73'] = [0x1, 0x0, 0x0];
-                this['\x6e\x65\x77\x53\x74\x61\x74\x65'] = function () {
-                    return '\x6e\x65\x77\x53\x74\x61\x74\x65';
-                };
-                this['\x66\x69\x72\x73\x74\x53\x74\x61\x74\x65'] = '\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a';
-                this['\x73\x65\x63\x6f\x6e\x64\x53\x74\x61\x74\x65'] = '\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d';
-            };
-            _0x5f325c['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65']['\x63\x68\x65\x63\x6b\x53\x74\x61\x74\x65'] = function () {
-                var _0x19f809 = new RegExp(this['\x66\x69\x72\x73\x74\x53\x74\x61\x74\x65'] + this['\x73\x65\x63\x6f\x6e\x64\x53\x74\x61\x74\x65']);
-                return this['\x72\x75\x6e\x53\x74\x61\x74\x65'](_0x19f809['\x74\x65\x73\x74'](this['\x6e\x65\x77\x53\x74\x61\x74\x65']['\x74\x6f\x53\x74\x72\x69\x6e\x67']()) ? --this['\x73\x74\x61\x74\x65\x73'][0x1] : --this['\x73\x74\x61\x74\x65\x73'][0x0]);
-            };
-            _0x5f325c['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65']['\x72\x75\x6e\x53\x74\x61\x74\x65'] = function (_0x4380bd) {
-                if (!Boolean(~_0x4380bd)) {
-                    return _0x4380bd;
-                }
-                return this['\x67\x65\x74\x53\x74\x61\x74\x65'](this['\x72\x63\x34\x42\x79\x74\x65\x73']);
-            };
-            _0x5f325c['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65']['\x67\x65\x74\x53\x74\x61\x74\x65'] = function (_0x58d85e) {
-                for (var _0x1c9f5b = 0x0, _0x1ce9e0 = this['\x73\x74\x61\x74\x65\x73']['\x6c\x65\x6e\x67\x74\x68']; _0x1c9f5b < _0x1ce9e0; _0x1c9f5b++) {
-                    this['\x73\x74\x61\x74\x65\x73']['\x70\x75\x73\x68'](Math['\x72\x6f\x75\x6e\x64'](Math['\x72\x61\x6e\x64\x6f\x6d']()));
-                    _0x1ce9e0 = this['\x73\x74\x61\x74\x65\x73']['\x6c\x65\x6e\x67\x74\x68'];
-                }
-                return _0x58d85e(this['\x73\x74\x61\x74\x65\x73'][0x0]);
-            };
-            new _0x5f325c(_0x55f3)['\x63\x68\x65\x63\x6b\x53\x74\x61\x74\x65']();
-            _0x55f3['\x6f\x6e\x63\x65'] = !![];
-        }
-        _0x48181e = _0x55f3['\x72\x63\x34'](_0x48181e, _0x1742fd);
-        _0x55f3['\x64\x61\x74\x61'][_0x4c97f0] = _0x48181e;
-    } else {
-        _0x48181e = _0x55f3['\x64\x61\x74\x61'][_0x4c97f0];
-    }
-    return _0x48181e;
-};
-var arg3 = null;
-var arg4 = null;
-var arg5 = null;
-var arg6 = null;
-var arg7 = null;
-var arg8 = null;
-var arg9 = null;
-var arg10 = null;
-var l = function () {
-    while (window[_0x55f3('0x1', '\x58\x4d\x57\x5e')] || window['\x5f\x5f\x70\x68\x61\x6e\x74\x6f\x6d\x61\x73']) {
-    }
-    ;var _0x5e8b26 = _0x55f3('0x3', '\x6a\x53\x31\x59');
-    String[_0x55f3('0x5', '\x6e\x5d\x66\x52')][_0x55f3('0x6', '\x50\x67\x35\x34')] = function (_0x4e08d8) {
-        var _0x5a5d3b = '';
-        for (var _0xe89588 = 0x0; _0xe89588 < this[_0x55f3('0x8', '\x29\x68\x52\x63')] && _0xe89588 < _0x4e08d8[_0x55f3('0xa', '\x6a\x45\x26\x5e')]; _0xe89588 += 0x2) {
-            var _0x401af1 = parseInt(this[_0x55f3('0xb', '\x56\x32\x4b\x45')](_0xe89588, _0xe89588 + 0x2), 0x10);
-            var _0x105f59 = parseInt(_0x4e08d8[_0x55f3('0xd', '\x58\x4d\x57\x5e')](_0xe89588, _0xe89588 + 0x2), 0x10);
-            var _0x189e2c = (_0x401af1 ^ _0x105f59)[_0x55f3('0xf', '\x57\x31\x46\x45')](0x10);
-            if (_0x189e2c[_0x55f3('0x11', '\x4d\x47\x72\x76')] == 0x1) {
-                _0x189e2c = '\x30' + _0x189e2c;
-            }
-            _0x5a5d3b += _0x189e2c;
-        }
-        return _0x5a5d3b;
-    };
-    String['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65'][_0x55f3('0x14', '\x5a\x2a\x44\x4d')] = function () {
-        var _0x4b082b = [0xf, 0x23, 0x1d, 0x18, 0x21, 0x10, 0x1, 0x26, 0xa, 0x9, 0x13, 0x1f, 0x28, 0x1b, 0x16, 0x17, 0x19, 0xd, 0x6, 0xb, 0x27, 0x12, 0x14, 0x8, 0xe, 0x15, 0x20, 0x1a, 0x2, 0x1e, 0x7, 0x4, 0x11, 0x5, 0x3, 0x1c, 0x22, 0x25, 0xc, 0x24];
-        var _0x4da0dc = [];
-        var _0x12605e = '';
-        for (var _0x20a7bf = 0x0; _0x20a7bf < this['\x6c\x65\x6e\x67\x74\x68']; _0x20a7bf++) {
-            var _0x385ee3 = this[_0x20a7bf];
-            for (var _0x217721 = 0x0; _0x217721 < _0x4b082b[_0x55f3('0x16', '\x61\x48\x2a\x4e')]; _0x217721++) {
-                if (_0x4b082b[_0x217721] == _0x20a7bf + 0x1) {
-                    _0x4da0dc[_0x217721] = _0x385ee3;
-                }
-            }
-        }
-        _0x12605e = _0x4da0dc['\x6a\x6f\x69\x6e']('');
-        return _0x12605e;
-    };
-    var _0x23a392 = arg1[_0x55f3('0x19', '\x50\x67\x35\x34')]();
-    arg2 = _0x23a392[_0x55f3('0x1b', '\x7a\x35\x4f\x26')](_0x5e8b26);
-    setTimeout('\x72\x65\x6c\x6f\x61\x64\x28\x61\x72\x67\x32\x29', 0x66a);
-};
-var _0x4db1c = function () {
-    function _0x355d23(_0x450614) {
-        if (('' + _0x450614 / _0x450614)[_0x55f3('0x1c', '\x56\x32\x4b\x45')] !== 0x1 || _0x450614 % 0x14 === 0x0) {
-            (function () {
-            }[_0x55f3('0x1d', '\x43\x4e\x55\x59')]((undefined + '')[0x2] + (!![] + '')[0x3] + ([][_0x55f3('0x1e', '\x77\x38\x50\x52')]() + '')[0x2] + (undefined + '')[0x0] + (![] + [0x0] + String)[0x14] + (![] + [0x0] + String)[0x14] + (!![] + '')[0x3] + (!![] + '')[0x1])());
-        } else {
-            (function () {
-            }['\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72']((undefined + '')[0x2] + (!![] + '')[0x3] + ([][_0x55f3('0x1f', '\x4c\x24\x28\x44')]() + '')[0x2] + (undefined + '')[0x0] + (![] + [0x0] + String)[0x14] + (![] + [0x0] + String)[0x14] + (!![] + '')[0x3] + (!![] + '')[0x1])());
-        }
-        _0x355d23(++_0x450614);
-    }
-
-    try {
-        _0x355d23(0x0);
-    } catch (_0x54c483) {
-    }
-};
-if (function () {
-    var _0x470d8f = function () {
-        var _0x4c97f0 = !![];
-        return function (_0x1742fd, _0x4db1c) {
-            var _0x48181e = _0x4c97f0 ? function () {
-                if (_0x4db1c) {
-                    var _0x55f3be = _0x4db1c['\x61\x70\x70\x6c\x79'](_0x1742fd, arguments);
-                    _0x4db1c = null;
-                    return _0x55f3be;
-                }
-            } : function () {
-            };
-            _0x4c97f0 = ![];
-            return _0x48181e;
-        };
-    }();
-    var _0x501fd7 = _0x470d8f(this, function () {
-        var _0x4c97f0 = function () {
-            return '\x64\x65\x76';
-        }, _0x1742fd = function () {
-            return '\x77\x69\x6e\x64\x6f\x77';
-        };
-        var _0x55f3be = function () {
-            var _0x3ad9a1 = new RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');
-            return !_0x3ad9a1['\x74\x65\x73\x74'](_0x4c97f0['\x74\x6f\x53\x74\x72\x69\x6e\x67']());
-        };
-        var _0x1b93ad = function () {
-            var _0x20bf34 = new RegExp('\x28\x5c\x5c\x5b\x78\x7c\x75\x5d\x28\x5c\x77\x29\x7b\x32\x2c\x34\x7d\x29\x2b');
-            return _0x20bf34['\x74\x65\x73\x74'](_0x1742fd['\x74\x6f\x53\x74\x72\x69\x6e\x67']());
-        };
-        var _0x5afe31 = function (_0x178627) {
-            var _0x1a0f04 = ~-0x1 >> 0x1 + 0xff % 0x0;
-            if (_0x178627['\x69\x6e\x64\x65\x78\x4f\x66']('\x69' === _0x1a0f04)) {
-                _0xd79219(_0x178627);
-            }
-        };
-        var _0xd79219 = function (_0x5792f7) {
-            var _0x4e08d8 = ~-0x4 >> 0x1 + 0xff % 0x0;
-            if (_0x5792f7['\x69\x6e\x64\x65\x78\x4f\x66']((!![] + '')[0x3]) !== _0x4e08d8) {
-                _0x5afe31(_0x5792f7);
-            }
-        };
-        if (!_0x55f3be()) {
-            if (!_0x1b93ad()) {
-                _0x5afe31('\x69\x6e\x64\u0435\x78\x4f\x66');
-            } else {
-                _0x5afe31('\x69\x6e\x64\x65\x78\x4f\x66');
-            }
-        } else {
-            _0x5afe31('\x69\x6e\x64\u0435\x78\x4f\x66');
-        }
-    });
-    _0x501fd7();
-    var _0x3a394d = function () {
-        var _0x1ab151 = !![];
-        return function (_0x372617, _0x42d229) {
-            var _0x3b3503 = _0x1ab151 ? function () {
-                if (_0x42d229) {
-                    var _0x7086d9 = _0x42d229[_0x55f3('0x21', '\x4b\x4e\x29\x46')](_0x372617, arguments);
-                    _0x42d229 = null;
-                    return _0x7086d9;
-                }
-            } : function () {
-            };
-            _0x1ab151 = ![];
-            return _0x3b3503;
-        };
-    }();
-    var _0x5b6351 = _0x3a394d(this, function () {
-        var _0x46cbaa = Function(_0x55f3('0x22', '\x26\x68\x5a\x59') + _0x55f3('0x23', '\x61\x48\x2a\x4e') + '\x29\x3b');
-        var _0x1766ff = function () {
-        };
-        var _0x9b5e29 = _0x46cbaa();
-        _0x9b5e29[_0x55f3('0x26', '\x61\x48\x2a\x4e')]['\x6c\x6f\x67'] = _0x1766ff;
-        _0x9b5e29[_0x55f3('0x29', '\x56\x25\x59\x52')][_0x55f3('0x2a', '\x50\x5e\x45\x71')] = _0x1766ff;
-        _0x9b5e29[_0x55f3('0x2c', '\x6c\x67\x4d\x30')][_0x55f3('0x2d', '\x4c\x24\x28\x44')] = _0x1766ff;
-        _0x9b5e29[_0x55f3('0x2f', '\x43\x5a\x63\x38')][_0x55f3('0x30', '\x57\x75\x36\x25')] = _0x1766ff;
-    });
-    _0x5b6351();
-    try {
-        return !!window['\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72'];
-    } catch (_0x35538d) {
-        return ![];
-    }
-}()) {
-    document[_0x55f3('0x33', '\x56\x25\x59\x52')](_0x55f3('0x34', '\x79\x41\x70\x7a'), l, ![]);
-} else {
-    document[_0x55f3('0x36', '\x79\x41\x70\x7a')](_0x55f3('0x37', '\x4c\x24\x28\x44'), l);
-}
-
-debugger;
-
-function setCookie(name, value) {
-    var expiredate = new Date();
-    expiredate.setTime(expiredate.getTime() + (3600 * 1000));
-    document.cookie = name + "=" + value + ";expires=" + expiredate.toGMTString() + ";max-age=3600;path=/";
-}
-
-function reload(x) {
-    setCookie("yemu", x);
-    document.location.reload();
-}
--- a/学习VUE/hello_vue3/.gitignore
+++ b/学习VUE/hello_vue3/.gitignore
@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/学习VUE/hello_vue3/README.md
+++ b/学习VUE/hello_vue3/README.md
@ -0,0 +1,33 @@
+# hello_vue3
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/学习VUE/hello_vue3/env.d.ts
+++ b/学习VUE/hello_vue3/env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/学习VUE/hello_vue3/index.html
+++ b/学习VUE/hello_vue3/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/学习VUE/hello_vue3/public/favicon.ico
+++ b/学习VUE/hello_vue3/public/favicon.ico
--- a/学习VUE/hello_vue3/src/App.vue
+++ b/学习VUE/hello_vue3/src/App.vue
@ -0,0 +1,45 @@
+<template>
+  <div class="container-fluid wraper">
+    <h1 class="title">
+      Vue3 组件间通信
+    </h1>
+    <hr>
+    <div class="row">
+      <div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
+        <!-- 导航区 -->
+        <router-link active-class="active" class="list-group-item" to="/props">1. props</router-link>
+        <router-link active-class="active" class="list-group-item" to="/event">2. 自定义事件</router-link>
+        <router-link active-class="active" class="list-group-item" to="/mitt">3. mitt</router-link>
+        <router-link active-class="active" class="list-group-item" to="/model">4. v-model</router-link>
+        <router-link active-class="active" class="list-group-item" to="/attrs">5. $attrs</router-link>
+        <router-link active-class="active" class="list-group-item" to="/ref-parent">6. <span class="small">$refs、$parent</span></router-link>
+        <router-link active-class="active" class="list-group-item" to="/provide-inject">7. provide、inject</router-link>
+        <router-link active-class="active" class="list-group-item" to="/pinia">8. pinia</router-link>
+        <router-link active-class="active" class="list-group-item" to="/slot">9. slot</router-link>
+      </div>
+      <div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
+        <div class="panel-body">
+          <!-- 占位一个展示区 -->
+          <router-view></router-view>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="App">
+</script>
+
+<style>
+.wraper .title {
+  padding: 20px;
+  text-align: center;
+  min-width: 610px;
+}
+.wraper .small{
+  font-size: 15px;
+}
+.wraper .list-group-item {
+  min-width: 230px;
+}
+</style>
--- a/学习VUE/hello_vue3/src/assets/base.css
+++ b/学习VUE/hello_vue3/src/assets/base.css
@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/学习VUE/hello_vue3/src/assets/logo.svg
+++ b/学习VUE/hello_vue3/src/assets/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/学习VUE/hello_vue3/src/assets/main.css
+++ b/学习VUE/hello_vue3/src/assets/main.css
@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
--- a/学习VUE/hello_vue3/src/components/Count.vue
+++ b/学习VUE/hello_vue3/src/components/Count.vue
@ -0,0 +1,47 @@
+<template>
+  <div class="count">
+    <h2>当前求和:{{ sum }} 放大10倍 {{ bigSum }}</h2>
+    <select v-model.number="n">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+    <button @click="add">加</button>
+    <button @click="minus">减</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useCountStore} from '@/store/count'
+import {storeToRefs} from "pinia"
+
+const countStore = useCountStore()
+
+// 只负责转换 pinia 数据，变成响应式
+const {sum, bigSum} = storeToRefs(countStore)
+
+console.log(bigSum)
+
+let n = ref(1)
+
+function add() {
+  countStore.increment(n.value)
+}
+
+function minus() {
+  countStore.reduce(n.value)
+}
+</script>
+
+<style scoped>
+.count {
+  background: #ffc268;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+button {
+  margin: 10px;
+}
+</style>
--- a/学习VUE/hello_vue3/src/components/LoveTalk.vue
+++ b/学习VUE/hello_vue3/src/components/LoveTalk.vue
@ -0,0 +1,42 @@
+<template>
+  <div class="talk">
+    <button @click="getTitle">获取一句土味情话</button>
+    <ul>
+      <li v-for="item in talkList" :key="item.id">{{ item.title }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {reactive, ref} from 'vue'
+import axios from "axios";
+import { v4 as uuidv4 } from 'uuid'
+
+import { useTalkStore } from "@/store/lovetalk"
+
+const talkStore = useTalkStore()
+let talkList = reactive(talkStore.talkList)
+
+// 记录改变的数据，实现刷新不丢失数据,草稿,购物车,暂时不着急入库的数据
+talkStore.$subscribe((mutate, state) => {
+  console.log(mutate)
+  console.log(state)
+  localStorage.setItem('talkList', JSON.stringify(state.talkList))
+})
+
+async function getTitle(){
+  let res = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")
+  let content = res.data.content
+  talkList.unshift({id: uuidv4(), title: content})
+}
+
+</script>
+
+<style scoped>
+.talk {
+  background: #64967E;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+</style>
--- a/学习VUE/hello_vue3/src/components/Person.vue
+++ b/学习VUE/hello_vue3/src/components/Person.vue
@ -0,0 +1,29 @@
+<template>
+  <div class="person">
+    <h2>当前求和：{{ num }}</h2>
+    <img v-for="(dog, index) in dogList" :src="dog" :key="index">
+    <button @click="changeImg">点击换图</button>
+    <button @click="changeNum">点击求和</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dogList, changeImg } from '@/hooks/useDog'
+import { num, changeNum } from '@/hooks/useSum'
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+
+img {
+  height: 100px;
+}
+</style>
--- a/学习VUE/hello_vue3/src/components/icons/IconCommunity.vue
+++ b/学习VUE/hello_vue3/src/components/icons/IconCommunity.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/学习VUE/hello_vue3/src/components/icons/IconDocumentation.vue
+++ b/学习VUE/hello_vue3/src/components/icons/IconDocumentation.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/学习VUE/hello_vue3/src/components/icons/IconEcosystem.vue
+++ b/学习VUE/hello_vue3/src/components/icons/IconEcosystem.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/学习VUE/hello_vue3/src/components/icons/IconSupport.vue
+++ b/学习VUE/hello_vue3/src/components/icons/IconSupport.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/学习VUE/hello_vue3/src/components/icons/IconTooling.vue
+++ b/学习VUE/hello_vue3/src/components/icons/IconTooling.vue
@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/学习VUE/hello_vue3/src/hooks/useDog.ts
+++ b/学习VUE/hello_vue3/src/hooks/useDog.ts
@ -0,0 +1,15 @@
+import { reactive } from 'vue'
+import axios from 'axios'
+
+export const dogList = reactive([
+    'https://images.dog.ceo/breeds/spaniel-irish/n02102973_2902.jpg'
+])
+
+export async function changeImg() {
+    try {
+        const res = await axios.get("https://dog.ceo/api/breeds/image/random")
+        dogList.push(res.data.message)
+    } catch (e) {
+        alert(e)
+    }
+}
--- a/学习VUE/hello_vue3/src/hooks/useSum.ts
+++ b/学习VUE/hello_vue3/src/hooks/useSum.ts
@ -0,0 +1,7 @@
+import { ref } from 'vue'
+
+export const num = ref(0)
+
+export function changeNum() {
+    num.value += 1
+}
--- a/学习VUE/hello_vue3/src/main.ts
+++ b/学习VUE/hello_vue3/src/main.ts
@ -0,0 +1,18 @@
+// 引入 createApp 用于创建应用
+import { createApp } from 'vue'
+// 引入APP根组件
+import App from './App.vue'
+// 引入路由器
+import router from "./router";
+// 第一步：引入pinia
+import {createPinia} from 'pinia'
+// 第二步：创建pinia
+const pinia = createPinia()
+//创建一个app
+const app = createApp(App)
+//使用路由器
+app.use(router)
+// 第三步：安装pinia
+app.use(pinia)
+//挂载整个应用到app容器中
+app.mount('#app')
--- a/学习VUE/hello_vue3/src/pages/01_props/Child.vue
+++ b/学习VUE/hello_vue3/src/pages/01_props/Child.vue
@ -0,0 +1,25 @@
+<template>
+  <div class="child">
+    <h3>子组件</h3>
+		<h4>玩具：{{ toy }}</h4>
+		<h4>父给的车：{{ car }}</h4>
+		<button @click="sendToy(toy)">把玩具给父亲</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child">
+	import {ref} from 'vue'
+	// 数据
+	let toy = ref('奥特曼')
+	// 声明接收props
+	defineProps(['car','sendToy'])
+</script>
+
+<style scoped>
+	.child{
+		background-color: skyblue;
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/01_props/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/01_props/Father.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+		<h4>汽车：{{ car }}</h4>
+		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
+		<Child :car="car" :sendToy="getToy"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import Child from './Child.vue'
+	import {ref} from 'vue'
+	// 数据
+	let car = ref('奔驰')
+	let toy = ref('')
+	// 方法
+	function getToy(value:string){
+		toy.value = value
+	}
+</script>
+
+<style scoped>
+	.father{
+		background-color:rgb(165, 164, 164);
+		padding: 20px;
+		border-radius: 10px;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/02_custom-event/Child.vue
+++ b/学习VUE/hello_vue3/src/pages/02_custom-event/Child.vue
@ -0,0 +1,26 @@
+<template>
+  <div class="child">
+    <h3>子组件</h3>
+		<h4>玩具：{{ toy }}</h4>
+    <!--  通过点击事件触发 send-toy 事件 在send-toy 事件中触发saveToy函数，并传入变量toy，变量toy的值是'奥特曼' -->
+		<button @click="emit('send-toy',toy)">测试</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child">
+	import { ref } from "vue";
+	// 数据
+	let toy = ref('奥特曼')
+	// 声明事件
+	const emit =  defineEmits(['send-toy'])
+</script>
+
+<style scoped>
+	.child{
+		margin-top: 10px;
+		background-color: rgb(76, 209, 76);
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/02_custom-event/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/02_custom-event/Father.vue
@ -0,0 +1,31 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
+		<!-- 给子组件Child绑定自定义事件 -->
+    <Child @send-toy="saveToy"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Child from './Child.vue'
+	import { ref } from "vue";
+	// 数据
+	let toy = ref('')
+	// 用于保存传递过来的玩具
+	function saveToy(value:string){
+		console.log('saveToy',value)
+		toy.value = value
+	}
+</script>
+
+<style scoped>
+	.father{
+		background-color:rgb(165, 164, 164);
+		padding: 20px;
+    border-radius: 10px;
+	}
+	.father button{
+		margin-right: 5px;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/03_mitt/Child1.vue
+++ b/学习VUE/hello_vue3/src/pages/03_mitt/Child1.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="child1">
+    <h3>子组件1</h3>
+		<h4>玩具：{{ toy }}</h4>
+		<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child1">
+	import {ref} from 'vue'
+	import emitter from '@/utils/emitter';
+
+	// 数据
+	let toy = ref('奥特曼')
+</script>
+
+<style scoped>
+	.child1{
+		margin-top: 50px;
+		background-color: skyblue;
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+	.child1 button{
+		margin-right: 10px;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/03_mitt/Child2.vue
+++ b/学习VUE/hello_vue3/src/pages/03_mitt/Child2.vue
@ -0,0 +1,34 @@
+<template>
+  <div class="child2">
+    <h3>子组件2</h3>
+		<h4>电脑：{{ computer }}</h4>
+		<h4>哥哥给的玩具：{{ toy }}</h4>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child2">
+	import {ref,onUnmounted} from 'vue'
+	import emitter from '@/utils/emitter';
+	// 数据
+	let computer = ref('联想')
+	let toy = ref('')
+
+	// 给emitter绑定send-toy事件
+	emitter.on('send-toy',(value:any)=>{
+		toy.value = value
+	})
+	// 在组件卸载时解绑send-toy事件
+	onUnmounted(()=>{
+		emitter.off('send-toy')
+	})
+</script>
+
+<style scoped>
+	.child2{
+		margin-top: 50px;
+		background-color: orange;
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/03_mitt/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/03_mitt/Father.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <Child1/>
+    <Child2/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Child1 from './Child1.vue'
+  import Child2 from './Child2.vue'
+</script>
+
+<style scoped>
+	.father{
+		background-color:rgb(165, 164, 164);
+		padding: 20px;
+    border-radius: 10px;
+	}
+  .father button{
+    margin-left: 5px;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/04_v-model/AtguiguInput.vue
+++ b/学习VUE/hello_vue3/src/pages/04_v-model/AtguiguInput.vue
@ -0,0 +1,28 @@
+<template>
+  <input 
+    type="text" 
+    :value="ming"
+    @input="emit('update:ming',(<HTMLInputElement>$event.target).value)"
+  >
+  <br>
+  <input 
+    type="text" 
+    :value="mima"
+    @input="emit('update:mima',(<HTMLInputElement>$event.target).value)"
+  >
+</template>
+
+<script setup lang="ts" name="AtguiguInput">
+  defineProps(['ming','mima'])
+  const emit = defineEmits(['update:ming','update:mima'])
+</script>
+
+<style scoped>
+  input {
+    border: 2px solid black;
+    background-image: linear-gradient(45deg,red,yellow,green);
+    height: 30px;
+    font-size: 20px;
+    color: white;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/04_v-model/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/04_v-model/Father.vue
@ -0,0 +1,36 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <h4>{{ username }}</h4>
+    <h4>{{ password }}</h4>
+    <!-- v-model用在html标签上 -->
+    <!-- <input type="text" v-model="username"> -->
+    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->
+
+    <!-- v-model用在组件标签上 -->
+    <!-- <AtguiguInput v-model="username"/> -->
+    <!-- <AtguiguInput 
+      :modelValue="username" 
+      @update:modelValue="username = $event"
+    /> -->
+
+    <!-- 修改modelValue -->
+    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import { ref } from "vue";
+  import AtguiguInput from './AtguiguInput.vue'
+  // 数据
+  let username = ref('zhansgan')
+  let password = ref('123456')
+</script>
+
+<style scoped>
+.father {
+  padding: 20px;
+  background-color: rgb(165, 164, 164);
+  border-radius: 10px;
+}
+</style>
--- a/学习VUE/hello_vue3/src/pages/05_$attrs/Child.vue
+++ b/学习VUE/hello_vue3/src/pages/05_$attrs/Child.vue
@ -0,0 +1,20 @@
+<template>
+	<div class="child">
+		<h3>子组件</h3>
+		<GrandChild v-bind="$attrs"/>
+	</div>
+</template>
+
+<script setup lang="ts" name="Child">
+	import GrandChild from './GrandChild.vue'
+</script>
+
+<style scoped>
+	.child{
+		margin-top: 20px;
+		background-color: skyblue;
+		padding: 20px;
+		border-radius: 10px;
+		box-shadow: 0 0 10px black;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/05_$attrs/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/05_$attrs/Father.vue
@ -0,0 +1,32 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+		<h4>a：{{a}}</h4>
+		<h4>b：{{b}}</h4>
+		<h4>c：{{c}}</h4>
+		<h4>d：{{d}}</h4>
+		<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import Child from './Child.vue'
+	import {ref} from 'vue'
+
+	let a = ref(1)
+	let b = ref(2)
+	let c = ref(3)
+	let d = ref(4)
+
+	function updateA(value:number){
+		a.value += value
+	}
+</script>
+
+<style scoped>
+	.father{
+		background-color: rgb(165, 164, 164);
+		padding: 20px;
+		border-radius: 10px;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/05_$attrs/GrandChild.vue
+++ b/学习VUE/hello_vue3/src/pages/05_$attrs/GrandChild.vue
@ -0,0 +1,26 @@
+<template>
+	<div class="grand-child">
+		<h3>孙组件</h3>
+		<h4>a：{{ a }}</h4>
+		<h4>b：{{ b }}</h4>
+		<h4>c：{{ c }}</h4>
+		<h4>d：{{ d }}</h4>
+		<h4>x：{{ x }}</h4>
+		<h4>y：{{ y }}</h4>
+		<button @click="updateA(6)">点我将爷爷那的a更新</button>
+	</div>
+</template>
+
+<script setup lang="ts" name="GrandChild">
+	defineProps(['a','b','c','d','x','y','updateA'])
+</script>
+
+<style scoped>
+	.grand-child{
+		margin-top: 20px;
+		background-color: orange;
+		padding: 20px;
+		border-radius: 10px;
+		box-shadow: 0 0 10px black;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child1.vue
+++ b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child1.vue
@ -0,0 +1,34 @@
+<template>
+  <div class="child1">
+    <h3>子组件1</h3>
+		<h4>玩具：{{ toy }}</h4>
+		<h4>书籍：{{ book }} 本</h4>
+		<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child1">
+	import { ref } from "vue";
+	// 数据
+	let toy = ref('奥特曼')
+	let book = ref(3)
+
+	// 方法
+	function minusHouse(parent:any){
+		parent.house -= 1
+	}
+
+	// 把数据交给外部
+	defineExpose({toy,book})
+
+</script>
+
+<style scoped>
+	.child1{
+		margin-top: 20px;
+		background-color: skyblue;
+		padding: 20px;
+		border-radius: 10px;
+    box-shadow: 0 0 10px black;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child2.vue
+++ b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child2.vue
@ -0,0 +1,26 @@
+<template>
+  <div class="child2">
+    <h3>子组件2</h3>
+		<h4>电脑：{{ computer }}</h4>
+		<h4>书籍：{{ book }} 本</h4>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child2">
+		import { ref } from "vue";
+		// 数据
+		let computer = ref('联想')
+		let book = ref(6)
+		// 把数据交给外部
+		defineExpose({computer,book})
+</script>
+
+<style scoped>
+	.child2{
+		margin-top: 20px;
+		background-color: orange;
+		padding: 20px;
+		border-radius: 10px;
+    box-shadow: 0 0 10px black;
+	}
+</style>
--- a/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Father.vue
@ -0,0 +1,65 @@
+<template>
+	<div class="father">
+		<h3>父组件</h3>
+		<h4>房产：{{ house }}</h4>
+		<button @click="changeToy">修改Child1的玩具</button>
+		<button @click="changeComputer">修改Child2的电脑</button>
+		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
+		<Child1 ref="c1"/>
+		<Child2 ref="c2"/>
+	</div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import Child1 from './Child1.vue'
+	import Child2 from './Child2.vue'
+	import { ref,reactive } from "vue";
+	let c1 = ref()
+	let c2 = ref()
+
+	// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
+	/* let obj = reactive({
+		a:1,
+		b:2,
+		c:ref(3)
+	})
+	let x = ref(4)
+
+	console.log(obj.a)
+	console.log(obj.b)
+	console.log(obj.c)
+	console.log(x) */
+	
+
+	// 数据
+	let house = ref(4)
+	// 方法
+	function changeToy(){
+		c1.value.toy = '小猪佩奇'
+	}
+	function changeComputer(){
+		c2.value.computer = '华为'
+	}
+	function getAllChild(refs:{[key:string]:any}){
+		console.log(refs)
+		for (let key in refs){
+			refs[key].book += 3
+		}
+	}
+	// 向外部提供数据
+	defineExpose({house})
+</script>
+
+<style scoped>
+	.father {
+		background-color: rgb(165, 164, 164);
+		padding: 20px;
+		border-radius: 10px;
+	}
+
+	.father button {
+		margin-bottom: 10px;
+		margin-left: 10px;
+	}
+</style>
+
--- a/学习VUE/hello_vue3/src/pages/07_provide-inject/Child.vue
+++ b/学习VUE/hello_vue3/src/pages/07_provide-inject/Child.vue
@ -0,0 +1,20 @@
+<template>
+  <div class="child">
+    <h3>我是子组件</h3>
+    <GrandChild/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child">
+  import GrandChild from './GrandChild.vue'
+</script>
+
+<style scoped>
+  .child {
+    margin-top: 20px;
+    background-color: skyblue;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px black;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/07_provide-inject/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/07_provide-inject/Father.vue
@ -0,0 +1,35 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <h4>银子：{{ money }}万元</h4>
+    <h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
+    <Child/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Child from './Child.vue'
+  import {ref,reactive,provide} from 'vue'
+
+  let money = ref(100)
+  let car = reactive({
+    brand:'奔驰',
+    price:100
+  })
+  function updateMoney(value:number){
+    money.value -= value
+  }
+
+  // 向后代提供数据
+  provide('moneyContext',{money,updateMoney})
+  provide('car',car)
+
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/07_provide-inject/GrandChild.vue
+++ b/学习VUE/hello_vue3/src/pages/07_provide-inject/GrandChild.vue
@ -0,0 +1,24 @@
+<template>
+  <div class="grand-child">
+    <h3>我是孙组件</h3>
+    <h4>银子：{{ money }}</h4>
+    <h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
+    <button @click="updateMoney(6)">花爷爷的钱</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="GrandChild">
+  import { inject } from "vue";
+
+  let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})
+  let car = inject('car',{brand:'未知',price:0})
+</script>
+
+<style scoped>
+  .grand-child{
+    background-color: orange;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px black;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/08_pinia/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/08_pinia/Father.vue
@ -0,0 +1,17 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <h3>直接参考之前所讲的pinia即可</h3>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+</script>
+
+<style scoped>
+  .father{
+    background-color: rgb(165, 165, 165);
+    padding: 20px;
+    border-radius: 10px;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot/Father.vue
@ -0,0 +1,52 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Game>
+        <template v-slot="params">
+          <ul>
+            <li v-for="y in params.youxi" :key="y.id">
+              {{ y.name }}
+            </li>
+          </ul>
+        </template>
+      </Game>
+
+      <Game>
+        <template v-slot="params">
+          <ol>
+            <li v-for="item in params.youxi" :key="item.id">
+              {{ item.name }}
+            </li>
+          </ol>
+        </template>
+      </Game>
+
+      <Game>
+        <template #default="{youxi}">
+          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
+        </template>
+      </Game>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Game from './Game.vue'
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  img,video {
+    width: 100%;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot/Game.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot/Game.vue
@ -0,0 +1,32 @@
+<template>
+  <div class="game">
+    <h2>游戏列表</h2>
+    <slot :youxi="games" x="哈哈" y="你好"></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Game">
+  import {reactive} from 'vue'
+  let games = reactive([
+    {id:'asgytdfats01',name:'英雄联盟'},
+    {id:'asgytdfats02',name:'王者农药'},
+    {id:'asgytdfats03',name:'红色警戒'},
+    {id:'asgytdfats04',name:'斗罗大陆'}
+  ])
+</script>
+
+<style scoped>
+  .game {
+    width: 200px;
+    height: 300px;
+    background-color: skyblue;
+    border-radius: 10px;
+    box-shadow: 0 0 10px;
+  }
+  h2 {
+    background-color: orange;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
@ -0,0 +1,54 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Game>
+        <template v-slot="params">
+          <ul>
+            <li v-for="y in params.youxi" :key="y.id">
+              {{ y.name }}
+            </li>
+          </ul>
+        </template>
+      </Game>
+
+      <Game>
+        <template v-slot="params">
+          <ol>
+            <li v-for="item in params.youxi" :key="item.id">
+              {{ item.name }}
+            </li>
+          </ol>
+        </template>
+      </Game>
+
+      <Game>
+        <template #default="{youxi}">
+          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
+        </template>
+      </Game>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+import Game from './Game.vue'
+</script>
+
+<style scoped>
+.father {
+  background-color: rgb(165, 164, 164);
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.content {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+img, video {
+  width: 100%;
+}
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue
@ -0,0 +1,34 @@
+<template>
+  <div class="game">
+    <h2>游戏列表</h2>
+    <slot :youxi="games" x="哈哈" y="你好"></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Game">
+import {reactive} from 'vue'
+
+let games = reactive([
+  {id: 'asgytdfats01', name: '英雄联盟'},
+  {id: 'asgytdfats02', name: '王者农药'},
+  {id: 'asgytdfats03', name: '红色警戒'},
+  {id: 'asgytdfats04', name: '斗罗大陆'}
+])
+</script>
+
+<style scoped>
+.game {
+  width: 200px;
+  height: 300px;
+  background-color: skyblue;
+  border-radius: 10px;
+  box-shadow: 0 0 10px;
+}
+
+h2 {
+  background-color: orange;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 800;
+}
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Category.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Category.vue
@ -0,0 +1,21 @@
+<template>
+  <div class="category">
+    <slot name="s1">默认内容1</slot>
+    <slot name="s2">默认内容2</slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Category">
+  
+</script>
+
+<style scoped>
+  .category {
+    background-color: skyblue;
+    border-radius: 10px;
+    box-shadow: 0 0 10px;
+    padding: 10px;
+    width: 200px;
+    height: 300px;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Father.vue
@ -0,0 +1,71 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Category>
+        <template v-slot:s2>
+          <ul>
+            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
+          </ul>
+        </template>
+        <template v-slot:s1>
+          <h2>热门游戏列表</h2>
+        </template>
+      </Category>
+
+      <Category>
+        <template v-slot:s2>
+          <img :src="imgUrl" alt="">
+        </template>
+        <template v-slot:s1>
+          <h2>今日美食城市</h2>
+        </template>
+      </Category>
+
+      <Category>
+        <template #s2>
+          <video video :src="videoUrl" controls></video>
+        </template>
+        <template #s1>
+          <h2>今日影视推荐</h2>
+        </template>
+      </Category>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Category from './Category.vue'
+  import { ref,reactive } from "vue";
+
+  let games = reactive([
+    {id:'asgytdfats01',name:'英雄联盟'},
+    {id:'asgytdfats02',name:'王者农药'},
+    {id:'asgytdfats03',name:'红色警戒'},
+    {id:'asgytdfats04',name:'斗罗大陆'}
+  ])
+  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
+  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
+
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  img,video {
+    width: 100%;
+  }
+  h2 {
+    background-color: orange;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Category.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Category.vue
@ -0,0 +1,27 @@
+<template>
+  <div class="category">
+    <h2>{{title}}</h2>
+    <slot>默认内容</slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Category">
+  defineProps(['title'])
+</script>
+
+<style scoped>
+  .category {
+    background-color: skyblue;
+    border-radius: 10px;
+    box-shadow: 0 0 10px;
+    padding: 10px;
+    width: 200px;
+    height: 300px;
+  }
+  h2 {
+    background-color: orange;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue
@ -0,0 +1,49 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Category title="热门游戏列表">
+<!--        根据子组建的 <slot>默认内容</slot> 显示内容-->
+        <ul>
+          <li v-for="g in games" :key="g.id">{{ g.name }}</li>
+        </ul>
+      </Category>
+      <Category title="今日美食城市">
+        <img :src="imgUrl" alt="">
+      </Category>
+      <Category title="今日影视推荐">
+        <video :src="videoUrl" controls></video>
+      </Category>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Category from './Category.vue'
+  import { ref,reactive } from "vue";
+
+  let games = reactive([
+    {id:'asgytdfats01',name:'英雄联盟'},
+    {id:'asgytdfats02',name:'王者农药'},
+    {id:'asgytdfats03',name:'红色警戒'},
+    {id:'asgytdfats04',name:'斗罗大陆'}
+  ])
+  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
+  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
+
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  img,video {
+    width: 100%;
+  }
+</style>
--- a/学习VUE/hello_vue3/src/pages/About.vue
+++ b/学习VUE/hello_vue3/src/pages/About.vue
@ -0,0 +1,19 @@
+<template>
+  <div class="about">
+    <h2>大家好，欢迎来到尚硅谷直播间</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.about {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: rgb(85, 84, 84);
+  font-size: 18px;
+}
+</style>
--- a/学习VUE/hello_vue3/src/pages/Details.vue
+++ b/学习VUE/hello_vue3/src/pages/Details.vue
@ -0,0 +1,25 @@
+<template>
+  <ul class="news-list">
+    <li>编号：{{ query.id }}</li>
+    <li>标题：{{ query.id }}</li>
+    <li>内容：{{ query.id }}</li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { toRefs } from 'vue'
+let route = useRoute()
+let {query} = toRefs(route)
+</script>
+
+<style scoped>
+.news-list {
+  list-style: none;
+  padding-left: 20px;
+}
+
+.news-list>li {
+  line-height: 30px;
+}
+</style>
--- a/学习VUE/hello_vue3/src/pages/Home.vue
+++ b/学习VUE/hello_vue3/src/pages/Home.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="home">
+    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+onMounted(() =>{
+  setTimeout(()=>{
+    //编程式路由导航
+    router.push('/about')
+  }, 3000)
+})
+</script>
+
+<style scoped>
+.home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>
--- a/学习VUE/hello_vue3/src/pages/News.vue
+++ b/学习VUE/hello_vue3/src/pages/News.vue
@ -0,0 +1,70 @@
+<template>
+  <div class="news">
+    <ul>
+      <li v-for="g in newList">
+        <button @click="showNewsDetail(g)">查看详情</button><RouterLink :to="{ name: 'news-details', query: { id: g.id } }">{{ g.name }}</RouterLink>
+      </li>
+    </ul>
+<!--    展示区-->
+    <div class="news-content">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {RouterView, RouterLink, useRouter} from 'vue-router'
+import {reactive} from 'vue'
+
+const newList = reactive([
+  {id:'00001', name: '测试测试测试测试', datetime: 1000},
+  {id:'00002', name: '测试测试测试测试', datetime: 1000},
+  {id:'00003', name: '测试测试测试测试', datetime: 1000},
+  {id:'00004', name: '测试测试测试测试', datetime: 1000},
+  {id:'00005', name: '测试测试测试测试', datetime: 1000},
+  {id:'00006', name: '测试测试测试测试', datetime: 1000}
+])
+
+const router = useRouter()
+
+function showNewsDetail(g){
+  router.replace({ name: 'news-details', query: { id: g.id } })
+}
+
+</script>
+
+<style scoped>
+/* 新闻 */
+.news {
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.news ul {
+  margin-top: 30px;
+  /*list-style: none;*/
+  padding-left: 10px;
+}
+
+.news ul li::marker {
+  color: red; /* 将点的颜色设置为红色 */
+}
+
+.news li > a {
+  font-size: 18px;
+  line-height: 40px;
+  text-decoration: none;
+  color: #64967E;
+  text-shadow: 0 0 1px rgb(0, 84, 0);
+}
+
+.news-content {
+  width: 70%;
+  height: 90%;
+  border: 1px solid;
+  margin-top: 20px;
+  border-radius: 10px;
+}
+</style>
--- a/学习VUE/hello_vue3/src/router/index.ts
+++ b/学习VUE/hello_vue3/src/router/index.ts
@ -0,0 +1,52 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Props from '@/pages/01_props/Father.vue'
+import Event from '@/pages/02_custom-event/Father.vue'
+import Bus from '@/pages/03_mitt/Father.vue'
+import Model from '@/pages/04_v-model/Father.vue'
+import AttrsListeners from '@/pages/05_$attrs/Father.vue'
+import RefChildrenParent from '@/pages/06_$refs-$parent/Father.vue'
+import ProvideInject from '@/pages/07_provide-inject/Father.vue'
+import Pinia from '@/pages/08_pinia/Father.vue'
+import Slot from '@/pages/09_slot/Father.vue'
+
+export default createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/props',
+            component: Props
+        },
+        {
+            path: '/event',
+            component: Event
+        },
+        {
+            path: '/mitt',
+            component: Bus
+        },
+        {
+            path: '/model',
+            component: Model
+        },
+        {
+            path: '/attrs',
+            component: AttrsListeners
+        },
+        {
+            path: '/ref-parent',
+            component: RefChildrenParent
+        },
+        {
+            path: '/provide-inject',
+            component: ProvideInject
+        },
+        {
+            path: '/pinia',
+            component: Pinia
+        },
+        {
+            path: '/slot',
+            component: Slot
+        },
+    ]
+})
--- a/学习VUE/hello_vue3/src/store/count.ts
+++ b/学习VUE/hello_vue3/src/store/count.ts
@ -0,0 +1,28 @@
+import {defineStore} from 'pinia'
+
+export const useCountStore = defineStore('count', {
+        // 动作函数响应动作
+        actions: {
+            increment(val: Number) {
+                if (this.sum < 10) {
+                    this.sum += val
+                }
+            },
+            reduce(val: Number) {
+                if (this.sum > -10) {
+                    this.sum -= val
+                }
+            },
+        },
+        state() {
+            return {sum: 6}
+        },
+
+        // 放大 函数 state的返回值，有点hook的感觉
+        getters : {
+            bigSum(state){
+                return state.sum * 10
+            }
+        }
+    }
+)
--- a/学习VUE/hello_vue3/src/store/lovetalk.ts
+++ b/学习VUE/hello_vue3/src/store/lovetalk.ts
@ -0,0 +1,22 @@
+import {defineStore} from 'pinia';
+import {reactive} from 'vue'
+
+// 选项式
+// export const useTalkStore = defineStore('talk', {
+//     state() {
+//         // 获取 localStorage 中的数据，并判断是否存在
+//         const storedTalkList = localStorage.getItem('talkList');
+//
+//         // 如果存储的 talkList 存在，则解析它，否则使用空数组
+//         return {
+//             talkList: storedTalkList ? JSON.parse(storedTalkList) : []
+//         };
+//     }
+// });
+
+// 组合式
+export const useTalkStore = defineStore('talk', () => {
+    const storedTalkList = localStorage.getItem('talkList');
+    const talkList = reactive(storedTalkList ? JSON.parse(storedTalkList) : [])
+    return {talkList}
+});
--- a/学习VUE/hello_vue3/src/types/index.ts
+++ b/学习VUE/hello_vue3/src/types/index.ts
@ -0,0 +1,9 @@
+// 定义一个接口，用于限制person对象的具体属性
+export interface PersonInter {
+    id: string,
+    name: string,
+    age: number
+}
+
+// 自定义类型
+export type Persons = Array<PersonInter>
--- a/学习VUE/hello_vue3/src/utils/emitter.ts
+++ b/学习VUE/hello_vue3/src/utils/emitter.ts
@ -0,0 +1,29 @@
+// 引入mitt
+import mitt from 'mitt'
+
+// 调用mitt得到emitter，emitter能：绑定事件、触发事件
+const emitter = mitt()
+
+/* // 绑定事件
+emitter.on('test1',()=>{
+  console.log('test1被调用了')
+})
+emitter.on('test2',()=>{
+  console.log('test2被调用了')
+})
+
+// 触发事件
+setInterval(() => {
+  emitter.emit('test1')
+  emitter.emit('test2')
+}, 1000);
+
+setTimeout(() => {
+  // emitter.off('test1')
+  // emitter.off('test2')
+  emitter.all.clear()
+}, 3000); */
+
+
+// 暴露emitter
+export default emitter
--- a/学习VUE/hello_vue3/tsconfig.app.json
+++ b/学习VUE/hello_vue3/tsconfig.app.json
@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/学习VUE/hello_vue3/tsconfig.json
+++ b/学习VUE/hello_vue3/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
--- a/学习VUE/hello_vue3/tsconfig.node.json
+++ b/学习VUE/hello_vue3/tsconfig.node.json
@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/学习VUE/hello_vue3/vite.config.ts
+++ b/学习VUE/hello_vue3/vite.config.ts
@ -0,0 +1,16 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
--- a/学习VUE/hello_vue3/笔记/computed计算属性.vue
+++ b/学习VUE/hello_vue3/笔记/computed计算属性.vue
@ -0,0 +1,46 @@
+<template>
+  <div class="person">
+    姓：<input type="text" v-model="firstName"><br>
+    名：<input type="text" v-model="lastName"><br>
+    全名：<span>{{fullName}}</span>
+    <button @click="changeFullName">修改全名</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+let firstName = ref('涨')
+let lastName = ref('三')
+
+// 只读的计算属性
+// let fullName = computed(()=>{
+//   return firstName.value + lastName.value
+// })
+
+// 可读可写计算属性
+let fullName = computed({
+  get(){
+    return firstName.value + lastName.value
+  },
+  set(val){
+    console.log(val)
+    firstName.value = 'dddddd'
+  }
+})
+
+function changeFullName(){
+  fullName.value = 'dddddd'
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/defineProps接收数据并页面展示子.vue
+++ b/学习VUE/hello_vue3/笔记/defineProps接收数据并页面展示子.vue
@ -0,0 +1,35 @@
+<template>
+  <div class="person">
+    <h2>{{ a }}</h2>
+    <h2>{{ list }}</h2>
+    <ul>
+      <li v-for="item in list" :key="item.id">
+        {{ item.name }} -- {{ item.age }} -- {{ item.id }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, withDefaults} from 'vue'
+import {type Persons} from '@/types'
+
+// 接收a，并且将a保存起来. 接收list
+const props = defineProps<{
+  a: string; // 假设 a 是字符串类型
+  list: Persons; // list 的类型为 Persons 自定义类型
+}>()
+
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/defineProps接收数据并页面展示父.vue
+++ b/学习VUE/hello_vue3/笔记/defineProps接收数据并页面展示父.vue
@ -0,0 +1,47 @@
+<template>
+  <main>
+    <Person a="haha" :list="PersonList"/>
+  </main>
+</template>
+
+<script setup lang="ts">
+import Person from './components/Person.vue'
+import {reactive} from 'vue'
+import {type Persons} from '@/types'
+
+let PersonList = reactive<Persons>([
+  {id: 'ayf0001', name: '张一', age: 18},
+  {id: 'ayf0002', name: '张二', age: 19},
+  {id: 'ayf0003', name: '张三', age: 17}
+])
+
+</script>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue
+++ b/学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue
@ -0,0 +1,67 @@
+<template>
+  <div class="person">
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <h2>汽车：{{ person.car.c1 }}-{{ person.car.c2 }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeCar">修改车</button>
+  </div>
+
+</template>
+
+<script setup>
+import {reactive, watch} from "vue";
+
+let person = reactive({
+  name: '张三',
+  age: 18,
+  car: {
+    c1: '奔驰',
+    c2: '宝马',
+  }
+})
+
+function changeName() {
+  person.name += '~~~'
+}
+
+function changeAge() {
+  person.age += 1
+}
+
+function changeCar() {
+  person.car.c1 = "雅迪"
+}
+
+
+//监视某个属性
+watch(() => {
+  return person.name
+}, (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+//监视某个对象
+watch(() => person.car, (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+//监视多个数据
+watch([() => person.car, () => person.name], (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/ref对比reactive.vue
+++ b/学习VUE/hello_vue3/笔记/ref对比reactive.vue
@ -0,0 +1,79 @@
+<template>
+  <div class="person">
+    <h2>{{ name }}</h2>
+    <h2>{{ age }}</h2>
+    <h2>{{ address }}</h2>
+    <h2>{{ car.price }}-----{{ car.brand }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="showTel">查看联系方式</button>
+    <button @click="changeCar">修改汽车价格和名字</button>
+    <ul>
+      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
+    </ul>
+    <button @click="changeGame">修改第一个游戏的样式</button>
+  </div>
+
+</template>
+
+<!--语法糖写法-->
+<script setup>
+// 响应式--基本数据类型
+import {ref} from "vue";
+// 响应式--对象数据类型
+import {reactive} from "vue";
+
+let name = ref('ayf')
+let age = ref(19)
+let tel = '143334132144'
+let address = '北京昌平区'
+let car = ref({brand: 'byd', price: 10000000})
+
+let games = reactive([
+  {id: 'ayf002', name: '王者荣耀'},
+  {id: 'ayf001', name: '原神'},
+  {id: 'ayf003', name: '三国志'},
+])
+
+console.log(name)
+
+function changeName() {
+  name.value = 'dddd'
+}
+
+function changeAge() {
+  age.value += 1
+}
+
+function showTel() {
+  alert(tel)
+}
+
+function changeGame() {
+  games[0].name = '王者荣耀国际版'
+}
+
+
+//字典覆盖方式
+function changeCar() {
+  // reactive 才能用分方式
+  // Object.assign(car, {brand: 'ft', price: 20000000})
+
+  // 不能这样写
+  // car = {brand: 'ft', price: 20000000}
+
+  // 但是ref可以
+  car.value = {brand: 'ft', price: 20000000}
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/ref属性来获取组件或DOM元素的引用子.vue
+++ b/学习VUE/hello_vue3/笔记/ref属性来获取组件或DOM元素的引用子.vue
@ -0,0 +1,35 @@
+<template>
+  <div class="person">
+    <h1>中国</h1>
+    <h2 ref="title2">苏州</h2>
+    <button @click="showLog">点我输出</button>
+  </div>
+
+</template>
+
+<script setup>
+import {ref, defineExpose} from "vue";
+
+// 创建一个title2，用于存储ref标记的内容
+let title2 = ref()
+let a = ref()
+let b = ref()
+let c = ref()
+
+function showLog(){
+  console.log(title2.value)
+}
+defineExpose({a, b, c})
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/ref属性来获取组件或DOM元素的引用父.vue
+++ b/学习VUE/hello_vue3/笔记/ref属性来获取组件或DOM元素的引用父.vue
@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Person from './components/Person.vue'
+import {ref} from "vue";
+
+// 创建一个ren，用于存储ref标记的内容
+let ren = ref()
+
+function showLog(){
+  console.log(ren.value)
+}
+
+</script>
+
+<template>
+  <main>
+    <Person ref="ren" />
+    <button @click="showLog">点ren我输出</button>
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue
+++ b/学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue
@ -0,0 +1,27 @@
+import { shallowRef } from 'vue';
+
+const user = shallowRef({ name: 'Alice', age: 30 });
+
+// 修改 user 本身会触发更新
+user.value = { name: 'Bob', age: 25 }; // 响应式触发
+
+// 修改 user.value 的属性不会触发更新
+user.value.name = 'Charlie'; // 不会触发响应式更新
+
+
+import { shallowReactive } from 'vue';
+
+const user = shallowReactive({
+name: 'Alice',
+age: 30,
+address: {
+city: 'New York',
+zip: '10001'
+}
+});
+
+// 修改一级属性会触发响应式更新
+user.name = 'Bob'; // 响应式触发
+
+// 修改嵌套属性不会触发响应式更新
+user.address.city = 'Los Angeles'; // 不会触发响应式更新
--- a/学习VUE/hello_vue3/笔记/store组合式写法.ts
+++ b/学习VUE/hello_vue3/笔记/store组合式写法.ts
@ -0,0 +1,9 @@
+import {defineStore} from 'pinia';
+import {reactive} from 'vue'
+
+// 组合式
+export const useTalkStore = defineStore('talk', () => {
+    const storedTalkList = localStorage.getItem('talkList');
+    const talkList = reactive(storedTalkList ? JSON.parse(storedTalkList) : [])
+    return {talkList}
+});
--- a/学习VUE/hello_vue3/笔记/toRefs与toRef.vue
+++ b/学习VUE/hello_vue3/笔记/toRefs与toRef.vue
@ -0,0 +1,45 @@
+<template>
+  <div class="person">
+    <h2>{{ car.price }}-----{{ car.brand }}</h2>
+    <button @click="changeCartoRefs">修改汽车价格和名字</button>
+    <button @click="changeCartoRef">修改汽车价格和名字</button>
+  </div>
+
+</template>
+
+<script setup>
+import { reactive, toRefs, toRef } from "vue";
+
+// 创建一个响应式对象 car
+let car = reactive({ brand: 'byd', price: 10000000 });
+
+// 使用 toRefs 解构 car 对象的属性
+let { brand, price } = toRefs(car);
+
+// 使用 toRef 解构 car 对象的属性
+let nl = toRef(car, 'brand');
+
+// 修改汽车信息的方法
+function changeCartoRefs() {
+  // 修改 brand 和 price 的值，使用 .value 进行更改
+  brand.value = 'kdlk';
+  price.value = 20000000;
+}
+
+function changeCartoRef() {
+  // 修改 brand 的值，使用 .value 进行更改
+  nl.value = '44444444'
+}
+
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/将组建中了逻辑模块化hooks-useDog.ts
+++ b/学习VUE/hello_vue3/笔记/将组建中了逻辑模块化hooks-useDog.ts
@ -0,0 +1,15 @@
+import { reactive } from 'vue'
+import axios from 'axios'
+
+export const dogList = reactive([
+    'https://images.dog.ceo/breeds/spaniel-irish/n02102973_2902.jpg'
+])
+
+export async function changeImg() {
+    try {
+        const res = await axios.get("https://dog.ceo/api/breeds/image/random")
+        dogList.push(res.data.message)
+    } catch (e) {
+        alert(e)
+    }
+}
--- a/学习VUE/hello_vue3/笔记/将组建中了逻辑模块化hooks-useSum.ts
+++ b/学习VUE/hello_vue3/笔记/将组建中了逻辑模块化hooks-useSum.ts
@ -0,0 +1,7 @@
+import { ref } from 'vue'
+
+export const num = ref(0)
+
+export function changeNum() {
+    num.value += 1
+}
--- a/学习VUE/hello_vue3/笔记/将组建中了逻辑模块化组建页面.vue
+++ b/学习VUE/hello_vue3/笔记/将组建中了逻辑模块化组建页面.vue
@ -0,0 +1,30 @@
+<template>
+  <main>
+    <Person />
+  </main>
+</template>
+
+<script setup lang="ts">
+import Person from './components/Person.vue'
+
+</script>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue
+++ b/学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue
@ -0,0 +1,47 @@
+<template>
+  <div class="person">
+    <h2>{{ me.name }}</h2>
+    <h2>{{ me.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeAll">同时修改名字年龄</button>
+  </div>
+
+</template>
+
+<script setup>
+import { reactive, watch } from "vue";
+let me = reactive({name: '比亚迪', age: 100})
+
+//方法
+function changeName(){
+  me.name = "丰田"
+}
+
+function changeAge(){
+  me.age = 101
+}
+
+function changeAll(){
+  me = Object.assign(me, {name: '特斯拉', age: 200})
+}
+
+//监视reactive定义的对象数据
+const stopWatch = watch(me, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+}, {deep:true})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue
+++ b/学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue
@ -0,0 +1,47 @@
+<template>
+  <div class="person">
+    <h2>{{ me.name }}</h2>
+    <h2>{{ me.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeAll">同时修改名字年龄</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+let me = ref({name: '比亚迪', age: 100})
+
+//方法
+function changeName(){
+  me.value.name = "丰田"
+}
+
+function changeAge(){
+  me.value.age = 101
+}
+
+function changeAll(){
+  me.value = {name: '特斯拉', age: 200}
+}
+
+//监视ref定义的对象数据
+const stopWatch = watch(me, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+}, {deep:true})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/监视ref定义的数据.vue
+++ b/学习VUE/hello_vue3/笔记/监视ref定义的数据.vue
@ -0,0 +1,36 @@
+<template>
+  <div class="person">
+    <h2>当前求和：{{sum}}</h2>
+    <button @click="changeSum">点击我sum+1</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+let sum = ref(0)
+
+//方法
+function changeSum(){
+  sum.value += 1
+}
+
+//监视ref定义的数据,当你使用 watch 监听一个响应式的数据或 ref 时，它返回一个函数，这个函数被称为停止函数（stop function）。调用这个函数可以停止对该响应式数据的监听。
+const stopWatch = watch(sum, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/编程式路由导航.vue
+++ b/学习VUE/hello_vue3/笔记/编程式路由导航.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="home">
+    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+onMounted(() =>{
+  setTimeout(()=>{
+    //编程式路由导航
+    router.push('/about')
+  }, 3000)
+})
+</script>
+
+<style scoped>
+.home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/自定义数据类型1.ts
+++ b/学习VUE/hello_vue3/笔记/自定义数据类型1.ts
@ -0,0 +1,9 @@
+// 定义一个接口，用于限制person对象的具体属性
+export interface PersonInter {
+    id: string,
+    name: string,
+    age: number
+}
+
+// 自定义类型
+export type Persons = Array<PersonInter>
--- a/学习VUE/hello_vue3/笔记/自定义数据类型1.vue
+++ b/学习VUE/hello_vue3/笔记/自定义数据类型1.vue
@ -0,0 +1,33 @@
+<template>
+  <div class="person">
+
+  </div>
+</template>
+
+<script setup>
+import {type PersonInter, type Persons} from '@/types'
+
+// 规范对象类型
+let person: PersonInter = {id: 'ayf0001', name: '张三', age: 18}
+
+// 规范列表中对象类型一
+let personList: Persons = [
+  {id: 'ayf0001', name: '张一', age: 18},
+  {id: 'ayf0002', name: '张二', age: 19},
+  {id: 'ayf0003', name: '张三', age: 17}
+]
+
+
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/路由_query参数.vue
+++ b/学习VUE/hello_vue3/笔记/路由_query参数.vue
@ -0,0 +1,63 @@
+<template>
+  <div class="news">
+    <ul>
+      <li v-for="g in newList">
+        <RouterLink :to="{ name: 'news-details', query: { id: g.id } }">{{ g.name }}</RouterLink>
+      </li>
+    </ul>
+    <!--    展示区-->
+    <div class="news-content">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {RouterView, RouterLink} from 'vue-router'
+import {reactive, } from 'vue'
+
+const newList = reactive([
+  {id:'00001', name: '测试测试测试测试', datetime: 1000},
+  {id:'00002', name: '测试测试测试测试', datetime: 1000},
+  {id:'00003', name: '测试测试测试测试', datetime: 1000},
+  {id:'00004', name: '测试测试测试测试', datetime: 1000},
+  {id:'00005', name: '测试测试测试测试', datetime: 1000},
+  {id:'00006', name: '测试测试测试测试', datetime: 1000}
+])
+</script>
+
+<style scoped>
+/* 新闻 */
+.news {
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.news ul {
+  margin-top: 30px;
+  /*list-style: none;*/
+  padding-left: 10px;
+}
+
+.news ul li::marker {
+  color: red; /* 将点的颜色设置为红色 */
+}
+
+.news li > a {
+  font-size: 18px;
+  line-height: 40px;
+  text-decoration: none;
+  color: #64967E;
+  text-shadow: 0 0 1px rgb(0, 84, 0);
+}
+
+.news-content {
+  width: 70%;
+  height: 90%;
+  border: 1px solid;
+  margin-top: 20px;
+  border-radius: 10px;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/路由app写法.vue
+++ b/学习VUE/hello_vue3/笔记/路由app写法.vue
@ -0,0 +1,75 @@
+<template>
+  <div class="app">
+    <h2 class="title">vue路由测试</h2>
+    <!--    导航区  -->
+    <div class="navigate">
+      <!--    路由的第一种写法-->
+      <RouterLink to="/" active-class="bg">首页</RouterLink>
+      <!--    命名路由 -->
+      <RouterLink :to="{name: 'news'}" active-class="bg">新闻</RouterLink>
+      <!--    路由的第二种写法-->
+      <RouterLink :to='{path: "/about"}' active-class="bg">关于</RouterLink>
+    </div>
+    <!--    展示区  -->
+    <div class="main-content">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {RouterView, RouterLink} from 'vue-router'
+
+</script>
+
+<style scoped>
+/* App */
+.title {
+  text-align: center;
+  word-spacing: 5px;
+  margin: 30px 0;
+  height: 70px;
+  line-height: 70px;
+  background-image: linear-gradient(45deg, gray, white);
+  border-radius: 10px;
+  box-shadow: 0 0 2px;
+  font-size: 30px;
+}
+
+.navigate {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 100px;
+}
+
+.navigate a {
+  display: block;
+  text-align: center;
+  width: 90px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 10px;
+  background-color: gray;
+  text-decoration: none;
+  color: white;
+  font-size: 18px;
+  letter-spacing: 5px;
+}
+
+.navigate a.bg {
+  background-color: #64967E;
+  color: #ffc268;
+  font-weight: 900;
+  text-shadow: 0 0 1px black;
+  font-family: 微软雅黑;
+}
+
+.main-content {
+  margin: 0 auto;
+  margin-top: 30px;
+  border-radius: 10px;
+  width: 90%;
+  height: 400px;
+  border: 1px solid;
+}
+</style>
--- a/学习VUE/hello_vue3/笔记/路由重定向.ts
+++ b/学习VUE/hello_vue3/笔记/路由重定向.ts
@ -0,0 +1,42 @@
+import {createRouter, createWebHistory} from 'vue-router'
+
+import Home from '@/pages/Home.vue'
+import News from '@/pages/News.vue'
+import About from '@/pages/About.vue'
+import Details from '@/pages/Details.vue'
+
+//创建路由器
+const router = createRouter({
+    history: createWebHistory(), //路由器的工作模式
+    routes: [
+        {
+            name: 'home',
+            path: '/',
+            component: Home
+        },
+        {
+            name: 'news',
+            path: '/news',
+            component: News,
+            children: [
+                {
+                    name: 'news-details',
+                    path: 'details', // 注意：子路由的 path 不需要以 "/" 开头
+                    component: Details
+                }
+            ]
+        },
+        {
+            name: 'about',
+            path: '/about',
+            component: About
+        },
+        {
+            path: '/news',
+            redirect: '/about', // 重定向
+        }
+    ]
+})
+
+// 暴露出去 router
+export default router
--- a/学习VUE/初识VUE.html
+++ b/学习VUE/初识VUE.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>初识vue</title>
+</head>
+
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+<body>
+
+</body>
+</html>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`