前端需要理解的Vue知识
1 模板语法
Vue使用基于 HTML 的模板语法，能声明式地将其组件实例的数据绑定到DOM。所有Vue 模板可以被符合规范的浏览器和 HTML 解析器解析。Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。也支持使用JSX手写渲染函数，但不会享受到和模板同等级别的编译时优化。
Vue在所有的数据绑定中都支持完整的 JavaScript 表达式，表达式都会被作为 JavaScript，以当前组件实例为作用域解析执行。每个绑定仅支持单一表达式，即一段能够被求值的 JavaScript 代码，一个简单的判断方法是是否可以合法地写在 return 后面。因此，可以在绑定的表达式中使用组件暴露的方法，但绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
模板中的表达式将被沙盒化，仅能够访问到暴露的有限的常用内置全局对象列表。然而可以自行在app.config.globalProperties上显式地添加它们，供所有的Vue表达式使用。
模板数据绑定形式：
- 最基本的数据绑定形式是文本插值，“Mustache”语法（即双大括号）。双大括号标签会被替换为对应组件实例的属性值，且被解析为纯文本，同时每次属性更改时它也会同步更新。
- Vue指令（以v-开头的特殊attribute）attribute绑定，其中响应式绑定元素的Attribute使用v-bind指令（简写为“ ：”），该指令指示Vue将元素的attribute与组件的属性值保持一致：
- 布尔型attribute依据true / false值来决定attribute是否应该存在于该元素上。当对应的组件的属性值是真值或一个空字符串时，元素会包含这个attribute，而当其为其他假值时attribute将被忽略。
- 如果绑定的值是null或者undefined，那么该attribute将会从渲染的元素上移除。
- 动态绑定多个值，通过不带参数（即冒号与等号之间）的v-bind将一个包含多个attribute的 JavaScript 对象绑定到单个元素上。
2 指令
指令attribute的期望值为一个 JavaScript 表达式（v-for、v-on 和 v-slot例外）。一个指令的任务是在其表达式的值变化时响应式地更新DOM。某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。指令参数上也可以使用一个JavaScript表达式包含在一对方括号内作为动态参数，它作为JavaScript表达式被动态执行，计算得到的值会被用作最终的参数：
- 动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
- 动态参数表达式存在语法限制，比如空格和引号在HTML attribute名称中都是不合法的，如果需要传入一个复杂的动态参数，推荐使用计算属性替换复杂的表达式。
- 当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写。单文件组件内的模板不受此限制。
修饰符是指令参数中以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()。
2.1 v-html 和 v-text
v-html 指令，更新元素的 innerHTML，期望的绑定值类型为string。
若想插入 HTML需要使用 v-html 指令，在当前组件实例上，将元素的 innerHTML 与 v-html对应的属性保持同步。不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。
2.2 v-if 和 v-show
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。也可以使用 v-else 为 v-if 添加一个“else 区块”。一个 v-else 或v-else-if元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。可以在元素上使用 v-if/v-else-if/v-else，该元素作为多个元素的包装器，且不包含在最终渲染的结果中。v-if 是真正的条件渲染，是惰性的，直到条件第一次为真才会渲染条件块，条件为假则条件块内的事件监听器和子组件被销毁，存在更高的切换开销，所以适合运行时条件切换少的场景。
v-show用法基本类似，不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性，且不能在上使用。v-show 实际是基于CSS的display属性进行切换，无论初始条件如何都会渲染，更高的初始渲染开销，所以适合条件切换频繁的场景。
2.3 v-if 和 v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名。v-for 也支持使用可选的第二个参数表示当前项的位置索引（v-for="(item, index) in items"）。每个 v-for 作用域都可以访问到父级作用域。也可以使用 of 作为分隔符来替代 in。也可以使用 v-for 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定，三个参数分别是属性值，属性名，位置索引。v-for 可以直接接受一个整数值num，会将该模板基于 1...num 的取值范围重复多次。也可以在 标签上使用 v-for 来渲染一个包含多个元素的块。
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。为了使得可以跟踪每个节点，从而重用和重新排序现有的元素，需要为每个元素对应的块提供一个唯一的 key attribute。当使用 时，key 应该被放置在 容器上。推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者有意采用默认行为来提高性能。key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。
可以直接在组件上使用 v-for，也需要提供key。但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，还需要传递 props。不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。
Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：push、pop、shift、unshift、splice、sort、reverse。变更方法，就是会对调用它们的原数组进行变更。而对于非变更方法filter、concat 、slice，即不会更改原数组，而总是返回一个新数组，需要将旧的数组替换为新的。由于Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。
如果需要显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据，则可以创建返回已过滤或已排序数组的计算属性。在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，可以使用methods方法操作中间态。在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本。
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高，Vue3中则相反，v-for 的优先级比 v-if 高。这意味着在 Vue2 中 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名，解决办法是在外新包装一层 再在其上使用 v-for 可以解决这个问题 。
但如果只有少部分因为 v-if 而不渲染，容易浪费 v-if的计算，因此最佳实践是先使用计算属性 computed 把data处理好，再用 v-for 渲染已处理好的。
3 样式设置
在 Vue 中，class 和 style 表达式的类型可以是字符串、对象或数组。:class（或：style）指令和一般的 class（或style） attribute 共存。在组件上同样支持字符串、数组和数组形式，使用时，组件上传递的会被添加到组件的根元素上且与该元素上已有的合并。如果组件有多个根元素，而组件的$attrs属性的$attrs.class（style）对应于组件上传递class（style），然后在组件内部指定某个根元素上:class进行接收即可。
字符串形式可以给class（style）传递字符串字面量（同HTML的内联），或者通过:class（:style）传递结果为字符串的表达式。
3.1 对象或数组形式绑定 class
对象形式通过给:class (v-bind:class 的缩写) 传递一个对象来动态切换 class，对象的属性名对应于class名，对象的属性值的真假值对应于该class名是否存在，对象既可以写成内联字面量的形式，也可以直接绑定一个对象的名字，或者一个返回对象的计算属性。
数组形式通过给:class绑定一个数组来渲染多个 CSS class，数组中的每个元素可以是对象形式或字符串形式。
3.2 对象或数组形式绑定 style
对象形式通过给:style(v-bind:style 的缩写) 传递一个对象来绑定style，对象的属性键值对分别对应于CSS的属性键值对，其中属性名推荐使用camelCase形式，也可以使用 kebab-cased 形式（即CSS 中的实际名称），对象的属性值对应于CSS属性对的属性值，属性值可以是由多个值构成的数组，仅会渲染浏览器支持的数组中最后一个值。对象既可以写成内联字面量的形式，也可以直接绑定一个对象的名字，或者一个返回对象的计算属性。
数组形式通过给:style绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上。
当在:style中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他它们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。
4 事件处理
使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:eventName="handler" 或 @eventName="handler"。事件处理器handler的值可以是：
- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)，包括对某个方法的调用。如果需要在内联事件处理器中访问事件参数，可以直接向调用某个方法时直接向该方法传入$event变量，或者使用内联箭头函数（第一个参数即事件参数），
- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。方法事件处理器会自动接收原生 DOM 事件并触发执行。
模板编译器会通过检查v-on的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。foo() 和 count++ 会被视为内联事件处理器；foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器。
为了使得事件处理器方法能更专注于数据逻辑而不用去处理 DOM 事件的细节，Vue 为v-on提供了用.表示的指令后缀的事件修饰符，包
- .stop 事件将停止捕获和冒泡的传递。
- .prevent 阻止事件默认行为。
- .self 仅当 event.target 是元素本身时才会触发事件处理器。
- .capture添加事件监听器时，使用 `capture` 捕获模式，与原生 addEventListener 事件相对应。
- .once 事件最多被触发一次。
- .passive。事件的默认行为将立即发生而非等待事件处理器执行完成，以防其中包含 event.preventDefault()。一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了不想阻止事件的默认行为。如果这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告。
- 事件修饰符可以使用链式书写，但需要注意调用顺序，因为相关代码是以相同的顺序生成的。比如，@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，然后再是元素本身时才会触发事件处理器。而 @click.self.prevent 则先是元素本身时才会触发事件处理器，再是只会阻止对元素本身的点击事件的默认行为。
同样，Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符，约束特定按键才触发键盘事件。可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。按键修饰符也可以使用链式书写。Vue 为一些常用的按键提供了别名：
- .enter
- .tab
- .delete (捕获“Delete”和“Backspace”两个按键)
- .esc
- .space
- .up
- .down
- .left
- .right
系统按键修饰符如下：
- ctrl
- .alt
- .shift
- .meta；在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。
请注意，系统按键修饰符和常规按键不同。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态，比如，keyup.ctrl 只会在仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。
.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。比如@click.exact仅当没有按下任何系统按键时触发；@click.ctrl.exact仅当按下 Ctrl 且未按任何其他键时才会触发。@click.ctrl当按下 Ctrl 时，即使同时还按下 Alt 或 Shift 也会触发。
鼠标按键修饰符将处理程序限定为由特定鼠标按键触发的事件，如下：
- .left
- .right
- .middle
5 表单输入绑定
为了避免在前端处理表单时手动将表单输入框的内容与JavaScript的值手动连接绑定和更改事件监听器的麻烦，Vue提供了v-model指令。
v-model可用于各种不同类型的输入，包括 、