From 51a39441d592cb96bcbc19f2f7b8f18cdb31445f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=96=E5=BF=97=E5=8D=8E?= <2606907845@qq.com>
Date: Sun, 13 Apr 2025 21:12:20 +0800
Subject: [PATCH] 0413

---
 ...342\200\224\345\210\235\350\257\206vue.md" |  72 +++++
 ...342\200\224\345\210\233\345\273\272vue.md" | 124 +++++++++
 ...14\347\273\204\345\220\210\345\274\217.md" |  85 ++++++
 ...41\346\235\277\350\257\255\346\263\225.md" | 258 ++++++++++++++++++
 4 files changed, 539 insertions(+)
 create mode 100644 "\350\202\226\345\277\227\345\215\216/20250407\342\200\224\345\210\235\350\257\206vue.md"
 create mode 100644 "\350\202\226\345\277\227\345\215\216/20250408\342\200\224\345\210\233\345\273\272vue.md"
 create mode 100644 "\350\202\226\345\277\227\345\215\216/20250409\342\200\224\351\200\211\351\241\271\345\274\217\345\222\214\347\273\204\345\220\210\345\274\217.md"
 create mode 100644 "\350\202\226\345\277\227\345\215\216/20250411\342\200\224\346\250\241\346\235\277\350\257\255\346\263\225.md"

