01vue学习——基本代码结构

最新推荐文章于 2025-06-02 00:42:51 发布

原创最新推荐文章于 2025-06-02 00:42:51 发布 · 905 阅读

CC 4.0 BY-SA版权

本文介绍了MVVM模式的概念，包括模型、视图和视图模型的职责，并详细阐述了数据双向绑定的工作原理。接着，概述了Vue项目的三个主要代码模块：View、Model和ViewModel，强调了ViewModel在数据通信中的核心作用。最后，提到了Vue中数据绑定和DOM操作的简化，以及使用Vue时避免直接操作DOM的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01vue学习——基本代码结构

在认识vue的代码结构之前，我们先来认识另外一个概念——MVVM，它是Model-View-ViewModel的简写。即模型-视图-视图模型。
1.模型（M）：指的是后端传递的数据。
2.视图（V）：指的是所看到的页面。
3.视图模型（VM）：mvvm模式的核心，它是连接view和model的桥梁。
4.视图模型有两个方向
（1）将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
（2)将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
5.这两个方向都实现的，我们称之为数据的双向绑定。
6.总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
在这里插入图片描述

三个模块的代码结构

0.整体的代码

0.1html代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>
<body> 
    <div class="app">
        <p>{{ msg }}</p>
    </div>  
    <!--导入vue的包-->
    <script src="lib/vue-2.4.0.js"></script>
    <script src="js/vue01.js"></script>
</body>
</html>

0.2js代码部分


let vm = new Vue({
    el:'.app',
    data:{
        msg:"欢迎学习vue",
    }
})

1.View模块

<!-- 下面这个类名为app的div则是 mvvm思想中的 V —— 即视图模块 -->
<div class="app">
	 <p>{{ msg }}</p>
</div>

2.Model模块

/* 下面的data就是mvvm思想中的m模块 —— 即存放了当前页面中所需的数据 */
 data:{
        msg:"欢迎学习vue",
    }

data存放的是el页面中要用到的数据

3.ViewModel模块

/* 下面这个 new 出来的vm 即是mvvm思想中的 vm模块，是m 和 v 之间的调度者 */
/* 创建一个vue实例 */
let vm = new Vue({
    el:'.app',
    data:{
        msg:"欢迎学习vue",
    }
})

(1) 当我们导入 vue 包之后，在浏览器的内存中，就多了一个vue的构造函数
(2) el属性不能是 body 或者 htm，它表示当前new出的vm对象要控制页面上的哪个区域
(3) 通过vue提供的指令，很方便的就可以吧数据渲染到页面上，程序员不需要再操作DOM元素了，（前端框架如vue等，不提倡我们去手动操作DOM元素）