前端MVVM框架vue的使用

在前端，移动端开发过程中，有几种框架如：MVC，MVP ，这两年比较流行的MVVM，下面就简单的介绍下如何使用vue进行开发。

MVVM

(ModelView ViewModel)是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。

VUE

首先在使用了vue以后不得不说，这是做移动web的很好的框架。它非常的轻量，min库只有几十K大小。实现的效果可以对一个项目来说节省了成千上万行代码，都不夸张。开发起来也更加的高效。

官网地址：https://cn.vuejs.org/

1、首先在HTML文件里应用vue.js ，具体可以在官网下载

2、声明绑定

在界面div标签 定义好id，

再代码中通过如下

var app = new Vue({

el: '#app',   //此处绑定上面定义的id

data: {//此处定义的对象就可以在绑定的div里使用了

message: '88888',

seen: true,

todos: [{

name: 'JavaScript',

age: 20

}, {

name: 'Vue',

age: 30

}, {

name: 'Angular',

age: 18

}],

}

})

3、v-modle ：属性，动态双向绑定：数据发生变化时与界面绑定的数据会同步显示。界面输入框的内容变化，会同步绑定的js对象。

其他内容显示通过{{ }}标签来使用，具体效果如下：

4、v-if v-else：条件判断，如下可以控制界面的显示，seen 在声明时已经赋值，条件的值为true时显示。

代码

5、v-for：遍历列表展示，数据发生变化时，界面会及时的渲染效果。

代码

显示效果

6、v-on:click--事件绑定，用于绑定界面交互操作。界面上绑定的事件必须在vue里面进行声明。

代码

声明在methods里

VUE的使用还是比较容易上手的，作为典型的前端MVVM框架，它适合轻量的开发，效率也很高。如果你还在使用传统的js办法进行dom操作，是时候使用MVVM框架了。