From 4355e33a846811e4cf6c02047ab42f658856a8c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=81=E4=B8=80?= <zhengsaihong@qq.com>
Date: Thu, 30 Mar 2023 10:52:54 +0800
Subject: [PATCH 1/5] 0330

---
 ...54\344\270\200\350\212\202\350\257\276.md" |  33 ++++++
 ...11\350\243\205\350\277\220\350\241\214.md" | 106 ++++++++++++++++++
 2 files changed, 139 insertions(+)
 create mode 100644 "08\351\203\221\350\265\233\351\270\277/20230328-Vue\347\254\254\344\270\200\350\212\202\350\257\276.md"
 create mode 100644 "08\351\203\221\350\265\233\351\270\277/20230330-Vue\345\256\211\350\243\205\350\277\220\350\241\214.md"

diff --git "a/08\351\203\221\350\265\233\351\270\277/20230328-Vue\347\254\254\344\270\200\350\212\202\350\257\276.md" "b/08\351\203\221\350\265\233\351\270\277/20230328-Vue\347\254\254\344\270\200\350\212\202\350\257\276.md"
new file mode 100644
index 0000000..074a700
--- /dev/null
+++ "b/08\351\203\221\350\265\233\351\270\277/20230328-Vue\347\254\254\344\270\200\350\212\202\350\257\276.md"
@@ -0,0 +1,33 @@
+# Vue入门
+## Vue简介
+
+Vue是于2013年(与React框架同年发布)推出的一个渐进式、自底向上的前端框架，它的作者叫尤雨溪。那么什么叫做渐进式框架呢？比较官方的说法就是：以Vue内核作为核心，随着业务的深入、需求的递增，可以使用其周边生态(vue-router、vuex、ssr等)深度应用到项目中。那么通俗上来讲：就是我们可以使用vue的部分功能不断的迭代掉我们项目中部分的功能，从表单提交到列表渲染，再到多路由应用，再到SSR等。
+
+​ Vue主要具备以下几个特点：
+
+解耦视图和数据
+组件复用
+前端路由
+状态管理
+虚拟DOM
+Vue的学习不需要你具备 Rect、Angular的基础，只需要具备HTML、CSS、Javascript的基础即可。
+
+
+## 安装Vue
+
+Vue的安装主要有三种方式：
+
+CDN引入
+下载本地引入
+vue-cli脚手架的方式
+
+```html
+<!-- CDN的两种引入方式 -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<!-- 或 -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+```
+```html
+<!-- 下载本地然后引用 -->
+<script src="./lib/js/vue.js"></script>
+```
\ No newline at end of file
diff --git "a/08\351\203\221\350\265\233\351\270\277/20230330-Vue\345\256\211\350\243\205\350\277\220\350\241\214.md" "b/08\351\203\221\350\265\233\351\270\277/20230330-Vue\345\256\211\350\243\205\350\277\220\350\241\214.md"
new file mode 100644
index 0000000..9fd0300
--- /dev/null
+++ "b/08\351\203\221\350\265\233\351\270\277/20230330-Vue\345\256\211\350\243\205\350\277\220\350\241\214.md"
@@ -0,0 +1,106 @@
+# 创建一个 Vue 应用
+
+```
+npm init vue
+```
+这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
+
+```
+✔ Project name: … <your-project-name> //项目名称
+✔ Add TypeScript? … No / Yes  
+✔ Add JSX Support? … No / Yes
+✔ Add Vue Router for Single Page Application development? … No / Yes
+✔ Add Pinia for state management? … No / Yes
+✔ Add Vitest for Unit testing? … No / Yes
+✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
+✔ Add ESLint for code quality? … No / Yes
+✔ Add Prettier for code formatting? … No / Yes
+
+Scaffolding project in ./<your-project-name>...
+Done.
+```
+
+如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
+```
+> cd <your-project-name>
+> npm install
+> npm run dev
+```
+
+## 根组件
+我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
+
+如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。
+
+```js
+import { createApp } from 'vue'
+// 从一个单文件组件中导入根组件
+import App from './App.vue'
+
+const app = createApp(App)
+```
+虽然本指南中的许多示例只需要一个组件，但大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。例如，一个待办事项 (Todos) 应用的组件树可能是这样的：
+
+```
+App (root component)
+├─ TodoList
+│  └─ TodoItem
+│     ├─ TodoDeleteButton
+│     └─ TodoEditButton
+└─ TodoFooter
+   ├─ TodoClearButton
+   └─ TodoStatistics
+```
+我们会在指南的后续章节中讨论如何定义和组合多个组件。在那之前，我们得先关注一个组件内到底发生了什么。
+
+## 挂载应用
+应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
+
+```html
+<div id="app"></div>
+js
+app.mount('#app')
+```
+应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
+
+.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。
+
+DOM 中的根组件模板#
+当在未采用构建流程的情况下使用 Vue 时，我们可以在挂载容器中直接书写根组件模板：
+
+```html
+<div id="app">
+  <button @click="count++">{{ count }}</button>
+</div>
+```
+```js
+import { createApp } from 'vue'
+
+const app = createApp({
+  data() {
+    return {
+      count: 0
+    }
+  }
+})
+
+app.mount('#app')
+```
+当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。
+
+## 应用配置
+应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：
+
+```js
+app.config.errorHandler = (err) => {
+  /* 处理错误 */
+}
+```
+应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：
+
+```js
+app.component('TodoDeleteButton', TodoDeleteButton)
+```
+这使得 TodoDeleteButton 在应用的任何地方都是可用的。我们会在指南的后续章节中讨论关于组件和其他资源的注册。你也可以在 API 参考中浏览应用实例 API 的完整列表。
+
+确保在挂载应用实例之前完成所有应用配置！
\ No newline at end of file
-- 
Gitee


