【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改变了，前端视图的数据也会改变。并且这个过程是不需要刷新页面的。

相关阅读:
北邮22级信通院数电：Verilog-FPGA（9）第九周实验（3）实现一个具有清零功能的按键计数器，对按键进行计数并显示
ttkefu子账号提示已被关闭或过期是什么一样，该怎么处理呢？
＜C++＞模板
Docker部署xxl-job
js 小数相乘后，精度缺失问题，记录四舍五入，向下取整
学生HTML个人网页作业作品使用HTML+CSS+JavaScript个人介绍博客网站 web前端课程设计 web前端课程设计代码 web课程设计
最近公共祖先离线做法（tarjan）
系统安全测试要怎么做？
LeetCode 每日一题 2022/8/8-2022/8/14
如何进行开关电源能效（效率）测试？纳米软件电源测试系统如何助力？

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