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是一套
- 用于构建用户界面的渐进式框架。
- 自底向上,逐层应用。
- 核心库只关注视图层(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等将于之后补充。。。未完待续、。。、