VUE基础篇

喜欢请关注 会不定时更新 ***

学习前VS使用的插件

插件1.jpg

MVC和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 来统一管理。

• VM层 实现了双向数据绑定的思想

一张图说明上述问题

MVC和MVVM.png

• 在VUE当中的对应关系

  
  
  

  对应关系.png

v-cloak 解决闪烁问题

• v-cloak 实现的原理，是 vm 创建好之后，动态 移除 v-cloak 属性，从而 显示 插值表达式的节点
• 应用场景：当网络比较卡的时候，我们可以为 最外层的 元素，添加 v-cloak ，防止用户看到 插值表达式

 

  

    
{{msg}}
    
{{1+1}}
    
{{boo ? '条件为真' : '条件为假' }}
    
{{msg.length}}
    
    
{{arr[1]}}
  
  
  

component 组件 实际就是自定义标签

父子组件传值 - props & $emit

父组件向子组件传递数据：在子组件中使用props，值是数组

      // 这里也属于父组件
      //动态父组件
 

子组件向父组件传递数据 -- 通过$emit基于自定义事件 - 回忆JQ的trigger()事件

        
{{total}}
        
        
 
    

在页面中使用render函数渲染组件