Vue快速上手学习笔记

参考b站 遇见狂神说 的视频

1. 回顾 SSM 阶段

MyBatis

重点：
1.导入MySQL的 jar 包，调整一下配置文件。
2.第一个Mybatis程序
3.ResultMap结果集映射

Spring

重点：
1.DI
2.代理模式
3.JavaConfig（半重点）
4.整合Mybatis（重点）

Spring MVC

重点：
1.执行流程
2.RestFul
3.整合SSM项目

（后三个是，为了前后端分离做准备的知识）
前端化工程

总结

视图：可视化布局

全栈工程师。。。。。

2. 前端核心分析

Vue是一套

1. 用于构建用户界面的渐进式框架。
2. 自底向上，逐层应用。
3. 核心库只关注视图层（Html+CSS+JS，给用户看，刷新后台给的数据），方便与第三方库 or 既有项目整合（vue-router、vuex、vue-resource）。

Vue 不管网络通信（axios管），页面跳转（vue-router），状态管理（vuex），Vue-UI（ICE，飞冰）。这些都是其他的组件。

SOC原则：关注点分离

前端三大件

CSS，less

增加一些编程的特性，less 编译后 --> css

JavaScript

增加一些编程的特性，TypeScript 编译后 --> JavaScript

js框架

angular - 模块化开发
react - 虚拟 Dom

vue - MVVM + Dom

ui框架、js构建工具

后端技术

mvc

优点
缺点

前端发展史

ajax - 单页面应用时代

优点

缺点

大前端时代

mv* 时代
优点 - 缺点

nodejs - 全栈时代

后端

基于 nodejs 的全栈模式，仍然面对的挑战
TCP/IP

总结

3. 第一个 Vue 程序

idea -可以使用插件（可以写vue的原因）
view层 - 模板（ {{模板}} ）
Model - 数据

什么是 MVVM

事件驱动编程方式，ViewModel 层负责转换 Model 中的数据对象，让数据变得更容易管理和使用。

Model - （以前）数据从后台来，（现在）可以用 Vue 模拟一个出来
View - html、jsp
Controller - 写个控制层去操作

ViewModel 是什么：就是负责把 Model 的数据同步到 View 显示出来，还负责把 View 的修改同步回 Model。（不需要刷新，不改变dom对象，只是把值换了，这个值是从ViewModel里取出来的）

数据（ViewModel）改了不影响css标签的显示（view），数据改变（ViewModel）也不影响 （model ）原本的数据。

操作dom，页面响应会非常慢

为什么要用 MVVM

templates 就是 {{模板}}
vue 的组件

MVVM 的组成

ViewModel

为什么要用 vue（Dom监听 + 数据绑定）

4. Vue 的基本语法

常用属性

1. v-bind 绑定元素特性

绑定元素特性
指令

例子

2.v-if，v-else 判断

例子

3. v-for 循环

3个=号 是值相同且类型相同，2个=号，是值相同，类型可以不相同

例子

4. v-on 绑定事件

methods

jQuery

例子

5. v-model 双向数据绑定

什么是？

在表单中使用

例子 data 绑 v-model

在 input 标签中用上，绑定了 input 的值

在 表单上绑定 value 的值

下拉框 绑定

IOS用户要写
为空 + disabled

在 vue 的 data 中声明初始值

5. Vue 组件讲解

可以复用的模板

拼装组合组件

例子

1
2
props 拿到 bind 绑定的参数

组件解释

定义的意义

6. Axios 异步通信

jQuery.ajax() 可以做，但是em

网络通信（难点）

什么是 Axios

为什么要使用 Axios

Vue.js 是 视图层框架

第一个 Axios 应用程序

引入 js 文件，

Vue 生命周期

流程图

先加载模板，再渲染数据
（钩子函数理解为Aop切面编程，像汉堡一样，直接在一个函数执行过程中插入并执行）

mounted 钩子函数

基于ES6的新特性
axios.get()

网页中（xhr 是异步的）

例子

本地伪造的 json 数据
拿到了数据

解决模板露出

7. computed 计算属性

重点：属性

页面调用方法

什么是计算属性

方法名最好不要重名

methods 和 computed 的区别

computed 中定义的是属性，不是方法
节约系统开销

8. 插槽 slot

v-bind 和 v-on 缩写

例子

9. 自定义事件内容分发

怎样在组件中，删除Vue实例中 data 里的数据呢？

例子

10. 入门总结

常用属性
组件化

说明

vue-cli、webpack、vue-router、elementUI等将于之后补充。。。未完待续、。。、