Vue简述
简述Vue中的MVVM模型
-
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View代表UI组件,它负责将数据模型转化成UI展示出来。ViewModel是一个同步View和Model的对象。
-
在MVVM架构下,View和Model之间并没有直接的联系,而是通过ViewModel进行交互,Model和ViewModel之间的交互也是双向的,因此View数据的变化会同步到Model中,而Model数据的变化也会立即反应到View上。
-
ViewModel通过双向数据绑定把View层和Model层连接了起来,而View和Model之间的同步工作完全是自动的,无需人为干涉,因此开发者只需要关注业务逻辑,不需要手动操作DOM,不需要关注数据状态和同步问题,复杂的数据状态维护完全由MVVM来统一管理。
Vue的优点
-
低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
-
可重用性。可以把一些试图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
-
独立开发。开发人员可以专注业务逻辑和数据的开发,设计人员可以专注页面设计。
-
可测试。界面向来是比较难以测试的,而现在的测试可以针对ViewModel来写。
Vue中的生命周期函数(钩子函数)
- beforeCreate(); 组件实例刚被创建(el和data并未初始化)
- created(); 组件创建完成,属性已绑定,但DOM还未生成,el属性还不存在(完成data数据的初始化)
- beforeMount(); 模板编译/挂载之前(完成挂载)
- Mounted(); 模板编译/挂载之后
- beforeUpdate(); 组件更新之前
- update(); 组件更新之后
- beforedestroy(); 组件销毁之前
- destroy(); 组件销毁之后
Vue的指令
v-if 指令判断是否隐藏
v-show 指令
v-else 指令
v-for 指令数据循环出来
v-bind:class 指令绑定一个属性
v-on 指令
v-model 指令: 实现双向绑定它是一个语法糖:真实写法是:value="msg"@input 注( :是v-bind,@是v-on)
v-text 读取文本,不能读取html 标签
v-html 能读取html 标签