Vue 官方文档学习笔记（一）基础

介绍
一. Vue是什么
1.是一套用于构建用户界面的渐进式框架，Vue被设计可以自底向上逐层应用。
2.声明式渲染：一个Vue应用会将其模板挂在到一个DOM元素上然后对其进行控制，那个HTML就是入口，其余将会发生在Vue实例内部。
1）指令：带有“v-”前缀，以表示其是vue提供的特殊attribute。除了文本差值，可以绑定元素属性对其进行操作。
3.条件与循环
1）条件：v-if，此方法可以将数据绑定到DOM结构上。
2）循环：v-for，可以用来绑定数组的数据来渲染一个项目的列表；
4.处理用户输入
1）v-on：为了用户和应用进行交互，可用该指令添加一个事件监听器，通过它调用在Vue实例中定义的方法；
2）v-model：用于实现表单输入和应用状态之间的双向绑定；
5.组件化应用构建
1）允许使用小型的、独立和通常可复用的组件构建大型应用；
2）在Vue中，一个组件的本质是一个拥有预定义选项的一个Vue实例

Vue实例
一.创建一个Vue实例
1.每个Vue应用都是通过用Vue函数创建一个Vue实例开始的；
2.一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的，可复用的组件树组成；
二.数据与方法
1.当一个Vue实例被创建时，它将data对象中的多有property加入到Vue的响应式系统中；当这些property的值发生变化时，视图将产生“响应”，即匹配跟新为新的值；注意：只有当实例被创建时已经存在于data中的property才是响应式的；
2.Vue还暴露了带有前缀 “$” 的property和方法，以便与自定义的property区分开；
三.实例生命周期函数
1.每个Vue实例在被创建时都要经过一系列的初始化过程，例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM系统等。同时在初始化的过程中也会运行生命周期函数，用来在不同的阶段添加代码；
2.生命周期钩子的this上下文指向调用它的Vue实例；
3.不要在选项property或回调函数上使用箭头函数，因为箭头函数中没有this，此时this会作为变量一直向上级词法作用域查找，会导致错误；

模板语法
一.介绍
1.Vue中使用了基于HTML的模板语法，允许声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML，能被遵循规范的浏览器和HTML解析器解析；
2.底层实现上：Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue可以智能的计算出最少需要渲染的组件，并把DOM操作次数减到最少；
3.Vue也支持不使用模板，直接通过原生js编写渲染函数（render）；
二、插值
1.文本：数据绑定的最常见方式就是使用“Mustache”（双大括号）的文本插值；
1）Mustache标签将会被替代为对应数据对象的property的值，且绑定的数据对象的property发生变化，插值处的内容都将自动更新；
2）可通过使用v-once指令执行一次性的插值。此时也会影响该节点上的其他数据绑定；
2.原始HTML
1）v-html：该指令将输出数据绑定中property的指定html；注意：在站点上动态输出html容易受到xss攻击。
3.Attribute
1）v-bind：该指令可以作用在HTML attribute上；
（1）对于布尔值的attribute，当其绑定的值为null、undefined或false时，该属性将不会被包含在渲染出来的该元素中；
4.使用JavaScript表达式
1）对于所有的数据绑定，Vue都提供了完整的JavaScript表达式支持。但是每个绑定都只能包含单个表达式；
2）在模板表达式中，只能访问全局变量的一个白名单，不能再模板表达式中试图访问用户自定义的全局变量；
三、指令
1）指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。指令的值预期是单个JavaScript表达式；
2）参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。如：v-bind和v-on；
3）动态参数：从Vue的2.6.0版本开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数；
（1）对动态参数的值得约束：动态参数预期值是一个字符串，异常情况下值为null，此特殊的null值可以被显示的用于移除绑定。而任何其他非字符串类型的值都将触发一个警告；
（2）对动态参数表达式的约束：不能使用空格和引号及大写字符命名的键名，可使用计算属性替代这种复杂的表达式。
4）修饰符：指令后以“.”加所要执行的动作去对指令进行特殊方式的绑定以达到修饰符执行的作用；
四、缩写
1.v-bind的缩写是：“：”
2.v-on的缩写是：“@”

计算属性和监听器
一、计算属性
1.基础：实例中在computed中提供的函数，将作为property的getter函数，此时该函数依赖的数据改变时，函数相关的操作也将自动更新。
2.计算属性缓存vs方法
1）计算属性是基于它们的响应式依赖进行缓存的，只有在相应的依赖改变时，计算属性才会重新求值；
2）在使用方法的时候，只要调用了重新渲染，调用的方法将总会再次执行函数；
3.计算属性vs侦听属性
1）侦听属性：更通用的观察和响应Vue实例上的数据变动；
4.计算属性的setter
1）计算属性默认只有getter，但在需要的时候也可以提供一个setter；
二、侦听器
1.当需要在数据变化是执行异步或者开销较大的操作时，会使用watch方法；而计算属性则无法做到；

