Vue

上手第一个Vue程序和MVVM的理解

2021年6月30日 /

一 快速了解

1前端框架：
Angular：

由Google后端工程师研发，带来了MVC分层模式的思想；

React：

Facebook出品，引入虚拟DOM概念；

Vue：

上述二者兼而有之。

2 MVVM：

Model View ViewModel的概念。在Model View Control的思想上再进一步，Vue聚焦在ViewModel层。

Vue是MVVM模式中VM的实现者，即View层不再和Model层绑定，而是和ViewModel层绑定，当Model层的数据发生变化，则会通过ViewModel反应到View层，反之，View层的变化也会通过ViewModel层，传递到Model层。

View层展现的不再是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

当然，作为新手，想要深入理解这些概念比较不容易，有点儿费劲。我们直接动手来写一个Vue的程序。

二 上手实践

动手写官网例子程序，可以参考：https://cn.vuejs.org/v2/guide/index.html

1 新建HTML文件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第1个Vue程序</title>
    </head>
    <body>
    </body>
</html>
2 导入Vue，选择cdn方式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第1个Vue程序</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
    </body>
</html>
3 声明div
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>if-else学习</title>
        <script  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            //这个相当于是View层
            {{ message }}
        </div>
    </body>
</html>
4 script里新建一个Vue实例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个Vue程序</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js " type="text/javascript">
        </script>
    </head>

    <body>
        <div id="app">
            //这个相当于是View层
            {{ message }}
        </div>

        <script type="text/javascript">
        //new Vue 相当于是ViewModel层
            let app =  new Vue({
                //element的缩写，挂载元素。
                el: '#app',
                //data相当于是Model层。
                data:{
                    message:"Hello Vue."
                }
            })
        </script>

    </body>
</html>
5 挂载元素
6 定义data

该两步骤中，具体可以看上述代码，挂载元素，就是el:‘#app’,定义Model层，就是data:{}。

三 小结

从这个小例子中，重点理解MVVM模式的意义：

View层：div定义这个相当于是View层；

ModelView层：let app = new Vue，其实就可以理解为ViewModel层，当然该代码的含义是创建Vue的实例。

Model层：data:{}，相当于定义Model层。

Post Views: 864

留言