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的常用指令和过滤器
- 内容渲染指令
①.v-text:用于将数据填充到标签中,作用与插值表达式类似,但会覆盖元素内部原来的内容,相当于原生JS中的innerText。
②.{{ }}:插值表达式,在data中定义msg的值可以渲染到span标签中,并且改变data中msg的值,span标签中的值也会发生改变。
③.v-html:用于将数据填充到标签中,作用与插值表达式类似,与v-text的区别是v-html可以解析html标签并渲染到目标位置。 - 事件绑定
①.v-on用来进行事件的绑定,简写是**@**,在methods:{ }中定义事件处理函数,在methods:{ }中,可以通过this访问数据源中的数据,此时,这里的this指向了vue实例,即VueComponent。
②.关于$event(vue的内置变量$event就是就是原生Dom的事件对象e,在函数中传参做事件处理时,用于获取事件本身) - 属性绑定
①.v-bind用来动态为元素的属性绑定值,简写是 : - 双向数据绑定
①.v-model用来实现双向数据绑定,一般用于表单元素中实现数据的双向绑定。 - 条件渲染
①.v-if和v-else-if v-else配套使用,利用true/false或者条件判断。 - 列表渲染
①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的值(既能提升性能,也能防止列表状态紊乱)