Class与Style绑定
一、使用v-bind来绑定元素的class列表和内联样式，因为它们都是attribute。由于字符串拼接易错，所以Vue提供了除了字符串外的对象和数组的表达式结果用于v-bind的绑定；
二、绑定HTML Class
1.对象语法：可以传给v-bind:class 一个对象，用于动态切换class；
1）可以在对象中传入多个属性来切换多个class的值，且该种方式也可与普通的class属性共存；
2）此时也绑定一个返回对象的计算属性；
2.数组语法：可以把一个数组传给 v-bind:class ,以应用一个class列表；
1）如果想根据条件切换列表中的class，可以用三元表达式；
2）在数组语法中也可以使用对象语法；
3.用在组件上：当在一个组件上使用class property时，这些class将被添加到该组件的根元素上，而该元素上已经存在的class不会被覆盖；
三、绑定内联样式
1.对象语法：css property名可以用驼峰式（camelCase）或短横线分隔（kebab-case，要用引号括起来）；
1）而直接绑定一个样式对象通常是更简洁、更直观的方法；
2）而对象语法的样式绑定也通常结合返回样式对象的计算属性来使用；
2.数组语法：v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上；
3.自动添加前缀：在 v-bind:style 使用需要添加浏览器引擎前缀的CSS property时，Vue会自动侦测并添加相应的前缀；
4.多重值：从2.3.0版本开始，可以在 style 绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，这种只会渲染数组中最后一个被浏览器支持的值

条件渲染
一、v-if
1. v-if：该指令用于条件性的渲染内容，该内容只会在指令表达式返回 truthy 值得时候被渲染；
1）也可以使用 v-else 指令添加“else”块，但该内容必须紧接着 v-if 内容；
2.在<template>元素上使用 v-if 条件渲染分组
1）当需要同时切换多个元素时，可以使用<template>元素包裹所以需要操作的元素，并在该元素上使用 v-if 。<template>元素在渲染时是不可见的；
3. v-else：用于表达 v-if 的else块。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素后面，否则将不会被识别；
4. v-else-if：2.1.0新增，充当 v-if 的 else-if 块，可以连续使用；该元素也必须紧跟在 v-if 或者 v-else-if 元素后；
5. 用 key 管理可复用的元素：由于Vue会高效的服用元素，添加唯一的 key attribute值可以告诉Vue，该元素完全独立，不要复用；
二、v-show
1. 可以根据条件切换元素的 display，以展示或者隐藏元素。该方法初次加载是必会被渲染，只是根据条件切换该元素的 display 值
三、v-if vs v-show
1. v-if 是真正的条件渲染，只有在条件值为truthy时，才会被渲染出来。可以确保在切换过程中条件块内的事件监听和子组件适当的被销毁和重建；
2. v-show 不管初始值是什么，元素总会被渲染，只是简单地基于CSS进行切换；
3. 对比：v-if 有更高的切换开销，v-show 有更高的初始渲染开销；
四、v-if 与 v-for 一起使用：当他们在同一级别使用时，v-for 比 v-if 具有更高的优先级；

