1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue:MVVM模型

Vue:MVVM模型

时间:2021-11-07 09:13:02

相关推荐

Vue:MVVM模型

MVVM模型

MVVM简介MVVM模式使用的是数据绑定基础架构,它可以轻松构建视图用户界面(User Interface,UI)的必要元素。ViewModel负责取出Model数据的同时帮忙处理视图(View)中由于需要展示内容而涉及的业务逻辑,MVVM没有MVC模式的控制器,也没有MVP模式的展现器,有的只是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。我们只需编写一些绑定器利用一些指令绑定采用数据双向绑定模式,视图的变化就会自动更新ViewModel中,ViewModel的变化也会自动同步到视图中进行显示。MVVM模式实现了视图和数据的分离、UI设计与业务逻辑的分离。MVVM代表框架有Vue. js、React. js、Angular. js和Ember. js。Vue. js是一个提供了MVVM模型的双向数据绑定的JavaScript框架,专注于View 层。它的核心是MVVM中的VM,即ViewModel。ViewModel负责连接View和Model,保证视图和数据的一致性,这种轻量级的框架使前端开发更加高效和便捷。

MVVM模型

Model:MVVM中的Model简写为M。Model代表整个Web项目所需要的数据模型, Model含有大量信息,但它并不具有任何行为逻辑,它只是数据,因而它不会影响浏览器如何展示数据。

View:在MVC中, View是不能自己改变的,通常由控制器操作DOM来改变View。而在MVVM中, View是具有主动性的,因为它包括了一些数据绑定、事件和行为,这些都会直接影响Model和ViewModel。View不但负责自身的展示,而且会将自身的变化同步到ViewModel中。

ViewModel:MVVM中的VM可以被看作MVC中的控制器,VM主要负责用一定的

业务逻辑对数据进行改变或转换,也负责将Model的变

化反映到View上,而当View自身有变化时,也会同步 View

Model进行改变。

使用Vue.js理解MVVM

在Vue. js中,呈现页面HTML标签的是View, Model是用于渲染的数据,ViewModel是创建的Vue实例。数据可以在Vue实例中写,也可以重新创建一个装载数据的对象。Vue. js的最大特点是实现了数据的双向绑定。在一般情况下,需要通过编写代码,对从服务器获取的数据进行渲染,并展现到视图中。每当数据有变更时,会再次进行渲染,从而更新视图,使得视图与数据保持一致。Vue不会反复渲染页面更新视图,而是会通过用户的交互,产生状态、数据的变化,将视图对数据的更新同步到ViewModel中,进而提交到后台服务器。

实例帮助理解双向数据绑定

下面通过一个实例来理解双向数据绑定

<div id="div_pili">姓名:{{name}}<br />性别:{{sex}}<br /><hr><!-- 在输入框里输入内容会同步到页面上 -->姓名:<input type="text" name="input2" id="input2" v-model="name"/><br />性别:<input type="text" name="input2" id="input2" v-model="sex"/><br /></div><script>var chang=new Vue({el:'#div_pili',data:{name:'pili',sex:'男'}})</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
vue中MVVM模型

vue中MVVM模型

2023-04-15

Vue学习--MVVM模型

Vue学习--MVVM模型

2019-05-15

Vue中MVVM模型详解

Vue中MVVM模型详解

2021-07-29

Vue核心之MVVM模型

Vue核心之MVVM模型

2019-04-15