From 7d7b38db8eade37d8dd6c6997d61e80a3f46a874 Mon Sep 17 00:00:00 2001 From: Xiao Wentao <1626297770@qq.com> Date: Mon, 16 Sep 2024 21:27:48 +0800 Subject: [PATCH] Update: Vue Learning Notes Signed-off-by: Xiao Wentao <1626297770@qq.com> --- ...3\343\200\201key\345\200\274\347\256\241\347\220\206.md" | 6 ++++-- ...\201\346\250\241\347\211\210\345\274\225\347\224\250.md" | 6 ++++-- ...\204\345\217\230\345\214\226\344\276\246\346\265\213.md" | 6 ++++-- ...\204\344\273\266\357\274\210\344\270\213\357\274\211.md" | 6 ++++-- ...\201\350\267\257\347\224\261\343\200\201Element Plus.md" | 6 ++++-- ...\204\344\273\266\357\274\210\344\270\212\357\274\211.md" | 6 ++++-- ...1\205\215\347\275\256\357\274\210Windows\357\274\211.md" | 6 ++++-- 7 files changed, 28 insertions(+), 14 deletions(-) diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\200\357\274\211\357\274\232\346\250\241\347\211\210\350\257\255\346\263\225\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223\343\200\201key\345\200\274\347\256\241\347\220\206.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\200\357\274\211\357\274\232\346\250\241\347\211\210\350\257\255\346\263\225\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223\343\200\201key\345\200\274\347\256\241\347\220\206.md" index 26ea5ee2..60271cb6 100644 --- "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\200\357\274\211\357\274\232\346\250\241\347\211\210\350\257\255\346\263\225\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223\343\200\201key\345\200\274\347\256\241\347\220\206.md" +++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\200\357\274\211\357\274\232\346\250\241\347\211\210\350\257\255\346\263\225\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223\343\200\201key\345\200\274\347\256\241\347\220\206.md" @@ -1,14 +1,16 @@ --- -title: Vue笔记（一） +title: Vue笔记（一）：模版语法、条件渲染、列表渲染、key值管理 date: 2024/9/16 categories: - fe author: aoxuexinghuo tags: - Vue - - 手写笔记 + - 手写 - 前端框架 --- +## Vue学习笔记（一）：模版语法、条件渲染、列表渲染、key值管理 + ### 一、模版语法 Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。 diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\211\357\274\211\357\274\232\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232\343\200\201\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\344\276\246\345\220\254\345\231\250\343\200\201\346\250\241\347\211\210\345\274\225\347\224\250.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\211\357\274\211\357\274\232\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232\343\200\201\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\344\276\246\345\220\254\345\231\250\343\200\201\346\250\241\347\211\210\345\274\225\347\224\250.md" index 919a3a65..6db4a23a 100644 --- "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\211\357\274\211\357\274\232\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232\343\200\201\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\344\276\246\345\220\254\345\231\250\343\200\201\346\250\241\347\211\210\345\274\225\347\224\250.md" +++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\211\357\274\211\357\274\232\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232\343\200\201\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\344\276\246\345\220\254\345\231\250\343\200\201\346\250\241\347\211\210\345\274\225\347\224\250.md" @@ -1,14 +1,16 @@ --- -title: Vue笔记（三） +title: Vue笔记（三）：计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用 date: 2024/9/16 categories: - fe author: aoxuexinghuo tags: - Vue - - 手写笔记 + - 手写 - 前端框架 --- +## Vue学习笔记（三）：计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用 + ### 一、计算属性 #### 1.使用方式 diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\214\357\274\211\357\274\232\344\272\213\344\273\266\345\244\204\347\220\206\343\200\201\344\272\213\344\273\266\344\274\240\345\217\202\343\200\201\344\277\256\351\245\260\347\254\246\343\200\201\346\225\260\347\273\204\345\217\230\345\214\226\344\276\246\346\265\213.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\214\357\274\211\357\274\232\344\272\213\344\273\266\345\244\204\347\220\206\343\200\201\344\272\213\344\273\266\344\274\240\345\217\202\343\200\201\344\277\256\351\245\260\347\254\246\343\200\201\346\225\260\347\273\204\345\217\230\345\214\226\344\276\246\346\265\213.md" index 0f3ebae8..4f59a036 100644 --- "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\214\357\274\211\357\274\232\344\272\213\344\273\266\345\244\204\347\220\206\343\200\201\344\272\213\344\273\266\344\274\240\345\217\202\343\200\201\344\277\256\351\245\260\347\254\246\343\200\201\346\225\260\347\273\204\345\217\230\345\214\226\344\276\246\346\265\213.md" +++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\214\357\274\211\357\274\232\344\272\213\344\273\266\345\244\204\347\220\206\343\200\201\344\272\213\344\273\266\344\274\240\345\217\202\343\200\201\344\277\256\351\245\260\347\254\246\343\200\201\346\225\260\347\273\204\345\217\230\345\214\226\344\276\246\346\265\213.md" @@ -1,14 +1,16 @@ --- -title: Vue笔记（二） +title: Vue笔记（二）：事件处理、事件传参、修饰符、数组变化侦测 date: 2024/9/16 categories: - fe author: aoxuexinghuo tags: - Vue - - 手写笔记 + - 手写 - 前端框架 --- +## Vue学习笔记（二）：事件处理、事件传参、修饰符、数组变化侦测 + ### 一、事件处理 在 Vue 中我们可以使用 `v-on` 指令来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。此外，`v-on` 指令可以缩写为 @ 符号。 diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\224\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\213\357\274\211.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\224\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\213\357\274\211.md" index c05c13c7..594ba54e 100644 --- "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\224\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\213\357\274\211.md" +++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\224\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\213\357\274\211.md" @@ -1,14 +1,16 @@ --- -title: Vue笔记（五） +title: Vue笔记（五）：深入了解组件（下） date: 2024/9/16 categories: - fe author: aoxuexinghuo tags: - Vue - - 手写笔记 + - 手写 - 前端框架 --- +## Vue学习笔记（五）：深入了解组件（下） + ### 一、组件事件（$emit） 在组件的模版表达时候中，我们可以直接使用`$emit`方法触发自定义事件，触发自定义事件的目的一般是组件之间传递数据。可是在上一篇博客中我们讲到的`Props`的作用就是数据传递，为什么我们这里还要讲`$emit`呢？ diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\205\255\357\274\211\357\274\232\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220\343\200\201\350\267\257\347\224\261\343\200\201Element Plus.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\205\255\357\274\211\357\274\232\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220\343\200\201\350\267\257\347\224\261\343\200\201Element Plus.md" index 89257a0c..c8e275d8 100644 --- "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\205\255\357\274\211\357\274\232\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220\343\200\201\350\267\257\347\224\261\343\200\201Element Plus.md" +++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\205\255\357\274\211\357\274\232\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220\343\200\201\350\267\257\347\224\261\343\200\201Element Plus.md" @@ -1,14 +1,16 @@ --- -title: Vue笔记（六） +title: Vue笔记（六）：生命周期钩子、路由、Element Plus date: 2024/9/16 categories: - fe author: aoxuexinghuo tags: - Vue - - 手写笔记 + - 手写 - 前端框架 --- +## Vue学习笔记（六）：生命周期钩子、路由、Element Plus + ### 一、生命周期钩子 #### 1.生命周期 diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\233\233\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\212\357\274\211.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\233\233\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\212\357\274\211.md" index 0b6567c4..6b67e317 100644 --- "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\233\233\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\212\357\274\211.md" +++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\233\233\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\212\357\274\211.md" @@ -1,14 +1,16 @@ --- -title: Vue笔记（四） +title: Vue笔记（四）：深入了解组件（上） date: 2024/9/16 categories: - fe author: aoxuexinghuo tags: - Vue - - 手写笔记 + - 手写 - 前端框架 --- +## Vue学习笔记（四）：深入了解组件（上） + ### 一、组件基础 #### 1.引子 diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\347\216\257\345\242\203\351\205\215\347\275\256\357\274\210Windows\357\274\211.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\347\216\257\345\242\203\351\205\215\347\275\256\357\274\210Windows\357\274\211.md" index b1cbaa20..92cb48fd 100644 --- "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\347\216\257\345\242\203\351\205\215\347\275\256\357\274\210Windows\357\274\211.md" +++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\347\216\257\345\242\203\351\205\215\347\275\256\357\274\210Windows\357\274\211.md" @@ -1,14 +1,16 @@ --- -title: Vue笔记 +title: Vue笔记（环境配置） date: 2024/9/16 categories: - fe author: aoxuexinghuo tags: - Vue - - 手写笔记 + - 手写 - 前端框架 --- +## Vue环境配置（Windows） + ### 一、node.js安装配置 vue的使用需要以node.js为前提，如果您的电脑上已经安装了node.js，可直接跳过这一步。