diff --git "a/\350\202\226\345\277\227\345\215\216/20250407\342\200\224\345\210\235\350\257\206vue.md" "b/\350\202\226\345\277\227\345\215\216/20250407\342\200\224\345\210\235\350\257\206vue.md"
new file mode 100644
index 0000000..c137b23
--- /dev/null
+++ "b/\350\202\226\345\277\227\345\215\216/20250407\342\200\224\345\210\235\350\257\206vue.md"
@@ -0,0 +1,72 @@
+## 什么是 Vue？
+
+Vue (发音为 /vjuː/，类似 **view**) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
+
+下面是一个最基本的示例：
+
+```js
+import { createApp, ref } from 'vue'
+
+createApp({
+  setup() {
+    return {
+      count: ref(0)
+    }
+  }
+}).mount('#app')
+```
+
+```html
+<div id="app">
+  <button @click="count++">
+    Count is: {{ count }}
+  </button>
+</div>
+```
+
+上面的示例展示了 Vue 的两个核心功能：
+
+- **声明式渲染**：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
+- **响应性**：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
+
+你可能已经有了些疑问——先别急，在后续的文档中我们会详细介绍每一个细节。现在，请继续看下去，以确保你对 Vue 作为一个框架到底提供了什么有一个宏观的了解。
+
+## 渐进式框架
+
+Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：
+
+- 无需构建步骤，渐进式增强静态的 HTML
+- 在任何页面中作为 Web Components 嵌入
+- 单页应用 (SPA)
+- 全栈 / 服务端渲染 (SSR)
+- Jamstack / 静态站点生成 (SSG)
+- 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面
+
+如果你是初学者，可能会觉得这些概念有些复杂。别担心！理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。即使你不是这些方面的专家，也能够跟得上。
+
+如果你是有经验的开发者，希望了解如何以最合适的方式在项目中引入 Vue，或者是对上述的这些概念感到好奇，我们在[使用 Vue 的多种方式](https://cn.vuejs.org/guide/extras/ways-of-using-vue.html)中讨论了有关它们的更多细节。
+
+无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。如果你已经是一个老手，你可以根据实际场景来选择使用 Vue 的最佳方式，在各种场景下都可以保持同样的开发效率。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。
+
+## 单文件组件
+
+在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为**单文件组件** (也被称为 `*.vue` 文件，英文 Single-File Components，缩写为 **SFC**)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例：
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const count = ref(0)
+</script>
+
+<template>
+  <button @click="count++">Count is: {{ count }}</button>
+</template>
+
+<style scoped>
+button {
+  font-weight: bold;
+}
+</style>
+```
+
+单文件组件是 Vue 的标志性功能。如果你的用例需要进行构建，我们推荐用它来编写 Vue 组件。你可以在后续相关章节里了解更多关于[单文件组件的用法及用途](https://cn.vuejs.org/guide/scaling-up/sfc.html)。但你暂时只需要知道 Vue 会帮忙处理所有这些构建工具的配置就好。
\ No newline at end of file
diff --git "a/\350\202\226\345\277\227\345\215\216/20250408\342\200\224\345\210\233\345\273\272vue.md" "b/\350\202\226\345\277\227\345\215\216/20250408\342\200\224\345\210\233\345\273\272vue.md"
new file mode 100644
index 0000000..1c85470
--- /dev/null
+++ "b/\350\202\226\345\277\227\345\215\216/20250408\342\200\224\345\210\233\345\273\272vue.md"
@@ -0,0 +1,124 @@
+# 创建一个 Vue 应用
+
+## 应用实例
+
+每个 Vue 应用都是通过 [`createApp`](https://cn.vuejs.org/api/application.html#createapp) 函数创建一个新的 **应用实例**：
+
+```js
+import { createApp } from 'vue'
+
+const app = createApp({
+  /* 根组件选项 */
+})
+```
+
+## 根组件
+
+我们传入 `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 中的根组件模板
+
+根组件的模板通常是组件本身的一部分，但也可以直接通过在挂载容器内编写模板来单独提供：
+
+```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` 作为模板。
+
+DOM 内模板通常用于[无构建步骤](https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn)的 Vue 应用程序。它们也可以与服务器端框架一起使用，其中根模板可能是由服务器动态生成的。
+
+## 应用配置
+
+应用实例会暴露一个 `.config` 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：
+
+```
+app.config.errorHandler = (err) => {
+  /* 处理错误 */
+}
+```
+
+应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：
+
+```js
+app.component('TodoDeleteButton', TodoDeleteButton)
+```
+
+这使得 `TodoDeleteButton` 在应用的任何地方都是可用的。我们会在指南的后续章节中讨论关于组件和其他资源的注册。你也可以在 [API 参考](https://cn.vuejs.org/api/application.html)中浏览应用实例 API 的完整列表。
+
+确保在挂载应用实例之前完成所有应用配置！
+
+## 多个应用实例
+
+应用实例并不只限于一个。`createApp` API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
+
+```js
+const app1 = createApp({
+  /* ... */
+})
+app1.mount('#container-1')
+
+const app2 = createApp({
+  /* ... */
+})
+app2.mount('#container-2')
+```
+
+如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。
\ No newline at end of file
diff --git "a/\350\202\226\345\277\227\345\215\216/20250409\342\200\224\351\200\211\351\241\271\345\274\217\345\222\214\347\273\204\345\220\210\345\274\217.md" "b/\350\202\226\345\277\227\345\215\216/20250409\342\200\224\351\200\211\351\241\271\345\274\217\345\222\214\347\273\204\345\220\210\345\274\217.md"
new file mode 100644
index 0000000..c4109c3
--- /dev/null
+++ "b/\350\202\226\345\277\227\345\215\216/20250409\342\200\224\351\200\211\351\241\271\345\274\217\345\222\214\347\273\204\345\220\210\345\274\217.md"
@@ -0,0 +1,85 @@
+## API 风格
+
+Vue 的组件可以按两种不同的风格书写：**选项式 API** 和**组合式 API**。
+
+### 选项式 API (Options API)
+
+使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 `data`、`methods` 和 `mounted`。选项所定义的属性都会暴露在函数内部的 `this` 上，它会指向当前的组件实例。
+
+```vue
+<script>
+export default {
+  // data() 返回的属性将会成为响应式的状态
+  // 并且暴露在 `this` 上
+  data() {
+    return {
+      count: 0
+    }
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    increment() {
+      this.count++
+    }
+  },
+
+  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
+  // 例如这个函数就会在组件挂载完成后被调用
+  mounted() {
+    console.log(`The initial count is ${this.count}.`)
+  }
+}
+</script>
+
+<template>
+  <button @click="increment">Count is: {{ count }}</button>
+</template>
+```
+
+### 组合式 API (Composition API)
+
+通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与  <script setup> 搭配使用。这个 `setup` attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，`<script setup>` 中的导入和顶层变量/函数都能够在模板中直接使用。
+
+下面是使用了组合式 API 与 `<script setup>` 改造后和上面的模板完全一样的组件：
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// 响应式状态
+const count = ref(0)
+
+// 用来修改状态、触发更新的函数
+function increment() {
+  count.value++
+}
+
+// 生命周期钩子
+onMounted(() => {
+  console.log(`The initial count is ${count.value}.`)
+})
+</script>
+
+<template>
+  <button @click="increment">Count is: {{ count }}</button>
+</template>
+```
+
+### 该选哪一个？
+
+两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。
+
+选项式 API 以“组件实例”的概念为中心 (即上述例子中的 `this`)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。
+
+组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。
+
+在[组合式 API FAQ](https://cn.vuejs.org/guide/extras/composition-api-faq.html) 章节中，你可以了解更多关于这两种 API 风格的对比以及组合式 API 所带来的潜在收益。
+
+如果你是使用 Vue 的新手，这里是我们的大致建议：
+
+- 在学习的过程中，推荐采用更易于自己理解的风格。再强调一下，大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。
+- 在生产项目中：
+  - 当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。
+  - 当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。
\ No newline at end of file
diff --git "a/\350\202\226\345\277\227\345\215\216/20250411\342\200\224\346\250\241\346\235\277\350\257\255\346\263\225.md" "b/\350\202\226\345\277\227\345\215\216/20250411\342\200\224\346\250\241\346\235\277\350\257\255\346\263\225.md"
new file mode 100644
index 0000000..c9f604a
--- /dev/null
+++ "b/\350\202\226\345\277\227\345\215\216/20250411\342\200\224\346\250\241\346\235\277\350\257\255\346\263\225.md"
@@ -0,0 +1,258 @@
+# 模板语法
+
+Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
+
+在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
+
+如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持[直接手写渲染函数](https://cn.vuejs.org/guide/extras/render-function.html)而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。
+
+## 文本插值
+
+最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
+
+```html
+<span>Message: {{ msg }}</span>
+```
+
+双大括号标签会被替换为[相应组件实例中](https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state) `msg` 属性的值。同时每次 `msg` 属性更改时它也会同步更新。
+
+## 原始 HTML
+
+双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 [`v-html` 指令](https://cn.vuejs.org/api/built-in-directives.html#v-html)：
+
+```html
+<p>Using text interpolation: {{ rawHtml }}</p>
+<p>Using v-html directive: <span v-html="rawHtml"></span></p>
+```
+
+这里我们遇到了一个新的概念。这里看到的 `v-html` attribute 被称为一个**指令**。指令由 `v-` 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 `rawHtml` 属性保持同步。
+
+`span` 的内容将会被替换为 `rawHtml` 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，你不能使用 `v-html` 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。
+
+安全警告
+
+在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 [XSS 漏洞](https://zh.wikipedia.org/wiki/跨網站指令碼)。请仅在内容安全可信时再使用 `v-html`，并且**永远不要**使用用户提供的 HTML 内容。
+
+## Attribute 绑定
+
+双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 [`v-bind` 指令](https://cn.vuejs.org/api/built-in-directives.html#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 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。
+
+> 接下来的指引中，我们都将在示例中使用简写语法，因为这是在实际开发中更常见的用法。
+
+### 同名简写
+
+- 仅支持 3.4 版本及以上
+
+如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值：
+
+```html
+<!-- 与 :id="id" 相同 -->
+<div :id></div>
+
+<!-- 这也同样有效 -->
+<div v-bind:id></div>
+```
+
+这与在 JavaScript 中声明对象时使用的属性简写语法类似。请注意，这是一个只在 Vue 3.4 及以上版本中可用的特性。
+
+### 布尔型 Attribute
+
+[布尔型 attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes#布尔值属性) 依据 true / false 值来决定 attribute 是否应该存在于该元素上。[`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) 就是最常见的例子之一。
+
+`v-bind` 在这种场景下的行为略有不同：
+
+```html
+<button :disabled="isButtonDisabled">Button</button>
+```
+
+当 `isButtonDisabled` 为[真值](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)或一个空字符串 (即 `<button disabled="">`) 时，元素会包含这个 `disabled` attribute。而当其为其他[假值](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)时 attribute 将被忽略。
+
+### 动态绑定多个值
+
+如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
+
+```js
+const objectOfAttrs = {
+  id: 'container',
+  class: 'wrapper',
+  style: 'background-color:green'
+}
+```
+
+通过不带参数的 `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` 后面。
+
+因此，下面的例子都是**无效**的：
+
+```html
+<!-- 这是一个语句，而非表达式 -->
+{{ var a = 1 }}
+
+<!-- 条件控制也不支持，请使用三元表达式 -->
+{{ if (ok) { return message } }}
+```
+
+### 调用函数
+
+可以在绑定的表达式中使用一个组件暴露的方法：
+
+```html
+<time :title="toTitleDate(date)" :datetime="date">
+  {{ formatDate(date) }}
+</time>
+```
+
+TIP
+
+绑定在表达式中的方法在组件每次更新时都会被重新调用，因此**不**应该产生任何副作用，比如改变数据或触发异步操作。
+
+### 受限的全局访问
+
+模板中的表达式将被沙盒化，仅能够访问到[有限的全局对象列表](https://github.com/vuejs/core/blob/main/packages/shared/src/globalsAllowList.ts#L3)。该列表中会暴露常用的内置全局对象，比如 `Math` 和 `Date`。
+
+没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 `window` 上的属性。然而，你也可以自行在 [`app.config.globalProperties`](https://cn.vuejs.org/api/application.html#app-config-globalproperties) 上显式地添加它们，供所有的 Vue 表达式使用。
+
+## 指令 Directives
+
+指令是带有 `v-` 前缀的特殊 attribute。Vue 提供了许多[内置指令](https://cn.vuejs.org/api/built-in-directives.html)，包括上面我们所介绍的 `v-bind` 和 `v-html`。
+
+指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 `v-for`、`v-on` 和 `v-slot`)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 [`v-if`](https://cn.vuejs.org/api/built-in-directives.html#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 表达式，需要包含在一对方括号内：
+
+```
+<!--
+注意，参数表达式有一些约束，
+参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
+-->
+<a v-bind:[attributeName]="url"> ... </a>
+
+<!-- 简写 -->
+<a :[attributeName]="url"> ... </a>
+```
+
+这里的 `attributeName` 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 `attributeName`，其值为 `"href"`，那么这个绑定就等价于 `v-bind:href`。
+
+相似地，你还可以将一个函数绑定到动态的事件名称上：
+
+```html
+<a v-on:[eventName]="doSomething"> ... </a>
+
+<!-- 简写 -->
+<a @[eventName]="doSomething"> ... </a>
+```
+
+在此示例中，当 `eventName` 的值是 `"focus"` 时，`v-on:[eventName]` 就等价于 `v-on:focus`。
+
+#### 动态参数值的限制
+
+动态参数中表达式的值应当是一个字符串，或者是 `null`。特殊值 `null` 意为显式移除该绑定。其他非字符串的值会触发警告。
+
+#### 动态参数语法的限制
+
+动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。例如下面的示例：
+
+```
+<!-- 这会触发一个编译器警告 -->
+<a :['foo' + bar]="value"> ... </a>
+```
+
+如果你需要传入一个复杂的动态参数，我们推荐使用[计算属性](https://cn.vuejs.org/guide/essentials/computed.html)替换复杂的表达式，也是 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`](https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers) 和 [`v-model`](https://cn.vuejs.org/guide/essentials/forms.html#modifiers) 的功能时，你将会看到其他修饰符的例子。
+
+最后，在这里你可以直观地看到完整的指令语法：
+
+![指令语法图](https://cn.vuejs.org/assets/directive.DtZKvoAo.png)
\ No newline at end of file
-- 
Gitee