Vue学习:MVVM架构模型

架构模型：MVVM模型

M：Model模型 对应data中的数据

V：View 模板——解析成DOM 在页面中显示

VM:ViewMode(视图模型)：Vue实例对象——数据绑定—— 中间的桥梁

 所以会使用vm接收实例

 

    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '加油yes',
                address: 'Sub-district 10'
            },
        });
        console.log(vm)
    </script>

 输出的是Vue实例，vue实例上有属性adress name:点击...值会显示。data中的keyvalue出现在了vm上。

{{}}里面可以写：实例对象vm上的属性都可以看见 ，原型链上的也可以

    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <h1>属性上的：{{$options}}</h1> 
        <h1>原型上的：{{$destroy}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '加油yes',
                address: 'Sub-district 10'
            },
        });
        console.log(vm)

data中的属性，最终都出现在了vm身上

vm身上所有的属性，已经原型链上的所有属性，在vue模板中都可以直接使用