初步理解vue机制

最新推荐文章于 2023-06-18 16:05:34 发布

咸鱼_翻身

最新推荐文章于 2023-06-18 16:05:34 发布

阅读量664

点赞数 2

分类专栏： spring学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/aaa123_456aaa/article/details/121315099

版权

spring学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、简介

1.Vue.js 是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。他的核心就是实现了
2.MVVM是什么？
mvvm是一种类似mvc的思想， vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。
3.MVVM模型解决了什么问题？
通过模型和视图双向绑定，修改view视图层时可以不改变数据，而修改model层的时候可以不改变view视图。而且当model 与 view 有数据改变的时候，因为数据的双向绑定，可以做到，一个改变，另一个自动跟着改变。
那么让我们来看看第一个vue程序：

1、首先我们看需要导入包，然后新建一个HTML文件，在文件中写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 这个就是原本的view层，其实就跟我们原本的${}取值时一样的，也就是模板-->
<div id="app">
    {{message}}
</div>

<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
    	//绑定view层
        el:"#app",
        //Mode层 : 数据
        data:{
            message:"hello vue!"
        }
    });
</script>

</body>
</html>

首先你会发现其实vue跟我们原本写的前端没有太大区别，但是vue的基本架构是MVVM；接下来是重点！！！！！
1、其中V我们已经有了：

<div id="app">
    {{message}}
</div>

2、M我们也有了：

    var vm = new Vue({
        el:"#app",
        //Mode层 : 数据
        data:{
            message:"hello vue!"
        }
    });

3、那我们的剩下的一个VM层在哪里呢？我们在控制台查看，并且输入指令。那么我们可以看见我们改了什么就变成了什么。
在这里插入图片描述
4、现在小伙伴们明白了吗，VM层就是双向绑定View层和Mode层，我们本来改变JavaScript代码，在页面无刷新的情况之下，前端页面肯定不会改啊，但是后面我们通过vue双向绑定之后，你改变message就相当于改变了绑定的view中的数据，理解为页面无刷新改变。我们用两张图来理解一下：
在这里插入图片描述

5、最后再理解一遍何为双向绑定！
双向绑定就是你们前端数据改变你们data中的数据也会改变
同样的，你们data中的数据改变了前端页面中的数据也同样会发生改变
而且，这个过程是不需要刷新的

咸鱼_翻身

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
初步理解vue机制

一、简介1.Vue.js 是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。他的核心就是实现了2.MVVM是什么？ mvvm是一种类似mvc的思想， vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。3.MVVM模型解决了什么问题？通过模型和视图双向绑定，修改view视图层时可以不改变数据，而修改model层的时候可以不
复制链接

扫一扫