前端框架Vue学习的心得记录（基础篇）
我的最新博客在：Secret_wu\'s coding note
目标：快速上手Vue框架（2.x版本）
方法：通过看Vue的官方手册（Vue官方网站）
内容：本博客记录一些学习Vue官方文档中的心得，便于日后启发。（基础篇）
再次学习vue的心得记录：（这是偏大致阅读了官方文档后，再次仔细学习Vue的心得记录）
前端框架Vue自学之初见Vue（一）
前端框架Vue自学之Vue基础语法（二）
前端框架Vue自学之ES6基本语法（补充）
注：遇到一些不懂的函数等，可以看官网的API参考。
正文：
一、介绍
1、Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。最基本核心功能有：声明式渲染，条件与循环，处理用户输入，组件化应用构建。
2、声明式渲染。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。指令带有前缀v-，以表示它们是 Vue 提供的特殊特性。
3、条件与循环。条件：v-if，v-else-if，v-else，v-show。用于控制条件选择去渲染对应的元素。注意只有被选中了的部分才会渲染在网页上（网页代码只显示了符合条件的元素），而v-show总是会渲染到页面，只是通过css的display属性控制显示与否。循环：v-for。
4、处理用户输入。包括表单处理。v-on指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。Vue 还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。
5、组件化应用构建。组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用，以使开发更易管理。在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。Vue.component（名称，对象）
二、Vue实例
1、创建Vue实例。一个 Vue 应用由一个通过new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
2、数据与方法。当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应系统中。只有当实例被创建时就已经存在于data中的属性才是响应式的。除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。
3、实例生命周期钩子。每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等（tips:挂载（mounting）是指由操作系统使一个存储设备（诸如硬盘、CD-ROM或共享资源）上的计算机文件和目录可供用户通过计算机的文件系统访问的一个过程）。注意：不要在选项属性或回调上使用箭头函数，因为它没this，会导致一些指向其他作用域而导致异常（原来的this指向Vue实例）。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期具体可以看官方的生命周期图示。
三、模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数（tips:虚拟DOM可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息;我们要尽量减少对DOM的操作，这是优化前端性能的必要手段，虚拟DOM就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率）。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。注意：如果在某些场景无法使用模板来创建我们的HTML，可以用JS写渲染函数或者是JSX（其是JS的扩展，运用于React架构中，其格式比较像是模版语言）。
1、插值
1.1 文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
1.2 原始HTML：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用v-html指令。注意：站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击（Cross Site Scripting，攻击全称跨站脚本攻击）。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
1.3 特性：Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令。
1.4 JavaScript表达式：表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，不能是语句和流控制（用三元表达式替代）。模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date ，不应该在模板表达式中试图访问用户定义的全局变量。（tips: 沙箱就是js中一块完全独立的区域,使用的都是自己独立的属性和方法）
2、指令
指令 (Directives) 是带有v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
2.1 参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示（注意不要留空格），例如v-bind指令可以用于响应式地更新 HTML 特，,v-on指令用于监听 DOM 事件。
2.2 动态参数：从 版本2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数，其会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。注意：参数表达式的写法存在一些约束（动态参数预期会求出一个字符串，异常情况下值为null。这个特殊的null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告），如对动态参数的值的约束和对动态参数的表达式的约束（动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的；在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写）。
2.3 修饰符：修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
3、缩写
v-前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v-前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v-前缀也变得没那么重要了。因此，Vue 为 v-bind：属性 和v-on:属性 这两个最常用的指令，提供了特定简写分别为，：属性和@属性。
四、计算属性和侦听器
1、计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，都应当使用计算属性。
1.1 例子：先声明了一个计算属性xx。然后在Vue实例定义中（computed:下面）提供的函数将用作属性xx的 getter 函数，从而实现一些复杂的逻辑，如某些依赖关系。当然，我们可以像绑定普通属性一样在模板中绑定计算属性。
1.2 计算属性缓存 vs 方法：我们可以通过定义Vue实例中方法（methods:下面）来实现上述例子的方法。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
1.3 计算属性 vs 侦听属性：Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当有一些数据需要随着其它数据变动而变动时，很容易滥用watch——特别是如果之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的watch回调。
1.4 计算属性的setter：计算属性默认只有 getter ，不过在需要时也可以提供一个 setter。
2、侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。除了watch选项之外，还可以使用命令式的 vm.$watch API。
五、Class与Style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
1、绑定HTML Class
1.1 对象语法：我们可以传给v-bind:class 一个对象，以动态地切换 class。可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class指令也可以与普通的 class 属性共存。绑定的数据对象不必内联定义在模板里，也可以在这里绑定一个返回对象的计算属性。
1.2 数组语法：我们可以把一个数组传给v-bind:class，以应用一个 class 列表。如果你也想根据条件切换列表中的 class，可以用三元表达式，不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法。
1.3 用在组件上：当在一个自定义组件上使用class属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
2、绑定内联样式
2.1 对象语法：v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。同样的，对象语法常常结合返回对象的计算属性使用。
2.2 数组语法：v-bind:style的数组语法可以将多个样式对象应用到同一个元素上。
2.3 自动添加前缀：当v-bind:style使用需要添加浏览器引擎前缀的 CSS 属性时，如transform，Vue.js 会自动侦测并添加相应的前缀。（tips：Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。例如 -moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */；-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */；-o- /* Opera浏览器(早期) */ -ms- /* Internet Explorer */）
2.4 多重值：从版本 2.3.0 起你可以为style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，这样写只会渲染数组中最后一个被浏览器支持的值。
六、条件渲染
1、v-if
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染，还可以配合v-else使用。
1.1 在<template>元素上使用v-if条件渲染分组：因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template> 元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含 <template> 元素。
1.2 v-else：可以使用v-else 指令来表示v-if 的“else 块”。注意，v-else元素必须紧跟在带v-if或者v-else-if 的元素的后面，否则它将不会被识别。
1.3 v-else-if：顾名思义，充当v-if的“else-if 块”，可以连续使用。类似于v-else，v-else-if也必须紧跟在带v-if或者v-else-if 的元素的后面。
1.4 用key管理可复用的元素：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的key属性即可。
2、v-show。另一个用于根据条件展示元素的选项是v-show指令。不同的是带有v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。注意，v-show 不支持<template> 元素，也不支持v-else。
3、v-if vs v-show。v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
4、v-if 与v-for一起使用。官网不推荐同时使用v-if 和v-for。当v-if 与v-for 一起使用时，v-for具有比v-if更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。
七、列表渲染
1、v-for。用v-for把一个数组对应为一组元素。我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items 是源数据数组，而item则是被迭代的数组元素的别名。在v-for块中，我们可以访问所有父作用域的属性。v-for还支持一个可选的第二个参数，即当前项的索引。也可以用of 替代in作为分隔符，因为它更接近 JavaScript 迭代器的语法。我们还可以在v-for里面使用对象，可以遍历对象的属性。也可以提供第二个的参数为 property 名称 （也就是键名），还可以用第三个参数作为索引。注意：在遍历对象时，会按object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
2、维护状态。当 Vue 正在更新使用v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。建议尽可能在使用v-for 时提供keyattribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制，key并不仅与v-for 特别关联，还有别的用途。注意，不要使用对象或数组之类的非基本类型值作为v-for的key。请用字符串或数值类型的值。
3、数组检测更新。变异方法（mutation method），Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push(),pop(),shift(),unshift(),splice(),sort(),reverse()。变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如filte()、concat() 和slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组，你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。由于 JavaScript 的限制，Vue 不能检测以下数组的变动：利用索引直接设置一个数组项时和修改数组的长度时（两种情况都是非响应性的）。对应第一种情况，我们可以用Vue.set(vm.items, indexOfItem, newValue)/vm.$set实例方法和vm.items.splice(indexOfItem, 1, newValue)；第二种情况可以使用splice:vm.items.splice(newLength)。
4、对象变更检测注意事项。还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用方法Vue.set(object, propertyName, value)或vm.$set实例方法向嵌套对象添加响应式属性。有时你可能需要为已有对象赋值多个新属性，比如使用Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象（对象的合并），如Object.assign({}, vm1.userProfile, {XX}}。
5、显示过滤/排序后的结果。有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
6、在v-for里使用值范围。v-for也可以接受整数。在这种情况下，它会把模板重复对应次数。
7、在<template>上使用v-for。类似于v-if，你也可以利用带有v-for 的 <template>来循环渲染一段包含多个元素的内容。
8、v-for与v-if一同使用。官网不推荐同时使用v-if 和v-for。当v-if 与v-for 一起使用时，v-for具有比v-if更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。
9、在组件上使用v-for。在自定义组件上，你可以像在任何普通元素上一样使用 v-for，注意，2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop，不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
八、事件处理
1、监听事件。可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
2、事件处理方法。然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
3、内联处理器中的方法。除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法。有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。
4、事件修饰符。在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的：.stop ，.prevent ，.capture，.self， .once， .passive。注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。版本2.1.4新增了.once修饰符，不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。版本2.3.0新增 .passive 修饰符（Vue 对应 addEventListener 中的 passive 选项提供的）。.passive 修饰符尤其能够提升移动端的性能。注意，不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
5、按键修饰符。在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right。还可以通过全局 config.keyCodes 对象自定义按键修饰符别名。
6、系统修饰符。版本2.1.0新增：可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器：.ctrl .alt .shift .meta。2.5.0新增：.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。版本2.2.0新增一些鼠标按键修饰符：.left .right .middle。 这些修饰符会限制处理函数仅响应特定的鼠标按钮。
7、为什么在HTML中监听事件。你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处： 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。（tips:关注点分离原则，也叫正交原则，HTML CSS JS 分离 互不影响）
九、表单输入绑定
1、基础用法
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意，v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： text 和 textarea 元素使用 value 属性和 input 事件； checkbox 和 radio 使用 checked 属性和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件。基础用法包括：文本，多行文本，复选框，单选按钮，选择框。（在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，推荐提供一个值为空的禁用选项。）
2、值绑定
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
3、修饰符
修饰符有：.lazy,.number,.trim。.lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步。.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。.trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。
4、在组件上使用v-model
HTML 原生的输入元素类型并不总能满足需求。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和 v-model 一起使用。
十、组件基础
1、创建组件
通过Vue.component（），我们可以创建一个组件。组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。注意，因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
2、组件的复用
我们可以将组件进行任意次数的复用，每个组件都会独立维护自己的元素，因为每次使用一次组件，相当于一个它的新实例被创建。注意，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，这样就不会再各个组件实例间相互影响。
3、组件的组织
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。全局注册的组件可以用在其被注册之后的任何 (通过new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
4、通过Prop向子组件传递数据
Prop 是你可以在组件上注册的一些自定义特性（props选项）。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
5、单个根元素
当使用组件时，出现every component must have a single root element (每个组件必须只有一个根元素)的问题时，我们可以将模板的内容包裹在一个父元素内，来修复这个问题。当组件变得越来越复杂的时候，为每个相关的信息定义一个 prop 会变得很麻烦，因而我们要重构这个组件让它变成接受一个单独的XX属性的 prop，在template里面添加关于XX属性的定义说明即可。
6、监听子组件事件
在我们开发某些组件时，它的一些功能可能要求我们和父级组件进行沟通。父级组件可以像处理 native DOM 事件一样通过v-on监听子组件实例的任意事件，同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件。有的时候用一个事件来抛出一个特定的值是非常有用的：可以使用 $emit 的第二个参数来提供这个值，然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值，或者，如果这个事件处理函数是一个方法，那么这个值将会作为第一个参数传入这个方法。自定义事件也可以用于创建支持v-model 的自定义输入组件。
7、通过插槽分发内容
和 HTML 元素一样，我们经常需要向一个组件传递内容，Vue 自定义的<slot> 元素让这变得非常简单。
8、动态组件
有的时候，在不同组件之间进行动态切换是非常有用的。可以通过 Vue 的<component> 元素加一个特殊的is 特性来实现。
9、解析DOM模板时的注意事项
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。幸好这个特殊的is 特性给了我们一个变通的办法。
（上述就是关于Vue框架的基础，其它深入的用法心得也在我的其他博客下，欢迎一起学习：)）
以上是 前端框架Vue学习的心得记录（基础篇） 的全部内容， 来源链接： utcz.com/z/378708.html