列表渲染
一、用 v-for 把一个数组对应为一组元素
1. v-for 指令是基于一个数组来渲染一个列表，需要使用 item in items 形式的特殊语法。其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名；
1）在 v-for 块中，可以访问所有父作用域中的property。v-for 还支持可选的第二个参数，当前项的索引；
2）可以使用 of 代替 in 作为分隔符，of 更接近 JavaScript 的迭代器语法；
二、在 v-for 里使用对象
1. 可以使用 v-for 来遍历一个对象的 property；
2. 可以提供第二个参数为property名称（键名）；
3. 可以提供第三个参数为索引（index）；
4. 在遍历对象时，会按照 Object.keys() 的结果遍历，但不保证在所有JavaScript引擎下保持一致；
三、维护状态
1. Vue 在更新使用 v-for 渲染的元素列表时，采用“就地更新”策略，不会移动DOM元素来匹配新的数据项顺序，而是就地更新每个元素，并确定它们在每个索引位置正确渲染；
2. 为每项提供唯一的 key 值，可以使得Vue跟踪每个节点的身份，从而重用和重排序现有元素；
3. 在使用 v-for 时，一定要提供 key attribute，除非刻意的依赖默认行为提高性能时；
4. 不要使用数组或对象这些非基础类型值作为 key 值，应使用字符串或数值类型的值作为 key 值；
四、数组更新检测
1. 变更方法：Vue将被侦听的数组的变更方法进行了包裹，所以其会触发试图更新。变更方法会变更调用这些方法的原始数组；
1）变更方法有：push()、pop()、shift()、unshift()、splice()、sort()、reverse()；
2. 替换数组：不会变更原始数组，而总是返回一个新的数组。此时Vue并不会简单的抛弃原数组，而是高效的利用原数组返回新的数组；
1）替换方法有：filter()、concat()、slice()等；
3. 注意事项：由于JavaScript的限制，Vue不能检测数组和对象的变化；
五、显示过滤/排序后的结果
1. 可以通过使用计算属性达到显示一个数组经过过滤或排序后的版本，但是不实际变更或重置原始数据；当在计算属性不适用的情况下（在嵌套的 v-for 循环中），可以使用methods方法；
六、在 v-for 里使用值范围
1. v-for 也可以接受整数，在这种情况下，会把模板重复对应次数；
七、在<template>上使用 v-for
1. 可以利用带有 v-for 的 <template> 来渲染循环一段包含多个元素的内容；
八、v-for 与 v-if 一同使用
1. 当它们处于同一节点的时候，v-for 比 v-if 具有更高的优先级，也就是 v-if 将分别重复运行于每个 v-for 循环中；
2. 该优先级适用于只想为部分项渲染节点时。若想有条件的跳过循环的执行，则只需将 v-if 置于 v-for 的外层节点即可；
九、在组件上使用 v-for
1. 在自定义的组件上，可以像在任何普通元素一样使用 v-for （在2.2.0版本后，key为必须）；
2. 在组件上使用 v-for 时，数据不会自动传入到组件中，因为每个组件都有其自己的作用域。而为了把迭代数据传递到组件里，此时需要使用prop属性；
3. 而不自动的将 item 注入到组件里，是因为这会使得组件与 v-for 的运作紧密耦合。而明确组件数据的来源能够使组件在其他场合重复使用；

事件处理
一、监听事件：使用 v-on 指令监听DOM事件，并在触发时运行一些JavaScript代码；
二、事件处理方法：由于事件处理程序逻辑多复杂，直接把JavaScript代码写在 v-on 指令中容易造成代码混乱无法维护。因此，v-on 可以接收一个需要调用的方法名称；
三、内联处理器中的方法：除了直接绑定到一个方法，也可以在内联JavaScript语句用调用方法；
1. 需要在内联语句中访问原始DOM事件时，可以使用特殊变量 $event 并把它传入方法；
四、事件修饰符：为了使方法中只有纯粹的数据逻辑，而不去处理DOM事件细节。Vue为 v-on 提供了事件修饰符；
1. 事件修饰符：
1）.stop：event.stopPropagation()，组织事件继续传播；
2）.prevent：event.preventDefault()，阻止事件的默认行为；
3）.capture：event.capture()，只在事件捕获阶段触发该事件处理函数；
4）.self：只当 event.target 是当前元素时触发事件处理函数；
5）.once（2.1.4版本新增）：当前事件只触发一次；
6）.passive（2.3.0版本新增）：告诉浏览器不用去查询 event.preventDefault ，直接执行默认行为（浏览器在读取到事件的时候，都会去查询是否有 event.preventDefault 去阻止默认行为，这样会造成用户操作的延迟）；
2. 在使用事件修饰符时，其使用顺序很重要，将会直接影响事件的使用；
3. 除了 v-once 之外，其他事件修饰符只能用在原生的DOM事件上，而 v-once 则可以在自定义的组件事件上使用；
五、按键修饰符：在监听键盘事件时，需要检查详细的按键。Vue 为 v-on 在监听键盘事件时添加那间修饰符；
1. 按键名可以是 驼峰式，也可以使用 kebab-case 的方式；
2. 按键码：Vue 提供了大多数常用的按键码的别名
1）可以通过全局的 config.keyCodes 对象自定义按键修饰符别名；
六、系统修饰键：可以使用 .ctrl .alt .shift .meta 等修饰符来实现只有在按下相应按键时才触发鼠标或键盘事件的监听器
1. 系统修饰键与普通按键规则不同，在于keyup事件一起使用时，事件触发时修饰键必须处于按下状态时才会触发事件。因此在释放系统修饰键时，不会触发事件；
2. .exact 修饰键：（2.5.0新增）允许控制由精确的系统修饰符组合触发的事件；
3. 鼠标按钮修饰符：（2.2.0新增）.left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮；
七、为什么在HTML中监听事件：虽然该方式违背了关注点分离的传统，但是再Vue中，所有的事件处理方法和表达式都严格绑定在当前视图的ViewModel上；
1. 使用 v-on 的方式绑定事件的几点好处：
1）可以在HTML模板上轻松定位到相应的JavaScript代码里的对应方法；
2）因为无需在JavaScript里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，便于维护；
3）当一个ViewModel被销毁时，所有的事件处理器都会被自动删除；

