第一个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 层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。

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

在这里插入图片描述

相关阅读:
中能融合携手天翼云打造“能源大脑”
linux下docker容器安装已经docker基本使用命令详解
中国人民大学与加拿大女王大学金融硕士项目——花会沿路盛开，我们未来的路也是
如何在你的开源项目中添加开源许可证
大学生端午节网页作业制作学生端午节日网页设计模板传统文化节日端午节静态网页成品代码下载端午节日网页设计作品
Docker搭建harbor仓库
使用阿里云试用Elasticsearch学习：2.1 深入搜索——结构化搜索
sonic云真机通过linux系统接入苹果手机
【MAC】升级 Mac os 后报错
什么是联盟营销以及如何使用它在网上赚更多的钱

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