Vue框架入门（一）

后端框架 MVC模式
前端框架MVVM模式

前端三要素

HTML（结构）：超文本标记语言，决定网页的结构和内容
CSS（表现）：层叠样式表 设定网页的表现样式（语法不够强大，不能嵌套书写） 标记语言
JS（行为）：弱类型脚本语言，源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为

CSS预处理器
用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件，供项目使用
常用CSS预处理器： SASS：(基于Ruby,通过服务端处理-功能强大。较难)
LESS：（基于NodeJS,通过客户端处理，使用简单）

JS框架

jQuery: 简化了DOM操作，缺点是DOM操作太频繁，影响前端性能。前端眼里仅仅是为了兼容IE6，7，8
Angular 谷歌收购前端框架，Java程序员开发。后端MVC模式搬到了前端并增加了模块化开发的概念 后端开发友好
React: 虚拟DOM，用于减少真实DOM操作，在内存中模拟DOM操作 ，有效提升前端渲染效率
Vue : 一款渐进式JS框架，所谓渐进式就是逐步实现新特性的意思。如实现模块化开发，路由，状态，管理等特性。特点结合了Angular（模块化) 和React(虚拟DOM)的优点用到什么功能，就给你什么功能
Axios:前端通信框架----Vue只是为了处理DOM，不具备通信功能（额外使用一个通信框架与服务器交互）Jquery提供的AJAX通信功能也可以

UI框架

• Ant-Design 阿里巴巴出品，基于React 的UI框架
• ElementUI 饿了么出品，基于vue的UI框架------主流
• Bootstrap Twitter 推出的一个前端开发的开源工具包
• AmazeUI 又叫“妹子UI”，一款HTML5跨屏前端框架

JS构建工具

• Babel:JS 编译工具 浏览器不支持的ES特性
• WebPack 模块打包器，主要作用打包，压缩，合并，按序加载

分离前后端

• mvc模式-- springMVC框架

MV*

• MVC(同步通信为主)：Model View Controller
• MVP(异步通信为主): Model View Preenter
• MVVM(异步通信为主): Model View ViewModel

前后端在一起----Ajax通信-----Node.js 时代—（ 既可以前端，又可以后台）
前端MVVM模式
Model-View-ViewModel（核心层，负责转换Model 中的数据对象来让数据变得更容易管理和使用） 简化用户界面的事件驱动模式 ：
Model-数据模型（泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开—难点在于需要和前端 约定统一的 接口规则）
View 数据模型，视图层，也就是用户界面。前端主要是由HTML和CSS来构建
ViewModel： 前端开发人员组织生成和维护的视图数据层。前端开发者对从后端获取的Model数据进行转换处理。二次封装

• 该层向上与视图层进行双向数据绑定
• 向下与Model层通过借口请求进行数据交互
• **MVVM主要目的是分离视图和模型

**
MVVM的组成部分

Vue

是一套套用于构建用户界面的渐进式框架，Vue 设计自底向上逐层应用。只关注视图层，不仅易上手而且便于与第三方库或既有项目整合。
在MVVM架构中，是不允许 数据 和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者 (viewmodle观察到view有变化就通知modle)

• 观察到数据的变化，并对视图对应的内容进行更新
• 监听视图的变化，并能够通知数据的改变
  Vue.js就是一个MVVM的实现者，他的核心就是DOM监听DOM Listeners和数据绑定Data Bindings
  DOM----HTML操作的对象。

其他MVVM实现者

• AngularJS
• ReactJS
• 微信小程序

为什么要使用Vue.js

• 轻量级，体积小，30kb
• 移动优先，更适合移动端，比如移动的touch事件-------电脑鼠标移动-手机上手去点
• 易上手，学习曲线平稳
• 吸取了**Angual(模块化)**和 **React(虚拟DOM )**的长处，有自己的独特功能（计算属性）
• 开源，社区活跃程度高

Vue.js的两大数据驱动

- 数据驱动-
-Touch之后- Data发生变化–Watch会接受到数据的变化—传送给Component Render Function–再传给虚拟DOM（促发组件，重新渲染）

每个实力组件都有相应的watcher实例对象，他会在组件渲染过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watch重新进行计算
- 组件化

• 页面上的每个独立的可交互的区域视为一个组件
• 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就可以进行维护
• 页面不过是组件的容器，组建可以嵌套自由组合（复用）组成完整的页面
• 添加链接描述
• Vue官网介绍
• 直接将JS引入到html文件中
• 
  
  双向数据绑定

在控制台进行输入改变

Chrome谷歌浏览器–安装vue插件—上面会显示Vue

有这个源生工具就很方便，可以直接进行修改-测试

Vue生命周期

把整个el 编译成一个模板进行展示

mounted是在有页面之后，才能够执行的。
是做数据加载的

vue对钩子的理解

生命周期：vue页面生成的过程当中的不同阶段

生命周期钩子：就是可以让你在页面生成的不同阶段执行动作的api，作用就是只要页面到了这个阶段就会触发这个对应钩子里的js

1.beforeCreate — created
2.beforeMount — mounted
3.beforeUpdate — updated
4.beforeDestroy — destroyed
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 　　
编译好的HTML挂载到页面完成之后执行事件钩子，此钩子函数中一般会做一些ajax请求获取数据进行数据初始化，mounted在整个实例中只执行一次

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

条件渲染–

v-if指令用于条件性的渲染一块内容，这块内容只有在指令的表达式返回turthy值的时候被渲染、、、、、v-else 返回false的内容
v-else-if充当v-if 的else-if板块，可以连续使用


v-else-if充当v-if 的else-if板块，可以连续使用

=== 三个等于号，意思是类型和值都一样

列表渲染

（说白了就是for循环）
{ } ----- 花括号代表对象
我们可以用 v-for 指令基于一个数组来渲染一个列表。–>