From 0db3249e7d819e19f6028c4324ef4699bce7a46f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=81=E4=B8=80?= <zhengsaihong@qq.com>
Date: Thu, 30 Mar 2023 03:39:06 +0000
Subject: [PATCH 2/5] update readme.md.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 十一 <zhengsaihong@qq.com>
---
 readme.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/readme.md b/readme.md
index 66beebd..3eeb101 100644
--- a/readme.md
+++ b/readme.md
@@ -3,4 +3,6 @@
 ```
 往者不可谏，来者犹可追
 
-```
\ No newline at end of file
+```
+
+https://cloud.tencent.com/developer/article/1624173
\ No newline at end of file
-- 
Gitee


From 6106eae7c4e188b2ca541159de9a4b7aad288d7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=81=E4=B8=80?= <zhengsaihong@qq.com>
Date: Fri, 31 Mar 2023 17:08:36 +0800
Subject: [PATCH 3/5] 0331

---
 ...41\346\235\277\350\257\255\346\263\225.md" | 219 ++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 "08\351\203\221\350\265\233\351\270\277/20230331-\346\250\241\346\235\277\350\257\255\346\263\225.md"

diff --git "a/08\351\203\221\350\265\233\351\270\277/20230331-\346\250\241\346\235\277\350\257\255\346\263\225.md" "b/08\351\203\221\350\265\233\351\270\277/20230331-\346\250\241\346\235\277\350\257\255\346\263\225.md"
new file mode 100644
index 0000000..2c08485
--- /dev/null
+++ "b/08\351\203\221\350\265\233\351\270\277/20230331-\346\250\241\346\235\277\350\257\255\346\263\225.md"
@@ -0,0 +1,219 @@
+# 模板语法
+Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
+
+在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
+
+如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。
+
+## 文本插值
+最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
+
+```html
+<span>Message: {{ msg }}</span>
+```
+双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
+
+## 原始 HTML
+双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
+```html
+<p>Using text interpolation: {{ rawHtml }}</p>
+<p>Using v-html directive: <span v-html="rawHtml"></span></p>
+```
+
+```
+Using text interpolation: <span style="color: red">This should be red.</span>
+
+Using v-html directive: This should be red.
+```
+这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。
+
+span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。
+
+
+安全警告
+
+在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。
+
+## Attribute 绑定
+双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
+
+```html
+<div v-bind:id="dynamicId"></div>
+```
+v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
+
+### 简写
+因为 v-bind 非常常用，我们提供了特定的简写语法：
+
+```html
+<div :id="dynamicId"></div>
+```
+开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。
+
+接下来的指引中，我们都将在示例中使用简写语法，因为这是在实际开发中更常见的用法。
+
+### 布尔型 Attribute
+布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。
+
+v-bind 在这种场景下的行为略有不同：
+```html
+<button :disabled="isButtonDisabled">Button</button>
+```
+
+当 isButtonDisabled 为真值或一个空字符串 (即 ```<button disabled="">```) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
+
+### 动态绑定多个值
+如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
+
+```js
+data() {
+  return {
+    objectOfAttrs: {
+      id: 'container',
+      class: 'wrapper'
+    }
+  }
+}
+```
+通过不带参数的 v-bind，你可以将它们绑定到单个元素上：
+
+```html
+<div v-bind="objectOfAttrs"></div>
+```
+## 使用 JavaScript 表达式
+至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：
+
+```html
+{{ number + 1 }}
+
+{{ ok ? 'YES' : 'NO' }}
+
+{{ message.split('').reverse().join('') }}
+
+<div :id="`list-${id}`"></div>
+```
+这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。
+
+在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
+
+在文本插值中 (双大括号)
+在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
+
+### 仅支持表达式
+
+每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。
+
+因此，下面的例子都是无效的：
+
+```
+<!-- 这是一个语句，而非表达式 -->
+{{ var a = 1 }}
+
+<!-- 条件控制也不支持，请使用三元表达式 -->
+{{ if (ok) { return message } }}
+```
+### 调用函数
+可以在绑定的表达式中使用一个组件暴露的方法：
+
+```html
+<span :title="toTitleDate(date)">
+  {{ formatDate(date) }}
+</span>
+```
+
+TIP
+
+绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
+
+
+### 受限的全局访问
+模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。
+
+没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。
+
+## 指令 Directives
+指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。
+
+指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例：
+
+```html
+<p v-if="seen">Now you see me</p>
+```
+这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。
+
+### 参数 Arguments
+某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：
+
+```html
+<a v-bind:href="url"> ... </a>
+
+<!-- 简写 -->
+<a :href="url"> ... </a>
+```
+这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。
+
+另一个例子是 v-on 指令，它将监听 DOM 事件：
+
+```html
+<a v-on:click="doSomething"> ... </a>
+
+<!-- 简写 -->
+<a @click="doSomething"> ... </a>
+```
+这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。我们之后也会讨论关于事件处理的更多细节。
+
+### 动态参数
+同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：
+
+```html
+<!--
+注意，参数表达式有一些约束，
+参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
+-->
+<a v-bind:[attributeName]="url"> ... </a>
+
+<!-- 简写 -->
+<a :[attributeName]="url"> ... </a>
+```
+这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。
+
+相似地，你还可以将一个函数绑定到动态的事件名称上：
+
+```
+<a v-on:[eventName]="doSomething"> ... </a>
+
+<!-- 简写 -->
+<a @[eventName]="doSomething">
+```
+在此示例中，当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。
+
+### 动态参数值的限制
+动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
+
+### 动态参数语法的限制
+动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。例如下面的示例：
+
+```html
+<!-- 这会触发一个编译器警告 -->
+<a :['foo' + bar]="value"> ... </a>
+```
+如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式，也是 Vue 最基础的概念之一，我们很快就会讲到。
+
+当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：
+
+```html
+<a :[someAttr]="value"> ... </a>
+```
+上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。单文件组件内的模板不受此限制。
+
+### 修饰符 Modifiers
+修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：
+
+```html
+<form @submit.prevent="onSubmit">...</form>
+```
+之后在讲到 v-on 和 v-model 的功能时，你将会看到其他修饰符的例子。
+
+最后，在这里你可以直观地看到完整的指令语法：
+
+![111](https://cn.vuejs.org/assets/directive.69c37117.png)
\ No newline at end of file
-- 
Gitee


From 78dce611c6d7ec7acec4f6333e4eafaeebafb806 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=81=E4=B8=80?= <zhengsaihong@qq.com>
Date: Fri, 31 Mar 2023 17:12:34 +0800
Subject: [PATCH 4/5] 0331

---
 readme.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/readme.md b/readme.md
index 3eeb101..1dde8f1 100644
--- a/readme.md
+++ b/readme.md
@@ -5,4 +5,3 @@
 
 ```
 
-https://cloud.tencent.com/developer/article/1624173
\ No newline at end of file
-- 
Gitee


From e69f8f1ebd1e53aa32f3f28a5c54037f6d0212b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=81=E4=B8=80?= <zhengsaihong@qq.com>
Date: Fri, 31 Mar 2023 17:15:22 +0800
Subject: [PATCH 5/5] 0331

---
 readme.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/readme.md b/readme.md
index 1dde8f1..3b7d640 100644
--- a/readme.md
+++ b/readme.md
@@ -5,3 +5,6 @@
 
 ```
 
+## 录屏地址：21级软件1班-Vue
+
+https://www.aliyundrive.com/s/qzYzMxtQaif 点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。
\ No newline at end of file
-- 
Gitee