mvvm个人理解

最新推荐文章于 2024-04-12 17:08:41 发布

ygy211715

最新推荐文章于 2024-04-12 17:08:41 发布

阅读量4.4k

点赞数 6

分类专栏： vue

本文链接：https://blog.csdn.net/ygy211715/article/details/80598291

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

做技术，，有什么好处么。。如果要我说的话，我之所以喜欢做技术，最大的原因是成就感吧。我喜欢做每当做完一个项目的时候的那份成就感。让我感觉自己的存在是有一定的价值的。但~也很累~终生学习是做技术的宿命吧。

但是~话说回来了，哪行哪业不需要学习呢。对吧

做前端就要不断的学习各种流行的框架，react,angular,vue。。你有没有发现，这些框架跟jquery这些框架不一样，他们采用的都是mvvm的软件架构设计模式。

什么是mvvm呢

简单来说，mvvm是modal-view-viewmodel的缩写。

View层

View层是视图层，也就是用户界面。

Model层

Model是指数据模型，也就是后端进行业务处理和数据处理

ViewModel层

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这里，前端可以对从后端获取的model数据进行转换处理，以便于前端的View层使用。

双向数据绑定和单项数据绑定对比

<body>
		<div class="container">
			<p class="name">丽丽</p>
			<p class="age">23</p>
		</div>
		<script type="text/javascript">
			$(".name").html("花花");
			$(".age").html("26")
		</script>
	</body>

这时候，我们如果想改变name和age的值，就要进行dom操作，选中name和age元素，然后进行赋值操作。这是进行少量简单的改变视图操作，如果进行大量的视图绑定的数据改变的时候就会变得比较麻烦，这时候会凸显出mvvm的优势。

下面我们用vue.js作出变化

<div class="container">
			<p class="name">{{user.name}}</p>
			<p class="age">{{user.age}}</p>
			<button @click="change">点击我</button>
		</div>
		<script type="text/javascript">
				new Vue({
					el:".container",
					data:{
						user:{"name":'丽丽',"age":'23'}
					},
					methods:{
						change:function(){
							this.user.name="花花";
							this.user.age="24"
						}
					}
					
					
				})
		</script>

这时候我们点击按钮只需要改变数据就能改变视图，让视图更新。所以我们前端开发者只需要关注ViewModel层，而不需要进行复杂的dom操作，真的是给我们前端开发者省去了很多很多的麻烦。

<div class="container">
			<input type="text" v-model="name" />
			<p>{{name}}</p>
		</div>
		<script type="text/javascript">
				new Vue({
					el:".container",
					data:{
						name:"lili"
					}
				})
		</script>

双向数据绑定当我们输入框里的值改变数据也会随之改变，设想一下，如果我们提交表单时候是不是不需要在一个个的整理表单数据然后发送给后端，因为客户端输入的内容我们直接就得到了，而且是以对象的形式进行的存储，是不是可以直接发送给后端使用。是不是又给我们带来了极大的方便~~

小伙伴们，mvvm架构设计模式是现在和以后前端流行的趋势。so~能不学么

ygy211715

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
3
评论
mvvm个人理解

做技术，，有什么好处么。。如果要我说的话，我之所以喜欢做技术，最大的原因是成就感吧。我喜欢做每当做完一个项目的时候的那份成就感。让我感觉自己的存在是有一定的价值的。但~也很累~终生学习是做技术的宿命吧。但是~话说回来了，哪行哪业不需要学习呢。对吧做前端就要不断的学习各种流行的框架，react,angular,vue。。你有没有发现，这些框架跟jquery这些框架不一样，他们采用的都是mvvm的软件...
复制链接

扫一扫