Vue|青训营

69 阅读2分钟

浅谈Vue

VUE是一套前端框架,免除了原生JavaScript中的DOM操作,简化书写。1. VUE基于MVVM(Model-View_ViewModel)思想,实现数据双向绑定。 前端领域经历了html+js+cssEasyUI+JQuery再到**node.js + vue(React,Angular)+ElementUI(iview,antDesign)**的发展进程。

MVC是一种设计模式:M(Model):模型层。是应用程序中用于处理应用程序数据逻辑的部分,模型对象负责在数据库中存取数据;V(View):视图层。是应用程序中处理数据显示的部分,视图是依据模型数据创建的; C(Controller):控制层。是应用程序中处理用户交互的部分,控制器接受用户的输入并调用模型和视图去完成用户的需求,控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回的数据。

而对于MVVM而言,vue框架中MVVM的M就是后端的数据,V就是节点树,VM就是new出来的那个Vue({})对象。M(Model):模型层。就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model;M(Model):模型层。就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model;VM(ViewModel):视图模型层。连接view和model的桥梁。因为,Model层中的数据往往是不能直接跟View中的控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

了解了以上两者的特点之后,我总结出了MVVM和mvc的最大区别:它实现了View和Model的自动同步,也就是当Model的数据改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变数据后该数据对应View层显示会自动改变。

Vue简单应用

1、新建HTML页面,引入Vue.js文件。

<script src="js/vue.js" />

2、在JS代码区域,创建Vue核心对象,进行数据绑定。

new Vue({
  el:"#app",
  data(){
    return{
      username:""
    }
  }
});

3、编写视图。

<div id = "app">
  <input type="text" name="username" v-model="username">
  {{username}}
</div>