vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

 

 

编写代码，让我们更加清晰的了解MVVM：

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script>
    window.onload = function(){
        // 创建vm对象
        var vm = new Vue({
            el: "#app",
            data: {
                name:"yuan",
                age:22,
            },
        })
    }
    </script>
</head>
<body>
    <div id="app">
        <!-- 在双标签中显示数据要通过{{  }}来完成 -->
        <h1 ref='title'>{{name}}</h1>
        <p>{{age}}</p>
    </div>
</body>
</html>

　　

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据：

console.log(vm)     // box  vm对象可以控制的范围
console.log(vm.$el)     // box  vm对象可以控制的范围
console.log(vm._data);  // vm对象要显示到页面中的数据
console.log(vm._data.name);  // 访问data里面的数据
console.log(vm.name);  // 这个 name就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,name只是举例.
console.log(vm.$refs.title) // 结果就是获取页面中ref = "title"的html元素，类似docment.querySelector("[ref=title]")

　　

 

posted @ 2021-10-01 20:31  映辉  阅读(215)  评论(0)    收藏  举报