1、Vue官网
2、后端架构思想
M Model 数据层
V View 视图层
VM ViewModel 视图模型( 业务逻辑 VM 是 由 P 改名得来的)
P Presenter 提出者( Controller 改名得来的 )
C Controller 控制器 (业务逻辑 )
3、前端的重要年份
2016年
- es6
- vue2.0
- angular2.0x
- 微信小程序/小游戏
4、Vue的一些特点
- vue.js是一个渐进式框架
- 也是一种MVVM框架,
- 也是一种单向数据流框架
5、第一个Vue案例
- 当第一次通过script标签对引vue.js时,就会产生一个全局的vue,vue是一个构造器函数
- 语法:Vue(options)
-
this._init(options)//在初始化执行vue
参数options:“选项”,是一个对象 -
options/el:称之为自动挂载,即将页面一个已存在的dom作为整个实例的作用范围,出了整个范围vue的实例就没有作用了。(注意:body不能作为el的挂载目标)
-
options/data:new类型中data选项是一个对象
- 使用形式:在实例范围内相当于全局变量,我们要将这个变量放在一个模板 语法中才能解析,这个语法叫mustache,也叫双大括号{{ }}
- 适用范围:el确定的范围
-
M:data选项
V:el挂载的实例
6、根组件
- 通过new Vue中el选项确定的实例范围,这个dom结构称之为“Root组件/根组件”
7、Vue中双向数据绑定通过v-model指令实现
8、数据驱动
- 改变vm中的data,视图也跟着改变,这种模式称之为数据驱动
- 数据驱动视图改变
- Vue官方称这种模式为:深入响应式原理
9、如何理解深入式响应式原理?
- vue是通过数据劫持和事件的订阅发布来实现的,数据劫持指的是vue通过observer观察者对象对data选项中的数据进行setter和getter设置( Object.defineProperty ),事件的订阅发布指的是vue通过事件来监听,通知vue进行视图更新
- 监听:options/watch
10、底层原理
// Vue 底层原理
// 目的: 使用原生js来实现Vue深入响应式
var box = document.querySelector('.box')
var button = document.querySelector('button')
var data = {
name: 'Jick'
}
// 观察者对象
var observer = {...data}
// es5提供的api方法,这个方法不兼容ie8以及以下
// Object.defineProperty(对象,对象的属性,对象属性的修饰符 )
Object.defineProperty( data,'name',{
// get/set 统称为: '存储器'
get () {
return observer.name // 初始化赋值一个值给name属性
},
set ( val ) {
console.log( val )
box.innerHTML = val
}
})
button.onclick = function () {
data.name = "Rose"
}
box.innerHTML = data.name