Vue

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

一 快速了解

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层。

留言

您的电子邮箱地址不会被公开。 必填项已用*标注