【Vue】第一个Vue程序

最新推荐文章于 2022-09-30 16:07:10 发布

❀༊烟花易冷ღ࿐❀

最新推荐文章于 2022-09-30 16:07:10 发布

阅读量424

点赞数

文章标签：前端 vue.js 前端框架

本文链接：https://blog.csdn.net/qq_53635765/article/details/126874287

版权

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>

3.第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view-->
<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>

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

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

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

❀༊烟花易冷ღ࿐❀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】第一个Vue程序

vue是MVVM架构的实现者。MVVM是源自于MVC模式的。在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个 Observer观察者。至此，我们就明白了，Vue.js就是一个 MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。
复制链接

扫一扫