【前端框架学习】vue.js基本代码和MVVM之间的关系

1.导入相关的包文件，这里采用cdn的方式

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

2.创建一个Vue实例

当导入包之后，在浏览器的内存中多了Vue的构造函数

    <script>
        //2.创建一个Vue实例
        //当导入包之后，在浏览器的内存中多了Vue的构造函数
        var vm = new Vue({
            el: '#app',//表示当前new的vm要控制页面哪个区域
            data: {//data属性中存放的是el中要用到的数据
                message: 'hello,world!'//通过vue提供的指令能够把数据渲染到页面上，不用手动操纵DOM元素了
            }

        });

    </script>

3.在页面中引用vm中的元素

new出来的vue实例会去控制这个元素中的所有内容

    <div id="app">
        <p id='content'>{{message}}</p>
    </div>

4.运行效果

5.总结

vue实例控制的元素区域就是MVVM中的V，new出来的这个vm对象就是MVVM中的VM调度者，vm中的data可以看作MVVM中的M，专门用来保存每个页面的数据。