Vue学习笔记2：Vue模式的理解

最新推荐文章于 2024-04-22 12:21:13 发布

凌晨小街

最新推荐文章于 2024-04-22 12:21:13 发布

阅读量272

点赞数

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/ysj367635984/article/details/119110033

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们直达官网来看看Vue到底使用了什么模式进行工作：
在这里插入图片描述
从上图可知，我们对这种模式好像是否陌生，以前倒是晓得有一个MVC模式，那么这个模式是Vue独创的吗。
其实不是，这个模式也是一名外国人发明的，后来Vue的作者借鉴了这种模式来开发Vue
这种模式的缩写就是： MVVM

M：（model），意思是模型，其实大部分情况来说是数据
V：（view），意思是视图，可以理解为前端展示的元素页面
VM：（view-model），意思是模型视图，这才是Vue的核心，也是架起mode与vie之间的桥梁。（内置了DOM元素监听器和数据绑定）

我们就先暂时做一个简略的说明，后面实践中慢慢体会。
还有，请记住一点，vue里面使用的是虚拟DOM，不是真实的DOM，这样子的目的是降低操作DOM带来的性能开销

2、Vue是怎么实现数据与页面绑定的？

Vue被称为拥有响应式的前端框架，那么它是如何达到的呢？

Vue可以对一个DOM元素进行监听，当Vue开启对它的监听后，Vue实际也可以监听该DOM元素所有的子类元素。
我们假设该DOM元素在页面上面显示一个值，这个值是由一个变量“a“来代替的，而Vue的响应式是，当该DOM元素被Vue接管后，如果”a“变量的值发生变化，那么页面上面依赖”a“值的地方也会发生实时的变化。

那么Vue是怎么实现页面数据与变量数据的绑定的呢？

通过Vue类来实现的。

在这里插入图片描述

Vue是Vue官方提供的类，就论述我上面出现的配置项来说明吧：

① el: 指定该Vue实例接管哪个DOM对象，这里填的是DOM元素的选择器
② data：指的是被Vue接管的一些数据变量，当这些变量被定义在data里面的时候，那么其接管的DOM对象就可以使用这些变量的值（具体怎么使用下面再说）

其实我们还注意到，上面的标签体内有一个{{name}}，这个是什么呢

这个是Vue里面的语句格式：插值语句，意思就是将Vue的data里面叫name变量的值插入到这个标签体当中，而为了防止浏览器解析为”name“
字符串，所以就在变量放入到双花括号里面 {{}}

意思就是说如果是data里面的变量，都可以这样子放入到其管辖的DOM元素标签体当中，那么在{{}}里面只能写data里面的变量吗

其实并不是，以后你可以还会学习到，里面放一些简单的js表达式，回调函数，包括Vue实例自身的属性值等等。这些以后会一一细讲。

OK，写完后我们运行一下页面，发现结果如下：
在这里插入图片描述
完成了，下面是全部代码：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width', initial-scale=1.0'>
    <!-- 请引入对应路径的  vue.js -->
    <script  src='../js/vue.js'></script>
    <title>Vue入门</title>
</head>
<body>
    <div id="root">
        <div class="id">{{name}}</div>
    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
                name:"我是菜鸡"
            }
        })
    </script>
</body>
</html>