Vue.js框架初识

一、Vue框架简介

1、Vue.js 是目前最火的一个前端框架，和Angular.js、React.js 一起，并成为前端三大主流框架。

2、Vue.js是用于构建用户界面的渐进式框架。

3、在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑。

4、Vue框架，能够提高开发的效率。

提高开发效率的发展历程:

原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Vue.js

二、MVVM简介

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所看到的页面。

【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信。

ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

三、Vuejs中的HelloWorld

  
    
    
    
  
  
    

      
请输入:  
      
你输入的为:    
      
    
    
    
      // 原生JS操作DOM实现
      // let input = document.getElementsByTagName("input")[0];
      // let span = document.getElementsByTagName("span")[0];
      // input.onkeyup = function(){
      //   span.innerText=input.value;
      // }
      
      // VUE版本实现
      const vm = new Vue({
        el:"#app",
        data:{
          name:"manong0371"
        }
      })