表单输入绑定
一、基础用法
1. 可以使用 v-model 指令在表单控件 <input>、<textarea>、<select>元素上创建双向数据绑定；
1）v-model 指令会根据控件类型自动选取正确的方法来更新语法；
2）v-model 指令会忽略所有表单元素的 value、checked、selected attribute 的初始值，而总是将Vue实例数据作为数据来源。因此，应该通过JavaScript在组件的 data 选项中声明初始值；
3）v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
（1）text 和 textarea 元素：value property 和 input 事件；
（2）checkbox 和 radio 元素：checked property 和 change 事件；
（3）select 字段：使用 value 作为 prop 和 change 事件；
二、值绑定
1. 单选按钮、复选框、选择框：v-model 绑定的值通常是静态字符串（复选框也可以是布尔值）
1）若此时想要把值绑定到一个Vue实例的一个动态 property 上，这时可以使用 v-bind 实现，并且这个 property 的值可以不是字符串；
三、修饰符
1、.lazy：默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。.lazy 修饰符可以将事件转为在 change事件之后进行数据同步；
2、.number：用来将用户的输入值自动转为数值类型；
3、.trim：用来自动过滤用户输入的首尾空白符；
四、在组件上使用 v-model
1. 由于原生的HTML输入类型有限，Vue 组件系统允许创建具有完全自定义行为且可复用的输入组件，而这些组件可以结合 v-model 使用；

组件基础
一、基本示例
1. 组件是可复用的Vue实例，且带有组件名称。可以在一个通过 new Vue 创建的Vue根实例中，把组件作为自定义元素使用；
2. 因为组件是可复用的Vue实例，所以组件与 new Vue 接收相同的选项，eg：data、computed、methods、watch和生命周期钩子等（el 则是根实例特有的选项）；
二、组件的复用
1. 可以将组件进行任意次的复用，因为没用一次组件，就会有一个它的新实例被创建；
2. 组建中的 data 必须是一个函数。因为组件关键的是要复用，若 data 不是函数，复用的组件间会造成数据连动。data 函数化使用就可以使得每个复用的组件都拥有自己专属的 data；
三、组件的组织
1. 为了能在模板中使用，组件必须先注册以便 Vue 能够识别。有两种组件的注册类型：全局注册和局部注册；
1）Vue.component()：全局注册组件，可以用在其被注册之后的任何（通过 new Vue）新创建的根实例，也包括其组件树中的所有子组件的模板中；
三、通过Prop向子组件传递数据
1. Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个Prop attribute 的时候，它就变成了那个组件实例的一个property。在组件中使用“props”选项去接收传递的数据；
2. 一个组件默认可以拥有任意数量的 prop，任何值都可以传给 prop。
3. 可以使用 v-bind 来动态传递 prop 。这样有利于渲染一个期初数据不定的内容；
四、单个根元素
1. 每个组件必须只有一个根元素；
五、监听子组件事件
1. Vue 提供了一个自定义事件系统，父级组件可以通过 v-on 监听子组件实例的任意事件；子组件则可以通过 $emit 方法并传入事件名称来触发一个事件；
2. 使用事件抛出一个值：可以使用 $emit 的第二个参数来提供事件抛出的特定值；
1）在父级组件监听这个事件的时候，可以通过 $event 访问到被抛出的这个值；
2）若此时父级组件监听时是个事件处理函数，那么这个值将会作为第一个参数传入这个方法；
3. 在组件上使用 v-model：自定义事件可用于创建支持 v-model 的自定义输入组件；
1）但是，为了能正常工作，组件内的 <input>必须：
（1）将其 value attribute 绑定到一个名叫 value 的 prop 上；
（2）在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出；
六、通过插槽分发内容
1. Vue 自定义的 <slot> 元素可以让我们在需要的地方加入插槽做到向一个组件传递内容；
七、动态组件
1. 可以通过 Vue 的 <component> 元素加一个特殊的 is attribute来实现在不同组件之间动态切换；
2. 而 is 绑定的数据的内容可以是已注册组件的名字，或一个组件的选项对象；
3. 该 is attribute 可以用于常规的 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都作为 DOM attribute 被绑定。而对于像 value 这样的 property ，若想如预期的工作，需要使用 .prop 修饰器；
八、解析 DOM 模板时的注意事项
1. 某些 HTML 元素，eg：<ul>、<ol>、<table>、<select>，对于哪些元素可以出现在其内部有严格的要求。而某些元素，eg：<li>、<tr>、<option>则只能出现在某些特定的元素内部。而 Vue 提供的 is attribute 则可以解决这个问题，使用<tr is=""></tr>的语法即可；
2. 若从以下来源使用模板时，则不存在这样的问题：
1）字符串（eg：template:'...'）
2）单文件组件（.vue）
3）<script type="text/x-template">