Vue2.0——（一）

Vue的介绍

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

1. 数据驱动视图

好处：当页面数据发生变化时，页面会自动重新渲染，需要注意的是数据驱动视图是单向绑定的，即当数据发生变化的时候，视图才会更新。

2.双向数据绑定(v-model)

优势：开发者不再需要手动操作Dom元素来获取表单元素最新的值
Vue的双向数据绑定是采用数据劫持结合发布者—订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
1.object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象

• 实现一个数据监听器observer，能够对数据对象的所有属性进行监听，如果变动可拿到最新值并通知订阅者。
• 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
• 实现一个watcher，作为连接observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而跟新视图。
• 将MVVM作为数据绑定的入口，整合observer，Compile和watcher三者。

3.Vue的常用指令和过滤器

1. 内容渲染指令
   ①.v-text：用于将数据填充到标签中，作用与插值表达式类似，但会覆盖元素内部原来的内容，相当于原生JS中的innerText。
   ②.{{ }}：插值表达式，在data中定义msg的值可以渲染到span标签中，并且改变data中msg的值，span标签中的值也会发生改变。
   ③.v-html:用于将数据填充到标签中，作用与插值表达式类似，与v-text的区别是v-html可以解析html标签并渲染到目标位置。
2. 事件绑定
   ①.v-on用来进行事件的绑定，简写是**@**，在methods:{ }中定义事件处理函数，在methods:{ }中，可以通过this访问数据源中的数据，此时，这里的this指向了vue实例，即VueComponent。
   ②.关于$event(vue的内置变量$event就是就是原生Dom的事件对象e，在函数中传参做事件处理时，用于获取事件本身)
3. 属性绑定
   ①.v-bind用来动态为元素的属性绑定值，简写是 :
4. 双向数据绑定
   ①.v-model用来实现双向数据绑定，一般用于表单元素中实现数据的双向绑定。
5. 条件渲染
   ①.v-if和v-else-if v-else配套使用，利用true/false或者条件判断。
6. 列表渲染
   ①vue中为v-for提供了一个属性，key值不允许重复，key属性可以用来提升v-for渲染的效率，vue不会去改变原有的元素和数据，而是创新的元素，然后把新的数据渲染进去
   ②在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识，给key赋值的内容不能是可变的。
   1.在写v-for的时候，都需要给元素添加上一个key属性
   2.key的主要作用就是用来提高渲染性能的
   3.key属性可以避免数据混乱的情况出现

关于key的注意事项

• key的值只能是字符串或者数字类型
• key的值必须具有唯一性，即key值不能重复
• 建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)
• 使用index的值当做key的值没有任何意义(因为index的值不具有唯一性)
• 建议使用v-for指令时一定要指定key的值(既能提升性能，也能防止列表状态紊乱)