前端开发学习（一）VUE框架概述

一、MVC模式与MVVM模式

1.1mvc模式

MVC模式是移动端应用广泛的软件架构之一，MVC模式将应用程序划分为3部分:Model(数据模型)、View(用户界面视图)和Controller(控制器)。MVC模式的执行过程是将View层展示给用户，也就是通过 HTML页面接受用户动作，将指令传递给Controler，如单击一个按钮，就会将按钮触发的业务传递给 Controller:Controller完成业务逻辑，要求Model改变状态。

图1：mvc执行过程图

1.2MVVM格式

MVVM 模式是将MVC模式的Controller改成 ViewModel。View的变化自动更新 ViewModel,ViewModel的变化也会自动同步到 View层显示。View层用来接受用户请求，如 DOM 事件、AJAX等:Model层处理数据，不再与 View层交互数据;ViewModel 监听 View 层请求状态的变化，同时刷新 View层显示，ViewModel和 Model层之间进行数据双向绑定，Model层监听ViewModel的变化。MVVM 模式的执行过程是 View层接受到请求告诉 VewModel，用户需要执行一些处理动作，当 ViewModel 发生变化，告诉 View层需要更新页面。所谓的数据双向绑定是 ViewModel 需要更新 Model 层的数据;反之,Model层的数据改变，在ViewModel中的数据状态也要进行相应的改变。

图2：mvvm执行过程图

1.3mvc模式和mvv模式的区别

在 MVC 模式中，数据是单向通信的，按照 View→Controller→Model-View方向循环。在MVVC模式中，数据可以双向通信，核心是ViewModel对象。

二、Vue框架的特性

Vue 是一套构建用户界面的渐进式框架，Vue只关注视图层，采用自底而上增量开发的设计，Vue的目标是通过 API实现数据绑定和组合视图组件。Vue是主流的MVVM 框架之一。

三、vue框架的安装与使用

3.1方法一

1.复制vue.js的全部内容

进入这个网址，CTRL+A全选并复制所有内容

2.新建一个名称为vue2.js文件,将复制内容粘贴进去

3.测试+正确结果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue的安装、创建vue.js</title>
        <script src="./vue2.js"></script>

    </head>
    <body>
        <div id="app">
            name={{name}}
        </div>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    name:"郑州"
                }
            })
        </script>
    </body>
</html>

3.2方法二：利用CDN方式引入vue.js文件

直接使用网址，不用下载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CDN方式引用</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    </head>
    <body>
        <div id="app">
            name={{name}}
        </div>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    name:"河南"
                }
            })
        </script>
    </body>
</html>

运行结果

秒客网