vue.js基础知识整理
1. Vue 实例
1.1 创建⼀个Vue实例
⼀个 Vue 应⽤由⼀个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复⽤的组件树组成。
1.2 数据与⽅法
数据的响应式渲染
当⼀个 Vue 实例被创建时，它向 Vue 的响应式系统中加⼊了其 data 对象中能到的所有的属性。当这些属性的值发⽣改变时，视图将会产⽣“响应”，即匹配更新为新的值。(注意的是只有当实例被创建时 data 中存在的属性才是响应式的。)
使⽤ Object.freeze()，这会阻⽌修改现有的属性，也意味着响应系统⽆法再追踪变化。
实例属性与⽅法
除了数据属性，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 表达式
对于所有的数据绑定，Vue.js 都提供了完全的 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 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
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，Vue.js 会⾃动侦测并添加相应的前缀。
多重值
从 2.3.0 ，可以为 style 绑定中的属性提供⼀个包含多个值的数组，常⽤于提供多个带前缀的值。
5. 条件渲染
5.1 v-if
在<template>元素上使⽤ v-if 条件渲染分组
v-if 指令必须添加到⼀个元素上，如果想切换元素，可以把⼀个 <template> 元素当做不可见的包裹元素，并在上⾯使⽤ v-if。最终的渲染结果将不包含 <template> 元素。
v-else
使⽤ v-else 指令来表⽰ v-if 的“else 块”
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后⾯，否则它将不会被识别。
v-else-if
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使⽤
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
⽤ key 管理可复⽤的元素
Vue 会尽可能⾼效地渲染元素，通常会复⽤已有元素⽽不是从头开始渲染。这么做除了使 Vue 变得⾮常快之外，还有其它⼀些好处。例如，如果你允许⽤户在不同的登录⽅式之间切换demo，代码中切换 loginType 将不会清除⽤户已经输⼊的内容。因为两个模板使⽤了相同的元素，<input>不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了⼀种⽅式来表达“这两个元素是完全独⽴的，不要复⽤它们”。只需添加⼀个具有唯⼀值的 key 属性即可，注意，<label> 元素仍然会被⾼效地复⽤，因为它们没有添加 key 属性。
5.2 v-show
另⼀个⽤于根据条件展⽰元素的选项是 v-show 指令。⽤法⼤致⼀样, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。注意，v-show 不⽀持 <template> 元素，也不⽀持 v-else。
5.3 v-if vs v-show
v-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. 列表渲染javascript全局数组
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 通过⼀个对象的属性来迭代。你也可以提供第⼆个的参数为键名 。第三个参数为索引。 注意，在遍历对象时，是按Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是⼀致的。
6.3 key
当 Vue.js ⽤ v-for 正在更新已渲染过的元素列表时，它默认⽤“就地复⽤”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， ⽽是简单复⽤此处每个元素，并且确保它在特定索引下显⽰已被渲染过的每个元素。
这个默认的模式是⾼效的，但是只适⽤于不依赖⼦组件状态或临时 DOM 状态 (例如：表单输⼊值) 的列表渲染输出。
为了给 Vue ⼀个提⽰，以便它能跟踪每个节点的⾝份，从⽽重⽤和重新排序现有元素，你需要为每项提供⼀个唯⼀ key 属性。理想的 key 值是每项都有的且唯⼀的 id。
<div v-for="item in items":key="item.id">
<!-- 内容 -->
</div>
建议尽可能在使⽤ v-for 时提供 key，除⾮遍历输出的 DOM 内容⾮常简单，或者是刻意依赖默认⾏为以获取性能上的提升。
因为它是 Vue 识别节点的⼀个通⽤机制，key 并不与 v-for 特别关联，key 还具有其他⽤途。
6.4 数组更新检测
变异⽅法
Vue 包含⼀组观察数组的变异⽅法，所以它们也将会触发视图更新。这些⽅法如下：
push()pop()shift()unshift()splice()sort()reverse()
你打开控制台，然后⽤前⾯例⼦的 items 数组调⽤变异⽅法：example1.items.push({ message: ‘Baz’ }) 。
替换数组
变异⽅法 (mutation method)，顾名思义，会改变被这些⽅法调⽤的原始数组。相⽐之下，也有⾮变异 (non-mutating method) ⽅法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回⼀个新数组。当使⽤⾮变异⽅法时，可以⽤新数组替换旧数组
example1.items = example1.items.filter(function (item) {
ssage.match(/Foo/)
})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并⾮如此。Vue 为了
使得 DOM 元素得到最⼤范围的重⽤⽽实现了⼀些智能的、启发式的⽅法，所以⽤⼀个含有相同元素的数组去替换原来的数组是⾮常⾼效的操作。
注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利⽤索引直接设置⼀个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例⼦：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第⼀类问题，以下两种⽅式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也可以使⽤ vm.$set 实例⽅法，该⽅法是全局⽅法 Vue.set 的⼀个别名：
vm.$set(vm.items, indexOfItem, newValue)
为了解决第⼆类问题，你可以使⽤ splice：
vm.items.splice(newLength)
6.5 对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使⽤ Vue.set(object, key, value) ⽅法向嵌套对象添加响应式属性。你还可以使⽤ vm.$set 实例⽅法，它只是全局 Vue.set 的别名。有时你可能需要为已有对象赋予多个新属性，⽐如使⽤ Object.assign() 或 _.extend()。在这种情况下，你应该⽤两个对象的属性创建⼀个新的对象。所以，如果你想添加新的响应式属性，不要这样做你应该这样做。
6.6 显⽰过滤/排序结果
有时，我们想要显⽰⼀个数组的过滤或排序副本，⽽不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。在计算属性不适⽤的情况下 (例如，在嵌套 v-for 循环中) 你可以使⽤⼀个 method ⽅法。
6.7 ⼀段取值范围的 v-for
v-for 也可以取整数。在这种情况下，它将重复多次模板。
6.8 v-for on a <template>
类似于 v-if，你也可以利⽤带有 v-for 的 <template> 渲染多个元素。
6.9 v-for with v-if
当它们处于同⼀节点，v-for 的优先级⽐ v-if 更⾼，这意味着 v-if 将分别重复运⾏于每个 v-for 循环中。当你想为仅有的⼀些项渲染节点时，这种优先级的机制会⼗分有⽤。⽽如果你的⽬的是有条件地跳过循环的执⾏，那么可以将 v-if 置于外层元素 (或 <template>)上。
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 事件修饰符

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。