vue简介
Vue.js 是什么 :
1. Vue 是一套用于构建用户界面的渐进式框架
------------------------------------------------------------------------------------------
Vue.js 作用 :
1. Vue 核心库 只关注视图层 , 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
2. Vue 将界面拆分成一个个组件, 通过组件来构建界面 , 用自动化 工具来生成单页面
前端主要工作 :
主要负责于 MVC 的 V 这一层 ; 主要和 界面 打交道
为什么要学习框架 :
企业中使用框架可以 提高效率
以前的开发模式 :
原生JS -> Jquery 之类的库 -> 前端模板引擎 -> Vue,js 之类的框架
( 能够帮我们健身不必要的DOM操作,提高渲染效率,双向数据绑定的概念,我们前端程序员只需要关系数据的业务逻辑,不在关心DOM是如何渲染的 )
框架和库 区别 :
框架 : 是一套完整的解决方案 , 对项目侵入性 比较大 , 项目如果需要 更换框架 , 则需要 重新架构 整个 项目
库( 插件 ) : 提高一个小功能 , 对项目侵入性比较小 , 如果某个库 无法完成 某些需求, 可以很容易 切换 到 其他的 库实现 需求
补充 : Node 中的 MVC 与 前端 中的 MVVM 之间的区别
MVC 是后端的分成开发的概念 :
Model( 模块 )层 : 处理数据的CRUD( 增(Create)、查(Retrieve)、改(Update)、删(Delete) )
View( 前端视图 )层 : 前端页面
Controller( 控制 )层 : 业务逻辑层 ( 路由也是这个层里面有部分 )
MVVM 前端视图层( view )概念 : 主要关注于 视图层分离
MVVM 把前端的视图层，分为了 三部分 Model, View , VM( 调度者 )ViewModel
补充 : 单向绑定 双向绑定
单向绑定非常简单，就是把Model绑定到View，当我们用 JS代码 更新Model( 数据 )时，View就会自动更新。
Model VM View
有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
Vue 双向绑定的原理 :
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty( ) 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的
延伸 :
在javaScript中，对象的属性分为两种类型：数据属性和访问器属性。
1.数据属性:默认 （可以动态控制属性的增删改查权限）
var person = {
name:'张三',
age:18,
hobby:'足疗爱好者'
}
//1.删除权限
Object.defineProperty(person,'name',{
configurable:false,//不可删除的
} )
delete person.name;//无效
//2.遍历权限
Object.defineProperty ( person,'hobby', {
enumerable:false //不可被枚举
} )
for( var key in person ){
console.log( person[ key ] ) // hobby不可被枚举
}
3.查询权限
Object.defineProperty( person,'age',{
value:88 // 访问到的的数据值
} )
console.log( person.age ) // age 的数据值 固定为 88
//4.读写权限
Object.defineProperty( person,'name',{
writable:false //不可被枚举
} )
person.name = '李四'; // 无效
Object.defineProperty( )
第一个参数：对象
第二个参数：属性
第三个参数：权限 默认都是true
configurable?: boolean 可删除的
enumerable?: boolean 可遍历的
value?: any 访问的数据 查询
writable?: boolean 可修改的
2.访问器属性：
( 监听对象属性的状态，可以拦截对象的行为
( 赋值与取值 ) ,MVVM,双向绑定，设计模式)
set : 赋值的时候会执行这个方法
get ：取值的时候会执行这个方法
------------------------------------------------------------
1. 数据属性和访问器属性不能混用，只能同时设置某一种
2. 在get与set内部使用 this.属性 会导致死循环
3. 需要绑定的 属性 对象中对应的属性 前面加 '_' 下划线
var student = {
_name : '张三',
age : 20,
hobby : '段子手'
}
-----------------------------------------------------------------------------------
1. 需要绑定的 属性 对象中对应的属性 前面加 '_' 下划线
2. 下面的 参数二 所写的 属性不加 '_' , 此属性 与 对象中 '_'属性 建立桥梁对应
3. 有人 修改了 第二个参数 所绑定的属性, 触发 set 方法, value 为 修改的值
-----------------------------------------------------------------------------------
Object.defineProperty( student , 'name' , {
set : function( value ){
console.log( '有人居然想要改我的name属性' )
this._name = value;
},
get : function(){
return this._name;
}
} )
对应到 Vue
1. 通过 v-bind 绑定属性 到 Object.defineProperty 第二个参数
2. new Vue 一个实例对象 , 里面有 { } 对象, data 存放数据,
3. 操作数据, data 里面数据 发生了改变, 就进入到了 set 方法中, html 元素 对应的 绑定属性值 也改变
var box = document.getElementById('box')
var vm = {
_backgroundColor : 'green'
}
Object.defineProperty( vm, 'backgroundColor',{
set : function ( value ) {
box.style.backgroundColor = value
this._backgroundColor = value
},
get : function ( ) {
return this._backgroundColor
}
})
........... ( 后面操作数据改变就 动态修改 )
