Vue总结

v-model

v-model 可以用在input中也可以用在textarea中 。
包含两个指令：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体 

v-model = v-bind:value + v-on:input

 key属性的作用

• 作为一个DOM节点的标识值，结合Diff算法可以实现对节点的复用。(key相同的节点会被复用)
• 只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。

 v-if和v-for的区别

作用：

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

在 v-for 的时候，建议设置 key 值，并且保证每个 key 值是独一无二的，这便与 diff 算法进行优化

优先级：

 v-for 优先级是比 v-if 高

注意事项：

1. 永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
2. 如果避免出现这种情况，则在外层嵌套 template （页面渲染不生成dom节点），再这一层进行 v-if 判断，然后再内部进行 v-for 循环

父子组件之间传递数据的方法

第一种方式：通过props和$emit配置的非绑定式数据传递

本质：父组件利用props属性向下传递数据，子组件利用事件系统$ emit向上传递数据。

1.父组件中引入子组件，并且给子组件绑定传递过去的变量以及值，如：:message=“msg”，这里必须要使用v-bind(:)的形式绑定自定义变量(如:message可以为其他名称)。然后传递的值msg是父组件中要传递的内容。
2.子组件通过props接受传递过来的message值。注意：props可以是对象也可以是数组，通常情况下应该为对象，哪怕为空对象也行。

第二种方式：通过ref和$parent获取组件实例来进行绑定式数据传递

本质：1.给导入的子组件通过ref 命名操作，然后使用$ refs[‘xxx’]即可获取到子组件的实例对象，即可以获取子组件的属性和方法，亦可改变其数据
2.子组件可以直接通过 this.$ parent 的方式直接获取到父组件的实例对象，即可以获取父组件的属性和方法，亦可改变其数据

单页应用

什么是单页应用？

        单页面是指整个应用程序只有一个唯一完整的 HTML 页面，而其它所谓的页面，其实都是组件片段而已，切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用。

工作原理：

SPA 的一个重要实现就是改变路由时，页面不刷新。实现这个功能，通常有两种方式：使用 window.history 对象或 location.hash。

优缺点

SPA 可圈可点，现在已被大家广泛使用，也得到了主流框架的支持，但是它也有局限性，我们将它的优缺点总结如下。

优点：

1. 无刷新体验，用户在切换页面过程中不会频繁被“打断”，因为界面框架都在本地，对用户的响应非常及时，因此提升了用户体验；
2. 分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
3. 减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4. API 共享，同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
5. 完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。

缺点：

1. 对 SEO 不太优好，尽管可以通过 Prerender 预渲染优化等技术解决一部分，但是相对还是不容易索引到它；
2. 易出错，需要使用程序管理前进、后退、地址栏等信息；
3. 较高的前端开发门槛，对技术能力要求较高，需要对设计模式有一定理解，因为面对不是一个简单的页面，而是一个运行在浏览器环境里面的桌面软件。

注意点：

1. 页面不用刷新
2. 路由的跳转