​ 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，专门用来保存每个页面的数据。

​