Vue（五）：Vue中的MVVM

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue中的MVVM</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>Hello, {{name}}</h1>
        <h1>{{$options.el}}</h1>
    </div>

    <script type="text/javascript">
    

        const vm = new Vue({
            el: "#root",
            data: {
                name: "world"
            }
        });

        console.log(vm);
    </script>
</body>

</html>

        什么是MVVM模型？
        MVVM其实是三个东西，分别是模型（Model）、视图模型（ModelView）、视图（View）。
        Vue的设计是借鉴了MVVM模型的，所以其设计人员建议定义一个Vue实例的时候，尽量去以vm来进行命名。

        为什么以vm进行命名呢？
        实际上，如果把Vue与MVVM模型中的三个东西一一对应，就会明白为什么了，二者对应如下：
            模型（Model）：Vue中的data数据
            视图（View）：Vue的模板代码
            视图模型（ViewModel）：Vue实例
        
        这样一看就对Vue的整个过程相当清晰了，M的数据（也就是data中的数据）交给VM（也就是Vue实例）出处理，VM处理好之后再将数据交给V（Vue的模板代码）去展示。当然这只是单向的过程，双向的反过来即可。
        所以说实际上Vue实例就是连接数据和模板代码的一个桥梁，经过处理的数据会成为Vue实例的一部分。
        之前提到插值语法中可以是data中的属性和一些js表达式，现在看来，凡是Vue实例中存在的东西，模板代码都能对其进行调用。

（本文仅作个人学习记录用，如有纰漏敬请指正）