前端三大框架

前端三大框架

angular：【更新速度快，重量级框架，集成了很多框架，几乎不用安装件】{GOOgle公司};

React:【渐进式框架】【mata公司】;

Vue:【渐进式框架，设计时参考了Angular和React】【尤雨溪】;

什么是渐进式框架：

主张使用最少的代码来实现应用，需要什么再单独进行安装；

Vue的优点

1：渐进式框架；

2：单页面应用，更加丝滑,无数新，【页面中只有一个html文件】;

3：不需要大量的操作DOM结构;

4: 虚拟DOM来优化dom操作;

5:组件式开发【像拼图，积木，将单独独立的功能进行组合拼装】[灵活，复用性好]

MVVM & MVC

1:MVC设计模式

M:Model[数据模型];

V:View[视图层];

C:Contronller[控制器];

2:MVVM设计模式

M:model[数据模型];

V:view[视图层];

MV:ModelView[同步更新];

a：数据层和视图层的桥梁，当数据层发生变化，会自动更新View层的内容;

b:当View层被用户修改，会自动将修改的内容去更新Model层;

v-bind指令

作用：给HTML属性动态绑定变量值;

<div id="app">
  <span v-bind:id="myId1">SP1</span><!-- 绑定变量：myId1，标准形式 -->
  <span :id="myId2">SP2</span><!-- 绑定变量：myId2，简写形式 -->
</div>

new Vue({
  el:"#app",
  data:{
    myId1:"id1",myId2:"id2"
  }
})

v-if && v-show

1.v-if可以写多重条件判断，v-if也能单独使用，而v-show只有这一

个指令;

2:v-if如果表达式为flase，则表达式移除标签，v-show表达式为false,则用display:none隐藏标签;

3.隐藏/显示 切换频繁使用 v-show 比较好 ,否则使用 v-if

4.如果某些标签一开始是隐藏状态,可以考虑使用v-if,因为它最开始就不创建该标签,而v-show则需要先创建标签,再隐藏标签;

5.v-if会让组件的生命周期重新执行一遍,性能消耗更多一些