【Vue】第一个Vue程序

vue简介

vue是MVVM架构的实现者。MVVM是源自于MVC模式的。

MVVM模式

Model:模型层，在这里表示JavaScript 对象

View:视图层，在这里表示DOM (HTML操作的元素)

ViewModel:

是连接视图（view）和数据（model存放数据）的中间件。是MVVM模式的核心。
转换model中的数据，使之变得更加容易管理
向上与视图层进行双向的数据绑定，简称双向绑定
向下与模型层通过接口请求（如ajax）进行数据交互（json）

在这里插入图片描述

Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个 Observer观察者。
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新.
ViewModel 能够监听到视图的变化，并能够通知数据发生改进
至此，我们就明白了，Vue.js就是一个 MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。

为什么要使用Vue.js

轻量级，体现在Vue.js压缩后有只有20多kb (Angular压缩后56kb+,React压缩后44kb+)
移动优先。更适合移动端，比如移动端的Touch 事件
吸取了Angular（模块化)和React(虚拟DOM）的长处，并拥有自己独特的功能，如:计算属性。

第一个Vue程序

1.安装vue插件

在这里插入图片描述

2.导入vue的cdn

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

3.第一个程序

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

<div id="app">
    {{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    /*vm：viewModel*/
    var vm = new Vue({
        el: "#app",
        /*model*/
        data: {
            message: "hello,world!"
        }
    })
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

学到这的时候，我发现vm真的可以实现双向绑定：

这里正是体现了viewModel其中一个作用：
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新.
体现了向上对视图层进行数据的双向绑定。

通俗的说，双向绑定就是指：前端视图的数据改变了，那么model层的data也会改变。反过来，model层的data改变了，前端视图的数据也会改变。并且这个过程是不需要刷新页面的。

相关阅读:
Android9.0 去掉录屏权限弹框,默认给录屏权限
ASTM标准涵盖哪些产品类别？出口美国的产品做ASTM认证需要注意哪些事项？
测试报告拍卖系统
SpringMvc请求原理流程
redis和nacos的安装
（黑马出品_07）SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
Maven下载及相关配置附IDEA更换本地Maven
OOP栈类模板（模板+DS）
油气田勘探数字化转型现状及展望
SSM在线校园相册管理平台

原文地址：https://blog.csdn.net/qq_53635765/article/details/126874287