Vue.js note1（vue介绍&MVC&MVVM&MVP）

什么是vue

今天刚接触到vue，先来简单了解下什么是vue。

Vue.js是一套构建用户界面的渐进式框架，自底向上增量开发 （逐层应用）；同时它也是轻量级、高效率、上手快、简单易学、文档全面而简洁、可组件化的 MVVM 库，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js的产生核心主要为了解决以下3个问题

1. 解决数据绑定问题。
2. Vue.js主要的目的是为了构建大型单页面应用。
3. 支持组件化。也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高。

vue.js的核心思想

• 数据驱动
• 组件化

Vue.js 优势

简洁：HTML 模板 + Vue 实例 + JSON 数据
轻量：17kb，性能好
设计思想：视图与数据分离，无需操作DOM
社区活跃：大量的中文资料和开源案例
性能好

MVC

• Module     模型 ：存储数据的 （数据的储存和处理，再传递给视图层相应或者展示）
• View       视图 ： 界面（前端的数据展示）
• Controller  控制器 ：对数据的接收和触发事件的接收和传递

MVVM

简书：Vue.js 概述与 MVVM 模式

虽然vue官网说vue没有完全遵循MVVM模型，但是不得不说vue是基于MVVM框架的，只不过底层修改了些东西，比如双向绑定什么的。MVVM是Model-View-ViewModel 的缩写，是一种设计思想。

MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器MVC的C层）。

• M：Model 模型层，主要负责业务数据相关；
• V：View 视图层，负责视图相关，细分下来就是html+css层；
• VM：ViewModel 视图模型层，是连接V与M的桥梁，不严谨来讲也可以看作为控制器MVC的C层，负责监听M或者V的修改，是实现MVVM双向绑定的要点。

因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

MVP

模型-视图-展示器(MVP)是 MVC 设计模式的一个衍生模式，它专注于提升展现逻辑。

segmentfault：MVC、MVP 和 MVVM 对比笔记

简书：MVC、MVP、MVVM模式的概念与区别

Vue声明式渲染

Vue.js采用声明式渲染（即允许采用简洁的模板语法来声明式的将数据渲染进 DOM），也就是将模板中的文本数据写进DOM中。

既然有渲染不同方式之分，那是不是说，还有其他的渲染方式呢？有。
JS采用命令式渲染，比如要获取DOM元素，然后指定这个DOM元素里面插入的内容。（傻瓜式）；而Vue的声明式渲染，比如只需要将变量放在某个DOM元素里，就可以自行将内容展示（自动化）。

这两种方式的不同之处在于：
命令式渲染 ： 命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行；
声明式渲染 ： 我们只需要告诉程序我们想要什么效果，其他的交给程序来做。

Vue数据驱动

数据驱动，随着数据的改变，视图内容自动进行改变。

Vue渲染方式

vue官网：模板语法

{{}} — 表达式 （模板语法）

模板语法中可以写入的数据可以是：数字、字符串、计算（不建议写入过多逻辑代码，因为越复杂，越难以维护），进行响应式的展示。

Vue的一个简单小栗子

先导入Vue.js的资源包，可以直接使用线上的src，也可以用npm下载到当前项目里。

线上资源包：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

线下下载使用，用npm管理工具下载：
（1）在终端进入到该项目的工作目录
（2）初始化，形成package.json配置文件，一般用 npm init -y ，但也可以使用淘宝镜像cnpm来管理。
（3）然后下载vue资源包，此处我使用的是 cnpm install --save vue

如果能够顺利下载下来，当前项目目录里面应该有如下图的文件夹：

然后我们写一个“hello world 级别的”入门小程序：需要导入的vue文件目录为"./node_modules/vue/dist/vue.js"

<script src="./node_modules/vue/dist/vue.js"></script>

<!-- 视图层   -->
<div id="demodiv">
    {{text}}--{{num+6}}
    {{bool?"真":"假"}}
</div>
<script>
    // Vue实例，vm层，关联m与v层
    new Vue({
        // 视图层关联 用el
        el:"#demodiv",
        // 模型层关联，用data
        data:{
            text:"数据",
            num:123,
            bool:true
        },
    })
</script>

可知，这个小栗子实现的功能是创建几个数据，在view视图层表示出来。

其他