vue的第3篇第一个vue程序

一 vue的mvvm实践者

1.1 介绍

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

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

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

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

1.2 vue模板的配置

1.文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

2.使用：新建一个html文件，在文件中输入vue.html 则自动生成如下内容

二 vue的程序

2.1 第一个程序


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
 
    
</head>
<body>
    <div id="app">
        <!-- {{}} 插值表达式，绑定vue中的data数据 -->
        {{ message }}
    </div>
    <script src="vue.min.js"></script>
    <script>
        // 创建一个vue对象
new Vue({
    el: '#app',//绑定vue作用的范围
    data: {//定义页面中显示的模型数据
        message: 'Hello Vue!'
    }
})
    </script>
 
</body>
</html>

效果：

相关阅读:
绝热量热法反应热测试过程中的温度和压力自动跟踪控制解决方案
不想改bug?程序员必须学会使用的报错函数assert!(断言函数详解)
2024年申报国自然项目基金撰写及技巧
多线程之ConcurrentHashMap原理
Apache JMeter
【C++】适配器模式 - - stack/queue/deque
VEX —— Functions|Geometry
【Java并发】聊聊如何优雅的暂停一个线程以及LockSupport
java基础--常用的包
鸿蒙Arkts上传图片并获取接口返回信息