vue 官方指南基础部分笔记

参考资料：vue官方指南（https://cn.vuejs.org/v2/guide）

一、Vue介绍

1.Vue是一套用于构建用户页面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也能为复杂的单页应用提供驱动。

2.Vue.js的核心是允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统，然后所有的DOM的操作都由Vue来处理，你编写的代码只需要关注逻辑层面即可。

3.组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

4.Vue与自定义元素的关系：Vue组件非常类似于自定义元素(web组件规范的一部分)，这是因为Vue的组件语法部分参考了该规范。但是还是有几个关键差别：(1)web组件规范目前未被所有浏览器原生实现，而Vue在所有支持的浏览器(IE9及更高版本)下表现一致；(2)Vue提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

二、Vue实例

1.不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod()) 。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，经常会导致错误。

2.生命周期示意图

三、模板语法

1.vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据，所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量，也可以不用模板，直接写渲染函数，使用可选的JSX语法。

2.使用v-html时，不能用它来复合局部模板。v-html中传入的是字符串，是原生的HTML，不能在里面写模板，因为vue不是基于字符串的模板引擎。如果想写模板，用组件更合适。

3.使用JavaScript表达式有个限制，只能包含单表达式

4.模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。不能在模板表达式中访问用户定义的全局变量，如果想使用，只能赋值给data中的属性中再用。

5.指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

6.动态参数，从2.6.0开始，可以使用方括号括起来的JS表达式作为指令的参数。动态参数预期是一个字符串，异常情况值为null，这个特殊的null值可以被显性地用于移除绑定。方括号里不能有空格和引号，如果需要有，可以使用计算属性。避免使用大写字母，因为浏览器会把 attribute 名全部强制转为小写。

四、计算属性和侦听器

1.模板内的表达式非常便利，在模板中放入太多逻辑会让模板过重且难以维护，对任何复杂逻辑，都应该使用计算属性。

2.可以把同一个函数作为计算属性，也可以作为方法，效果差不多，但是有差别。计算属性会基于响应式依赖进行缓存，只要依赖的属性没有发生变化，就会返回之前的计算结果，不会再次执行函数。而方法每次调用都会重新计算。结合自己的使用场景，自行选择用方法还是计算属性。

3.计算属性默认只有getter,但是你也可以根据需要提供setter。

4.当需要在数据变化时执行异步或开销较大的操作时，用侦听器watch会最好。

五、Class与Style绑定

1.操作元素的class列表和内联样式style是数据绑定的一个常见需求。它们都是属性，我们可以用v-bind来处理它们，只需要通过表达式计算出字符串结果即可。但是字符串的拼接麻烦且容易出错，所以将v-bind用于class和style时，Vue专门做了增强，让这两个属性的表达式结果除了字符串之外，还可以是对象和数组。

2.v-bind:class指令可以与普通的class属性同时存在。

3.v-bind:style使用需要添加浏览器前缀的CSS属性时，如transform，Vue会自动侦测并添加相应的前缀。

4.从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如: <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

六、条件渲染

1.可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

2.vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。vue为你提供了一个方法来表达“这两个元素是完全独立的，不要复用它”，在元素上添加唯一的key属性即可。

3.v-show不支持 <template> 元素，也不支持 v-else。

七、列表渲染

1.数组对应成一组元素，使用方法v-for= "(item,index) in items" 或 v-for="(item,index) of items"；对象 v-for="(value, name, index) in object"。

2.维护状态。当vue更新用v-for渲染的列表时，如果数据项的顺序被改变，vue不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。

3.建议尽量在使用v-for时都提供key属性，除非遍历输出的列表特别简单，或者是刻意依赖默认行为以获得性能的提升。key属性的值用字符串或数值。

4.如果数组调用了其变异方法，会触发视图更新，调用非变异方法，需要用新数组替换旧数组，才会触发视图更新。变异方法是指，会改变原始数组的方法。非变异方法是指，不改变原始数组，返回新数组的方法。

5.v-for里也可以接受整数，v-for="n in 10"。v-for也可以用在template上，包裹一段内容。

6.v-for和v-if一起使用时，v-for的优先级更高，v-if会分别运行在每个循环项中。

7.在组件上使用v-for时，需要用prop把迭代数据传递到组件里，而不是自动将item注入到组件里，这是为了让组件和v-for解耦。

8.当在<ul>里使用v-for循环组件时，最好使用<li  is="todo-item" v-for="todo in todos">,而不是<to-do-item v-for="todo in todos">.因为在ul元素中只有li会被看做有效内容，这样做实现效果与直接循环组件效果一样，但是可以避开一些潜在的浏览器解析错误。

八、事件处理

1.v-on监听DOM事件：在触发时，可以运行一段JS代码；或者接受一个需要调用的方法名称；或者在内联JS语句中调用方法；可以用特殊变量$event把原始的DOM事件传入方法中。

2.事件修饰符：(关于DOM上的事件，可参考文章DOM事件机制相关)

    .stop:对标event.stopPropagation()方法， 阻止事件进一步捕获或冒泡；

    .prevent: 阻止默认事件，比如点击复选框默认选中，输入框键盘输入时默认将值填入。

    .capture: 在捕获阶段触发该事件。

    .self: 只在事件是当前元素触发时，才触发处理函数

    .once:只触发一次。不仅能用到原生DOM事件上，还可以用在自定义的组件事件上。

    .passive:告诉浏览器不要阻止事件的默认行为，不要与.prevent一起使用，一起使用时.preven会被忽略。该修饰符尤其能够提升移动端的性能。

    修饰符可串联，有些修饰符串联时要注意顺序，比如"v-on:click.prevent.self"会阻止所有的点击，"v-on:click.self.prevent"只会阻止对元素自身的点击。

