Vue

Vue

Scroll Down

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中的生命周期函数(钩子函数)

  1. beforeCreate(); 组件实例刚被创建(el和data并未初始化)
  2. created(); 组件创建完成,属性已绑定,但DOM还未生成,el属性还不存在(完成data数据的初始化)
  3. beforeMount(); 模板编译/挂载之前(完成挂载)
  4. Mounted(); 模板编译/挂载之后
  5. beforeUpdate(); 组件更新之前
  6. update(); 组件更新之后
  7. beforedestroy(); 组件销毁之前
  8. 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 标签