第一个Vue程序

Vue简洁

Vue是一套用于构建用户界面的渐进式框架，与其他框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手。

MVVM模式

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM(HTML操作的元素)
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewMidek能够监听到视图的变化，并能够通知数据发生改变。

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定。

第一个Vue程序

我们直接导入Vue的CDN
在这里插入图片描述

<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
1
2

Vue.js的核心是实现了MVVM模式，它扮演的角色就是ViewModel层，那么所谓的第一个程序就是展示她的数据绑定功能
在这里插入图片描述

demo1.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">
    {{message}}
div>
<script>
    var vm=new Vue({
        el:"#app",
        //model：数据
        data:{
            message:"hello,vue!"
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

说明：

el:‘#app’：绑定元素的ID
data:{message:‘hello,vue!’}：数据对象中有一个名为message的属性，设置其初始值为hello，vue。

将数据绑定到页面元素(视图层)

<div id="app">
    {{message}}
div>
1
2
3

只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果，类似EL表达式

测试
在这里插入图片描述
在控制台Console 输入vm.message=‘hello world’ 然后回车，观察会发现浏览器中的值直接跟着改变，不用刷新页面。

在这个操作中，我并没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的数据绑定功能实现的；MVVM模式中要求 ViewModel 层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

相关阅读:
k8s学习--kube-proxy的三种工作模式详细解释
三位球形模型应用
大数据专业有哪些基础的理论和技术
Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建
线程绑定CPU、线程优先级的设置
【ARM-0】基本概念
Dubbo—— 一个服务既是消费者又是提供者
TabLayout+Fragment+ViewPager实现Tab页面效果
Doris workload group实战
图--深度优先搜索

原文地址：https://blog.csdn.net/qq_41359998/article/details/122856591