3.按键修饰符

    v-on:keyup.enter、v-on:keyup.13(按钮码，该用法已经被废弃，可能不会被新的浏览器支持)

    常见按键码的别名：.enter    .tab    .delete(删除和退格键)    .esc    .space    .up    .down    .left    .right

    可以通过全局config.keyCodes对象自定义按键修饰符别名：Vue.config.keyCodes.f1 = 112

4.系统修饰符

    可以用下列修饰符来实现仅在按下相应按键时才触发监听器

    .ctrl     .alt    .shift    .meta

    .meta 在Mac上对应Command键，在Windows上对应徽标键，其他也有对应的按键

    .keyup.alt.67    只有在按住alt键释放其他按键时，才能触发.keyup.alt

5. .exact修饰符

        允许精确的系统修饰符组合触发的事件，有且只有。

6.鼠标按键修饰符

    .left    .right    .middle   会限制处理函数仅响应特定的鼠标按钮

7.为什么要在HTML中监听事件？

    这种事件监听方式违背了关注点分离这个长期以来的优良传统。但不必担心，因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的viewmodel上，不会导致任何维护上的困难。使用v-on的几个好处：(1) 能够在HTML模板里轻松定位在JS代码里对应的方法 (2) 无需在JS里手动绑定事件，viewmodel代码可以是非常纯粹的逻辑 (3) 当一个viewmodel被销毁时，所有事件处理器都会自动被删除，无需担心如何清理。

九、表单输入绑定

1.可以用v-model在表单input、textarea、select上创建双向数据绑定，他会根据控件类型自动选取正确的方法来更新元素。v-model本质是语法糖，负责监听用户的输入事件以更新数据，并对极端场景进行一些特殊处理。

2.v-model会忽略所有表单元素的value、checked、selected的初始值，而总是将Vue实例的数据作为数据来源。

3.v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件。text和textarea元素使用value属性和input事件。checkbox和radio使用checked属性和change事件。select  将value作为prop并将change作为事件。

4.对于需要使用输入法的语言(如中文、韩文、日文等)，v-model不会在输入法组合文字的过程中得到更新，如果想处理这个过程，请使用input事件。

5.对于select元素，如果v-model表达式的初始值未能匹配任何选项，select元素将被渲染为'未选中'状态。在ios中，不会触发change事件，这会使用户无法选择第一个选项，因此推荐提供一个值为空的禁用选项,如下。

    <select v-model="selected"><option disabled value="">请选择</option>><option>A</option></select>

6.对于单选按钮、复选框、选择框的选项，v-model绑定的值通常是静态字符串或布尔值。但有时我们想把值绑定到一个动态属性(可以不是字符串)上，可以v-bind实现。

7.修饰符

    .lazy    默认时，v-model在input事件触发后将输入框的值与数据进行同步，使用v-model.lazy修饰符之后就会转成在change事件之后再同步。input失焦时才会触发change事件

    .number    在change时，自动将用户输入的值转为数值类型(以数字开头再输入非数字，会将后面的非数字截除)。如果是以非数字开头，会保留原始的值。

    .trim     在change时，自动过滤用户输入的首尾空白字符

十、组件基础

1.data必须是一个函数而不直接是一个对象，所以每个实例才能有独立的data，否则会相互影响。

2.通过prop向子组件传递数据，用v-bind来动态传递prop

3.单个根元素

4.子组件可通过$emit方法传入事件名来触发一个事件，'$emit('enlarge-text')'。父组件通过v-on来监听相应事件，'v-on:enlarge-text="postFontSize += 0.1"'。

    子组件在抛出事件时，还可抛出一个值，'$emit('enlarge-text'，0.1)'。父组件可以通过$event来访问到这个值，'v-on:enlarge-text="postFontSize += $event"'，或者作为方法的第一个参数，'v-on:enlarge-text="onEnlargeText"    onEnlargeText(enlargeAmount){  }'  

5.在组件上使用v-model，你需要这样：将其value属性绑定到一个名叫value的prop上；在其input事件被触发时，将新的值通过自定义的input事件抛出。

6.通过插槽slot向组件传递内容

7.动态组件 <component v-bind:is="currentTabComponent"></component>, currentTabComponent可以是已注册组件的名字，也可以是一个组件的选项对象。is属性还可以用于常规HTML，这时这些元素就会被视为组件，它们所有的属性都会被作为DOM attribute被绑定，对于value这样的property，想要它像以前一样工作，需要使用.prop修饰器。

8.有些HTML元素，诸如 ul、ol、table、select，对于哪些元素可以出现在其内部有严格限制。有些元素，诸如li、tr、option，只能出现在其他某些特定元素内部。这会导致我们使用这些元素时遇到一些问题，比如table里的自定义组件会被当做无效内容提升到外部，导致最终渲染出错。这种情况我们就可以使用 is属性来解决这个问题。

    需要注意的是，如果你是用的模板是以下来源，将不会有上面的限制，不需要用is来处理，来源有：字符串(template:'...');    单文件组件(.vue);    <script type="text/x-template">。