Vue
- 面向对象的思维:把一个整体中每一个部分都单独拿出来
- 随着前端项目的逻辑越来越复杂和难以维护,那么前端这边引进了后端的架构思想(MV*)
- M Model 数据层
- V View 视图层
- C Controller 控制器(业务逻辑) MVC
- P Presenter 提出者(controller改名得来) MVP
- VM ViewModel 视图模型(业务逻辑 VM 是由P改名得来)
- Vue 1.0 MVVVM 2014/07
- Vue 2.0 MVVM 2016/09
- js框架帮助开发者写js逻辑代码,在开发应用的时候js的功能划分为以下几点:
- 渲染数据
- 操作DOM
- 操作cookie等存储机制api
- 前断开发的难题:如何高效的操作dom、攒然数据是一个前端工程师需要考虑的问题,而且当数据量大,流向较乱的时候,如何正确使用数据,操作数据也是一个问题??
- 唯一的缺点就是需要使用一定的成本来学习
- js框架对上述的几个问题都有自己趋于完美的解决方案
- 开发成本降低。高性能高效率
- Vue.js框架项目介绍
- Vue.js是尤雨溪的个人项目
- Vue.js也是一个MVVM框架
- Vue.js它是一个单项数据流的框架
- Vue.js是一个js渐进式框架
- 学习Vue的必要性
Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世, 因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸 引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上 都隐隐超过了react,火的一塌糊涂 学习vue是现在前端开发者必须的一个技能
2016年:
- es6
- vue2.0
- angular2.0x
- 微信小程序 / 微信小游戏
一、MVC
MVC模式的意思是,软件可以分成三个部分
-
视图(View):用户界面
-
控制器(Controller):业务逻辑
-
模型(Model):数据保存
各部分之间的通信方式如下。
-
View传送指令到Controller
-
Controller完成业务逻辑后,要求Model改变状态
-
Model将新的数据发送到View,用户得到反馈
所有通信都是单向的
二、互动模式
接受用户指令时,MVC可以分成两种方式,一种是通过View接受指令,传递给Controller
另一种是直接通过controller接受指令
三、实例:Backbone
实际项目往往采用更灵活的方式
- 用户可以向View发送给指令(DOM事件),再由View直接要求Model改变状态。
- 用户也可以直接向Controller发送指令(改变URL触发hashChange事件),再由Controller发送给View
- Controller非常薄,只起到路由的作用,而View非常厚,业务逻辑都部署在View。所以,Backbone索性取消了 Controller,只保留一个Router(路由器)
四、MVP
MVP模式将Controller改名为Presenter,同时改变了通信方向。
- 各部分之间的通信,都是双向的。
- View与Model不发生联系,都用Presenter传递。
- View非常薄,不部署任何业务逻辑,称为“被动视图”(Passive View),即没有任何主动性,而Presenter非常厚,所有逻辑都部署在那里
五、MVVM
MVVM模式将Presenter改名为ViewModel,基本上与MVP模式完全一致
唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在ViewModel,反之亦然。
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> MVVM </title>
</head>
<body>
<div id="app">
<h3> VM改变 ——> V也跟着改变 </h3>
{{ msg }}
<h3> V改变 -> VM也跟着改变 </h3>
<input type="text" v-model = "msg">
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
1. 通过new Vue中el选项确定的实例范围,这个dom结构我们叫它 'Root组件/根组件/根实例'
2. Vue中双向数据绑定式通过 v-model 这个指令来实现的
3. 当我们将vm中的data改变时,会发现视图也跟着改变了,这个模式我们称之为: 数据驱动
数据驱动: 数据驱动视图改变
Vue官方将这种模式称之为: 深入响应式原理
*/
var vm = new Vue({
el: '#app',// document.querySelector('#app')
data: {
msg: 'hello Vue.js'
}
}) // 实例化Vue的到vm实例
</script>
</html>
Vue实现数据绑定的原理
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Vue第一个案例 </title>
</head>
<body>
<div id="app">
{{ msg }}
msg
</div>
msg
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
当我们第一次通过script标签对引入vue.js时,我们就会有一个全局变量 Vue
Vue它是一个构造器函数
Vue( options )
this._init( options ) //在初始化执行vue
参数: options 我们称之为‘ 选项 ’
类型: Object
options / el
我们称之为自动挂载: 将页面一个已经存在dom作为整个实例的作用范围,出了这个范围那么vm实例就没有作用了
body不能作为el的挂载目标
options / data 数据
new类型中 data选项是一个对象
使用形式: 在实例范围内,它相当于全局变量
我们要将这个变量放在一个模板语法中才能解析,这个语法叫做mustache语法,也叫 ‘双大括号语法’
使用范围: el确定的那个范围
Vue是一个MVVM框架
M: data选项
V:el挂载的东西
VM: vm实例
*/
// console.log( Vue )
// var vm = new Vue( options ) // 实例化Vue的到vm实例
var vm = new Vue({
el: '#app',// document.querySelector('#app')
data: {
msg: 'hello Vue.js'
}
}) // 实例化Vue的到vm实例
</script>
</html>
Vue深入响应式原理图
<button></button>
<div class="box"></div>
// 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
- 面试题/理解:如何理解深入响应式原理
- 核心:Object.defineProperty()
- Vue是通过数据劫持和事件的订阅发布来实现的,数据劫持指的是Vue通过Observer观察者对象对data选项中的数据进行getter和setter设置,事件的订阅发布指的是Vue通过事件来监听,通知Vue进行视图更新
- 监听:选项/watch