Vue
官网: vue官网
一、基本介绍
1. 什么是vue
第三方开发的,基于MVVM设计模式,渐进式的,纯前端JS框架。
只要以数据操作(增删改查)为主的项目,都可以由vue框架开发
2. MVVM
设计模式
MVC
衍生
View
视图/界面Model
模型对象View/Model
视图模型
双向绑定
: 监听数据的变化,然后通知视图进行自动更新。当用户操作视图时,vm也能监听到视图的变化,然后通知数据做相应的改动
3. vue实现双向绑定(核心原理)
Vue2绑定原理:1. 访问器属性 2. 虚拟DOM树
4. 虚拟DOM树优点(简化)
- 内容少
- 遍历查找快
- 修改效率高(因为只修改个别受影响的元素)
- 提起封装了DOM的增删改查操作,避免重复代码
二、vue2存在问题:
-
在
vue2
使用下标
修改数组中的元素值,无法自动更新页面。比如: vm.arr[1]="123" ⇒ 界面不会改变
因为new Vue()不会对数字下标的元素添加访问器属性,所有,数字下标的元素都不受监控。
解决:
① 用数组API代替下标修改元素。vm.arr.splice(1,1,"123") ⇒ 可及时刷新页面
②也可使用set
-
new Vue()只有在首次加载对象时,才给对象中每个属性自动创建访问器属性。但是,后来强行添加的新成员,就无法获得访问器属性了。(只有在开局时就有的成员才能受到监控,后来新加入的成员不受监控)