2023年7月18日发(作者：)
基础知识整理1. Vue 实例1.1 创建⼀个Vue实例⼀个 Vue 应⽤由⼀个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复⽤的组件树组成。1.2 数据与⽅法数据的响应式渲染当⼀个 Vue 实例被创建时，它向 Vue 的响应式系统中加⼊了其 data 对象中能找到的所有的属性。当这些属性的值发⽣改变时，视图将会产⽣“响应”，即匹配更新为新的值。(注意的是只有当实例被创建时 data 中存在的属性才是响应式的。)
使⽤ ()，这会阻⽌修改现有的属性，也意味着响应系统⽆法再追踪变化。实例属性与⽅法除了数据属性，Vue 实例还暴露了⼀些有⽤的实例属性与⽅法。它们都有前缀 $，以便与⽤户定义的属性区分开来。1.3 实例⽣命周期钩⼦每个 Vue 实例在被创建时都要经过⼀系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函数，这给了⽤户在不同阶段添加⾃⼰的代码的机会。
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 8个声明周期
⽣命周期钩⼦的 this 上下⽂指向调⽤它的 Vue 实例。注意：不要在选项属性或回调上使⽤箭头函数，会改变this指向。2. 模版语法2.1插值⽂本使⽤“Mustache”语法 (双⼤括号) 的⽂本插值, ⼀次性插值,当数据改变时，插值处的内容不会更新。原始HTML输出真正的 HTML，你需要使⽤ v-html 指令注意：你的站点上动态渲染的任意 HTML 可能会⾮常危险，因为它很容易导致 XSS 攻击。请只对可信内容使⽤ HTML 插值，绝不要对⽤户提供的内容使⽤插值。特性Mustache 语法不能作⽤在 HTML 特性上，遇到这种情况应该使⽤ v-bind 指令当绑定属性值为null、undefined 或 false特性甚⾄不会被包含在渲染出来的元素中使⽤ JavaScript 表达式对于所有的数据绑定， 都提供了完全的 JavaScript 表达式⽀持。限制，每个绑定都只能包含单个表达式，语句不⽣效。注意：模板表达式都被放在沙盒中，只能访问全局变量的⼀个⽩名单，如 Math 和 Date 。你不应该在模板表达式中试图访问⽤户定义的全局变量。2.2 指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产⽣的连带影响，响应式地作⽤于 DOM。
参数 ⼀些指令能够接收⼀个“参数”，在指令名称之后以冒号表⽰。例如，v-bind 指令可以⽤于响应式地更新 HTML 特性
修饰符 . 指明的特殊后缀，⽤于指出⼀个指令应该以特殊⽅式绑定。如.prevent组织form提交默认⾏为
缩写 v-bind缩写 : , v-on缩写 @3. 计算属性和侦听器3.1 计算属性在模版中使⽤表达式，不易于观察，可使⽤计算属性代替。对于任何复杂逻辑，你都应当使⽤计算属性。
⼀个基础的例⼦,你可以像绑定普通属性⼀样在模板中绑定计算属性。计算属性缓存 vs ⽅法两种⽅式的最终结果确实是完全相同的。然⽽，不同的是计算属性是基于它们的依赖进⾏缓存的。计算属性只有在它的相关依赖发⽣改变时才会重新求值。这就意味着只要 message 还没有发⽣改变，多次访问 reversedMessage 计算属性会⽴即返回之前的计算结果，⽽不必再次执⾏函数。相⽐之下，每当触发重新渲染时，调⽤⽅法将总会再次执⾏函数。
我们为什么需要缓存？假设我们有⼀个性能开销⽐较⼤的计算属性 A，它需要遍历⼀个巨⼤的数组并做⼤量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执⾏ A 的 getter！如果你不希望有缓存，请⽤⽅法来替代。计算属性 vs 侦听属性侦听属性：观察和响应 Vue 实例上的数据变动。当你有⼀些数据需要随着其它数据变动⽽变动时，你很容易滥⽤ watch。然⽽，通常更好的做法是使⽤计算属性⽽不是命令式的 watch 回调。计算属性的 setter计算属性默认只有 getter ，不过在需要时你也可以提供⼀个 setter。3.2 侦听器虽然计算属性在⼤多数情况下更合适，但有时也需要⼀个⾃定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了⼀个更通⽤的⽅法，来响应数据的变化。当需要在数据变化时执⾏异步或开销较⼤的操作时，这个⽅式是最有⽤的。 除了 watch 选项之外，您还可以使⽤命令式的 vm.$watch API。4. Class 与 Style 绑定操作元素的 class 列表和内联样式是数据绑定的⼀个常见需求。因为它们都是属性，所以我们可以⽤ v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接⿇烦且易错。因此，在将 v-bind ⽤于 class 和 style 时， 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。4.1 绑定 HTML Class对象语法传给 v-bind:class ⼀个对象，以动态地切换 class , v-bind:class 指令也可以与普通的 class 属性共存
绑定的数据对象不必内联定义在模板⾥,绑定⼀个返回对象的计算属性。这是⼀个常⽤且强⼤的模式数组语法我们可以把⼀个数组传给 v-bind:class，以应⽤⼀个 class 列表,根据条件切换列表中的 class，可以⽤三元表达式当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使⽤对象语法⽤在组件上当在⼀个⾃定义组件上使⽤ class 属性时，这些类将被添加到该组件的根元素上⾯。这个元素上已经存在的类不会被覆盖。
对于带数据绑定 class 也同样适⽤。4.2 绑定内联样式对象语法v-bind:style 的对象语法⼗分直观——看着⾮常像 CSS，但其实是⼀个 JavaScript 对象。CSS 属性名可以⽤驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得⽤单引号括起来) 来命名。，直接绑定到⼀个样式对象通常更好，这会让模板更清晰,同样的，对象语法常常结合返回对象的计算属性使⽤。数组语法v-bind:style 的数组语法可以将多个样式对象应⽤到同⼀个元素上⾃动添加前缀当 v-bind:style 使⽤需要添加浏览器引擎前缀的 CSS 属性时，如 transform， 会⾃动侦测并添加相应的前缀。多重值从 2.3.0 ,可以为 style 绑定中的属性提供⼀个包含多个值的数组，常⽤于提供多个带前缀的值。5. 条件渲染5.1 v-if在 元素上使⽤ v-if 条件渲染分组v-if 指令必须添加到⼀个元素上,如果想切换元素,可以把⼀个
元素当做不可见的包裹元素，并在上⾯使⽤ v-if。最终的渲染结果将不包含
元素。v-else使⽤ v-else 指令来表⽰ v-if 的“else 块”
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后⾯，否则它将不会被识别。v-else-ifv-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使⽤
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。⽤ key 管理可复⽤的元素Vue 会尽可能⾼效地渲染元素，通常会复⽤已有元素⽽不是从头开始渲染。这么做除了使 Vue 变得⾮常快之外，还有其它⼀些好处。例如，如果你允许⽤户在不同的登录⽅式之间切换demo,代码中切换 loginType 将不会清除⽤户已经输⼊的内容。因为两个模板使⽤了相同的元素，不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了⼀种⽅式来表达“这两个元素是完全独⽴的，不要复⽤它们”。只需添加⼀个具有唯⼀值的 key 属性即可,注意，
元素，也不⽀持 v-else。5.3 v-if vs v-showv-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会开始渲染条件块。
相⽐之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进⾏切换。
⼀般来说，v-if 有更⾼的切换开销，⽽ v-show 有更⾼的初始渲染开销。因此，如果需要⾮常频繁地切换，则使⽤ v-show 较好；如果在运⾏时条件很少改变，则使⽤ v-if 较好。5.4 v-if 与 v-for ⼀起使⽤当 v-if 与 v-for ⼀起使⽤时，v-for 具有⽐ v-if 更⾼的优先级。6. 列表渲染6.1 ⽤ v-for 把⼀个数组对应为⼀组元素我们⽤ v-for 指令根据⼀组数组的选项列表进⾏渲染。v-for 指令需要使⽤ item in items 形式的特殊语法，items 是源数据数组并且 item是数组元素迭代的别名 。在 v-for 块中，我们拥有对⽗作⽤域属性的完全访问权限。v-for 还⽀持⼀个可选的第⼆个参数为当前项的索引。你也可以⽤ of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。6.2 ⼀个对象的 v-for你也可以⽤ v-for 通过⼀个对象的属性来迭代。你也可以提供第⼆个的参数为键名 。第三个参数为索引。 注意，在遍历对象时，是按() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是⼀致的。6.3 key当 ⽤ v-for 正在更新已渲染过的元素列表时，它默认⽤“就地复⽤”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， ⽽是简单复⽤此处每个元素，并且确保它在特定索引下显⽰已被渲染过的每个元素。
这个默认的模式是⾼效的，但是只适⽤于不依赖⼦组件状态或临时 DOM 状态 (例如：表单输⼊值) 的列表渲染输出。
为了给 Vue ⼀个提⽰，以便它能跟踪每个节点的⾝份，从⽽重⽤和重新排序现有元素，你需要为每项提供⼀个唯⼀ key 属性。理想的 key值是每项都有的且唯⼀的 id。
因为它是 Vue 识别节点的⼀个通⽤机制，key 并不与 v-for 特别关联，key 还具有其他⽤途。6.4 数组更新检测变异⽅法Vue 包含⼀组观察数组的变异⽅法，所以它们也将会触发视图更新。这些⽅法如下：
push()pop()shift()unshift()splice()sort()reverse()
你打开控制台，然后⽤前⾯例⼦的 items 数组调⽤变异⽅法：({ message: ‘Baz’ }) 。替换数组变异⽅法 (mutation method)，顾名思义，会改变被这些⽅法调⽤的原始数组。相⽐之下，也有⾮变异 (non-mutating method) ⽅法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回⼀个新数组。当使⽤⾮变异⽅法时，可以⽤新数组替换旧数组 = (function (item) { return (/Foo/)})你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并⾮如此。Vue 为了使得 DOM 元素得到最⼤范围的重⽤⽽实现了⼀些智能的、启发式的⽅法，所以⽤⼀个含有相同元素的数组去替换原来的数组是⾮常⾼效的操作。注意事项由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利⽤索引直接设置⼀个项时，例如：[indexOfItem] = newValue
当你修改数组的长度时，例如： = newLength
举个例⼦：var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})[1] = 'x' // 不是响应性的 = 2 // 不是响应性的为了解决第⼀类问题，以下两种⽅式都可以实现和 [indexOfItem] = newValue 相同的效果，同时也将触发状态更新：// (, indexOfItem, newValue)// (indexOfItem, 1, newValue)你也可以使⽤ vm.$set 实例⽅法，该⽅法是全局⽅法 的⼀个别名：vm.$set(, indexOfItem, newValue)为了解决第⼆类问题，你可以使⽤ splice：(newLength)6.5 对象更改检测注意事项还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使⽤ (object, key, value) ⽅法向嵌套对象添加响应式属性。你还可以使⽤ vm.$set 实例⽅法，它只是全局 的别名。有时你可能需要为已有对象赋予多个新属性，⽐如使⽤ () 或 _.extend()。在这种情况下，你应该⽤两个对象的属性创建⼀个新的对象。所以，如果你想添加新的响应式属性,不要这样做你应该这样做。6.6 显⽰过滤/排序结果有时，我们想要显⽰⼀个数组的过滤或排序副本，⽽不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。在计算属性不适⽤的情况下 (例如，在嵌套 v-for 循环中) 你可以使⽤⼀个 method ⽅法。6.7 ⼀段取值范围的 v-forv-for 也可以取整数。在这种情况下，它将重复多次模板。6.8 v-for on a
类似于 v-if，你也可以利⽤带有 v-for 的
渲染多个元素。6.9 v-for with v-if当它们处于同⼀节点，v-for 的优先级⽐ v-if 更⾼，这意味着 v-if 将分别重复运⾏于每个 v-for 循环中。当你想为仅有的⼀些项渲染节点时，这种优先级的机制会⼗分有⽤。⽽如果你的⽬的是有条件地跳过循环的执⾏，那么可以将 v-if 置于外层元素 (或
)上。6.10 ⼀个组件的 v-for在⾃定义组件⾥，你可以像任何普通元素⼀样⽤ v-for 。然⽽，任何数据都不会被⾃动传递到组件⾥，因为组件有⾃⼰独⽴的作⽤域。为了把迭代数据传递到组件⾥，我们要⽤ props。7. 事件处理7.1 监听事件可以⽤ v-on 指令监听 DOM 事件，并在触发时运⾏⼀些 JavaScript 代码。7.2 事件处理⽅法然⽽许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可⾏的。因此 v-on 还可以接收⼀个需要调⽤的⽅法名称。7.3 内联处理器中的⽅法除了直接绑定到⼀个⽅法，也可以在内联 JavaScript 语句中调⽤⽅法
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以⽤特殊变量 $event 把它传⼊⽅法7.4 事件修饰符在事件处理程序中调⽤ tDefault() 或 opagation() 是⾮常常见的需求。尽管我们可以在⽅法中轻松实现这点，但更好的⽅式是：⽅法只有纯粹的数据逻辑，⽽不是去处理 DOM 事件细节。为了解决这个问题， 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表⽰的。
.stop .prevent .capture .self .once .passive
使⽤修饰符时，顺序很重要；相应的代码会以同样的顺序产⽣。因此，⽤ v-on: 会阻⽌所有的点击，⽽ v-on:t 只会阻⽌对元素⾃⾝的点击。
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符 。这个 .passive 修饰符尤其能够提升移动端的性能。
注意，不要把 .passive 和 .prevent ⼀起使⽤，因为 .prevent 将会被忽略，同时浏览器可能会向你展⽰⼀个警告。请记住，.passive 会告诉浏览器你不想阻⽌事件的默认⾏为。7.5 按键修饰符在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符,记住所有的 keyCode ⽐较困难，所以 Vue 为最常⽤的按键提供了别名,如.enter 。
全部的按键别名：.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
可以通过全局 es 对象⾃定义按键修饰符别名。⾃动匹配按键修饰符你也可直接将 暴露的任意有效按键名转换为 kebab-case 来作为修饰符在上⾯的例⼦中，处理函数仅在 $ === ‘PageDown’ 时被调⽤。
注意，有⼀些按键 (.esc 以及所有的⽅向键) 在 IE9 中有不同的 key 值, 如果你想⽀持 IE9，它们的内置别名应该是⾸选。7.6 系统修饰键可以⽤如下修饰符来实现仅在按下相应按键时才触发⿏标或键盘事件的监听器。
.ctrl .alt .shift .meta⿏标按钮修饰符2.2.0 新增 .left .right .middle 这些修饰符会限制处理函数仅响应特定的⿏标按钮。7.7 为什么在 HTML 中监听事件?你可能注意到这种事件监听的⽅式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担⼼，因为所有的 事件处理⽅法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使⽤ v-on 有⼏个好处：扫⼀眼 HTML 模板便能轻松定位在 JavaScript 代码⾥对应的⽅法。
因为你⽆须在 JavaScript ⾥⼿动绑定事件，你的 ViewModel 代码可以是⾮常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当⼀个 ViewModel 被销毁时，所有的事件处理器都会⾃动被删除。你⽆须担⼼如何⾃⼰清理它们。8. 表单输⼊绑定8.1 基础⽤法⽤ v-model 指令在表单
及
) 并不会⽣效，应⽤ v-model 来代替。
复选框 单个复选框，绑定到布尔值单个复选框，绑定到布尔值。多个复选框，绑定到同⼀个数组
单选按钮
选择框 单选时 多选时 (绑定到⼀个数组) ⽤ v-for 渲染的动态选项
如果 v-model 表达式的初始值未能匹配任何选项，
这⾥的 true-value 和 false-value 特性并不会影响输⼊控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的⼀个能够被提交，(⽐如“yes”或“no”)，请换⽤单选按钮。
单选按钮
选择框的选项8.3 修饰符.lazy 添加 lazy 修饰符，是v-model转变为使⽤ change 事件进⾏同步实时更新
.number ⾃动将⽤户的输⼊值转为数值类型
.trim ⾃动过滤⽤户输⼊的⾸尾空⽩字符8.4 在组件上使⽤ v-model阅读指南 ⾃定义输⼊组件9. 组件基础Vue 组件的⽰例
组件的复⽤
组件进⾏任意次数的复⽤,每⽤⼀次组件，就会有⼀个它的新实例被创建。 注意：组件的 data 选项必须是⼀个函数，因此每个实例可以维护⼀份被返回对象的独⽴的拷贝。
组件的组织
应⽤会以⼀棵嵌套的组件树的形式来组织。组件使⽤前必须先注册以便Vue能够识别。注册分为全局注册和局部注册
通过 Prop 向⼦组件传递数据
单个根元素 每个组件必须只有⼀个根元素
通过事件向⽗级组件发送消息
调⽤内建的
$emit ⽅法并传⼊事件的名字，来向⽗级组件触发⼀个事件
使⽤事件抛出⼀个值 使⽤
$emit 的第⼆个参数来提供这个值,⽗级组件监听时通过$event访问这个值,如果这个事件处理函数是⼀个⽅法,这个值将会作为第⼀个参数传⼊这个⽅法
组件上使⽤ v-model
通过插槽分发内容 在需要的地⽅加⼊插槽slot
动态组件
在不同组件之间进⾏动态切换是⾮常有⽤的，⽐如在⼀个多标签的界⾯⾥
解析 DOM 模板时的注意事项10. 参考链接
发布者：admin，转转请注明出处：http://www.yc00.com/news/1689629196a272109.html
评论列表（0条）