diff --git a/vue2-tutorials/single-file/demo2/.vs/VSWorkspaceState.json b/vue2-tutorials/single-file/demo2/.vs/VSWorkspaceState.json
new file mode 100644
index 0000000..7584407
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/.vs/VSWorkspaceState.json
@@ -0,0 +1,11 @@
+{
+ "ExpandedNodes": [
+ "",
+ "\\src",
+ "\\src\\views",
+ "\\src\\views\\todo",
+ "\\src\\views\\todo\\components"
+ ],
+ "SelectedNode": "\\src\\views\\todo\\index.vue",
+ "PreviewInSolutionExplorer": false
+}
\ No newline at end of file
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/FileContentIndex/27bb04e4-112e-4578-a963-9e8f97c6b04a.vsidx b/vue2-tutorials/single-file/demo2/.vs/demo2/FileContentIndex/27bb04e4-112e-4578-a963-9e8f97c6b04a.vsidx
new file mode 100644
index 0000000..cafe4bb
Binary files /dev/null and b/vue2-tutorials/single-file/demo2/.vs/demo2/FileContentIndex/27bb04e4-112e-4578-a963-9e8f97c6b04a.vsidx differ
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/config/applicationhost.config b/vue2-tutorials/single-file/demo2/.vs/demo2/config/applicationhost.config
new file mode 100644
index 0000000..bfb3080
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/.vs/demo2/config/applicationhost.config
@@ -0,0 +1,974 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/.wsuo b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/.wsuo
new file mode 100644
index 0000000..2887e15
Binary files /dev/null and b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/.wsuo differ
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.backup.json b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.backup.json
new file mode 100644
index 0000000..c00c324
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.backup.json
@@ -0,0 +1,41 @@
+{
+ "Version": 1,
+ "WorkspaceRootPath": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\",
+ "Documents": [
+ {
+ "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
+ "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
+ }
+ ],
+ "DocumentGroupContainers": [
+ {
+ "Orientation": 0,
+ "VerticalTabListWidth": 256,
+ "DocumentGroups": [
+ {
+ "DockedWidth": 200,
+ "SelectedChildIndex": 1,
+ "Children": [
+ {
+ "$type": "Bookmark",
+ "Name": "ST:0:0:{aa2115a1-9712-457b-9047-dbb71ca2cdd2}"
+ },
+ {
+ "$type": "Document",
+ "DocumentIndex": 0,
+ "Title": "todo-footer.vue",
+ "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
+ "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-footer.vue",
+ "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
+ "RelativeToolTip": "src\\views\\todo\\components\\todo-footer.vue",
+ "ViewState": "AgIAAAAAAAAAAAAAAAAAABgAAAACAAAAAAAAAA==",
+ "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
+ "WhenOpened": "2025-06-21T05:43:06.034Z",
+ "EditorCaption": ""
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.json b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.json
new file mode 100644
index 0000000..4d38073
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.json
@@ -0,0 +1,92 @@
+{
+ "Version": 1,
+ "WorkspaceRootPath": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\",
+ "Documents": [
+ {
+ "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\index.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
+ "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\index.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
+ },
+ {
+ "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-item.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
+ "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-item.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
+ },
+ {
+ "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-list.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
+ "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-list.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
+ },
+ {
+ "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
+ "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
+ }
+ ],
+ "DocumentGroupContainers": [
+ {
+ "Orientation": 0,
+ "VerticalTabListWidth": 256,
+ "DocumentGroups": [
+ {
+ "DockedWidth": 200,
+ "SelectedChildIndex": 1,
+ "Children": [
+ {
+ "$type": "Bookmark",
+ "Name": "ST:0:0:{aa2115a1-9712-457b-9047-dbb71ca2cdd2}"
+ },
+ {
+ "$type": "Document",
+ "DocumentIndex": 0,
+ "Title": "index.vue",
+ "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\index.vue",
+ "RelativeDocumentMoniker": "src\\views\\todo\\index.vue",
+ "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\index.vue*",
+ "RelativeToolTip": "src\\views\\todo\\index.vue*",
+ "ViewState": "AgIAAAYAAAAAAAAAAAAAACEAAAAJAAAAAAAAAA==",
+ "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
+ "WhenOpened": "2025-06-21T07:26:33.61Z",
+ "EditorCaption": ""
+ },
+ {
+ "$type": "Document",
+ "DocumentIndex": 1,
+ "Title": "todo-item.vue",
+ "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-item.vue",
+ "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-item.vue",
+ "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-item.vue",
+ "RelativeToolTip": "src\\views\\todo\\components\\todo-item.vue",
+ "ViewState": "AgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+ "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
+ "WhenOpened": "2025-06-21T07:26:31.737Z",
+ "EditorCaption": ""
+ },
+ {
+ "$type": "Document",
+ "DocumentIndex": 2,
+ "Title": "todo-list.vue",
+ "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-list.vue",
+ "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-list.vue",
+ "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-list.vue",
+ "RelativeToolTip": "src\\views\\todo\\components\\todo-list.vue",
+ "ViewState": "AgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+ "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
+ "WhenOpened": "2025-06-21T07:26:30.713Z",
+ "EditorCaption": ""
+ },
+ {
+ "$type": "Document",
+ "DocumentIndex": 3,
+ "Title": "todo-footer.vue",
+ "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
+ "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-footer.vue",
+ "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
+ "RelativeToolTip": "src\\views\\todo\\components\\todo-footer.vue",
+ "ViewState": "AgIAAAAAAAAAAAAAAAAAABIAAAAIAAAAAAAAAA==",
+ "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
+ "WhenOpened": "2025-06-21T05:43:06.034Z",
+ "EditorCaption": ""
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/vue2-tutorials/single-file/demo2/.vs/slnx.sqlite b/vue2-tutorials/single-file/demo2/.vs/slnx.sqlite
new file mode 100644
index 0000000..711ec41
Binary files /dev/null and b/vue2-tutorials/single-file/demo2/.vs/slnx.sqlite differ
diff --git a/vue2-tutorials/single-file/demo2/package.json b/vue2-tutorials/single-file/demo2/package.json
index 139cd93..7279fac 100644
--- a/vue2-tutorials/single-file/demo2/package.json
+++ b/vue2-tutorials/single-file/demo2/package.json
@@ -4,13 +4,15 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
+ "dev": "pnpm serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
+ "nanoid": "^5.1.5",
"vue": "^2.6.14",
- "vue-router": "3",
+ "vue-router": "^3.6.5",
"vuex": "3"
},
"devDependencies": {
diff --git a/vue2-tutorials/single-file/demo2/pnpm-lock.yaml b/vue2-tutorials/single-file/demo2/pnpm-lock.yaml
index 358332f..44747a6 100644
--- a/vue2-tutorials/single-file/demo2/pnpm-lock.yaml
+++ b/vue2-tutorials/single-file/demo2/pnpm-lock.yaml
@@ -11,11 +11,14 @@ importers:
core-js:
specifier: ^3.8.3
version: 3.43.0
+ nanoid:
+ specifier: ^5.1.5
+ version: 5.1.5
vue:
specifier: ^2.6.14
version: 2.7.16
vue-router:
- specifier: '3'
+ specifier: ^3.6.5
version: 3.6.5(vue@2.7.16)
vuex:
specifier: '3'
@@ -2577,6 +2580,11 @@ packages:
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
+ nanoid@5.1.5:
+ resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
+ engines: {node: ^18 || >=20}
+ hasBin: true
+
natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@@ -6662,6 +6670,8 @@ snapshots:
nanoid@3.3.11: {}
+ nanoid@5.1.5: {}
+
natural-compare@1.4.0: {}
negotiator@0.6.3: {}
diff --git a/vue2-tutorials/single-file/demo2/src/App.vue b/vue2-tutorials/single-file/demo2/src/App.vue
index 8fb360d..8da91ce 100644
--- a/vue2-tutorials/single-file/demo2/src/App.vue
+++ b/vue2-tutorials/single-file/demo2/src/App.vue
@@ -6,7 +6,8 @@
-->
-
+
+
@@ -16,11 +17,11 @@
// import Demo3 from "@/views/demo3/index.vue";
// import Demo4 from "@/views/demo4/index.vue";
// import Demo5 from "@/views/demo5/index.vue";
-import Demo6 from "@/views/demo6/index.vue";
+import Todo from "@/views/todo/index.vue";
export default {
name: "App",
// components: { Demo1, Demo2, Demo3 },
- components: { Demo6 },
+ components: { Todo },
};
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue b/vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue
index ab37cff..cefa182 100644
--- a/vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue
+++ b/vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue
@@ -7,5 +7,11 @@
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue b/vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue
index cb458d4..970b8fa 100644
--- a/vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue
+++ b/vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue
@@ -7,5 +7,11 @@
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-footer.vue b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-footer.vue
new file mode 100644
index 0000000..832aa4f
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-footer.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-header.vue b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-header.vue
new file mode 100644
index 0000000..4e8ff4e
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-header.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-item.vue b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-item.vue
new file mode 100644
index 0000000..c7d81ed
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-item.vue
@@ -0,0 +1,47 @@
+
+
+
+
+ {{ todo.content }}
+
+
+
+
+
+
+
+
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-list.vue b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-list.vue
new file mode 100644
index 0000000..3c10547
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-list.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/index.vue b/vue2-tutorials/single-file/demo2/src/views/todo/index.vue
new file mode 100644
index 0000000..3ef2009
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/todo/index.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+