MVVM模式

MVVM是在前端中的模式，即Model（模型，数据），View（视图层）和这两者之间的VM（调度者）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入vue的包 -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 将来new的vue实例会控制这个元素中的所有内容 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        //2.创建一个vue的实例
        //当我们导入包时，在浏览器的内存中，就多了一个vue的构造函数
        var vm=new Vue({
            el:'#app',//表示当我们new的这个vue实例，要控制页面上的哪个区域
            data:{//data属性中，存放的是el中要用到的数据
                msg:'欢迎使用vue'//通过vue指令，就能很方便的把数据渲染到页面上
            }
        })
    </script>
</body>
</html>

 

这其中，view就是

    <div id="app">
        <p>{{msg}}</p>
    </div>

model就是

data:{//data属性中，存放的是el中要用到的数据
                msg:'欢迎使用vue'//通过vue指令，就能很方便的把数据渲染到页面上
            }

vm就是

    <script>
        //2.创建一个vue的实例
        //当我们导入包时，在浏览器的内存中，就多了一个vue的构造函数
        var vm=new Vue({
            el:'#app',//表示当我们new的这个vue实例，要控制页面上的哪个区域
            data:{//data属性中，存放的是el中要用到的数据
                msg:'欢迎使用vue'//通过vue指令，就能很方便的把数据渲染到页面上
            }
        })
    </script>

也就是说，vm的作用就是将数据和视图连接到一块

posted @ 2020-02-18 16:47  T&K  阅读(296)  评论(0)    收藏  举报