Vue入门

Vue.js入门

1. 什么是框架？什么是库

• 框架是有一套自己的生态系统的
• 库是没有自己的生态系统的， 它就是一个工具

2. vue.js使用

• 使用script标签引入Vue.js
• 实例化 全局暴露的变量Vue构造器函数 得到一个实例
• 配置Vue构造器函数中的配置项(一个配置项一个功能)
  • el – 将id为app的一部分DOM结构当做模板传入配置项，然后挂载在页面中
  • data – 用来定义数据的
• 将数据展示在视图中，通过使用 双大括号语法 （ mustache 语法 ） 来展示数据
• 我们的模板(DOM结构)中可以使用 javascript语法，那么我们把这个类型称之为 ‘jsx语法糖’ jsx( javascript + xml )
• 当我们将数据修改后发现，视图就会更新，这种情况我们称之为’ 数据驱动（视图）’

3. Vue封装库

   • 匿名函数 + 严格模式
   1. 没有名字，那么无法再外部通过函数名使用或是操作这个函数，那么相对来说比较稳定，安全
   2. 严格模式使用，让这个匿名函数的语法更加的标准和严格
   • 格式
     ( function ( 形参1 ， 形参2 …) {})( 实参1， 实参2 …)
     第一个括号是用来定义匿名函数，第二个括号是用来运行这个匿名函数
   • 三行代码：
     第一行： 不导出object 也不导出 undefined
     第二行， 如果我们想模块化引用Vue,那么我们要通过amd将Vue函数定义为模块
     第三行， 如果我们想将Vue作为全局变量使用，那么我们将Vue挂在在window对象身上

4. 既然Vue是一个框架， 那么它使用了什么架构模式？

• 目前我们市面上基本上是以 MVC 这个架构思维 为主

• MV*的目的是把应用程序的数据、业务逻辑和界面这三块解耦，分离关注点，不仅利于团队协作和测试，更有利于维护和管理。

• Vue使用 MVC 的衍生的模式，这个模式叫做 MVVM

• React使用的是MVC框架

• Angular使用的MVVM的思想

• MVC
  MVC模式的意思是，软件可以分成三个部分。
  - 视图（View）：用户界面。
  - 控制器（Controller）：业务逻辑
  - 模型（Model）：数据保存

  View 传送指令到 Controller
  Controller 完成业务逻辑后，要求 Model 改变状态
  Model 将新的数据发送到 View，用户得到反馈
  
  MVC模式的业务逻辑主要集中在Controller，
  所有通信都是单向的。
  

• Backbone.js

• MVP
  MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。(相亲)
  - 各部分之间的通信，都是双向的。
  - View 与 Model 不发生联系，都通过 Presenter 传递。
  - View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），
  即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

• MVVM
  MVVM(Model-View-ViewModel) 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。（ViewModel和view关系更好）
  唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

• 名词解释：

  • M Model 表示数据
  • V View 表示视图
  • P/C/VM Presenter/Controller/ViewModel(视图模型) 表示就是逻辑

• Vue中 VM改变，那么 V也会改变 ， 反之也是一样的， 我们称之为 ‘双向数据绑定’

5. 数据驱动/ 双向数据绑定的原理 / 深入响应式的原理

   • 当我们将数据写在data选项时， Vue会通过observer将data对象中的所有的属性都设置上getter和setter
   • 当我们将数据绑定在视图时，自动触发getter，会将默认值，展示在视图
   • 当我们通过视图修改数据是， 会自动触发setter,将数据修改，同时视图也会发生更新

   这个是使用了es5中的一个特性，这个特性叫做 Object.definedPropty( obj, 对象的属性， 配置项)
   Object.definedPropty
   配置项：
   1. 属性是否可写
   2. 属性是否可以遍历
   3. 存储器
   get 函数 和 set 函数 也称之为 getter && setter
   数据 驱动只和存储器有关系

   //<input type="text">
   //<div class="box"></div>
       var input=document.querySelector('input');
       var box=document.querySelector('.box');
       var obj={
           // a:' who are you?'
       }
       Object.defineProperty(obj,'a',{
           get(){
               return 'I am a student';
           },
           set(v){
               box.innerHTML=v;
               console.log(obj)
           }
       })
      
       input.onchange=function(){
           obj.a=input.value;
       }
       box.innerHTML=obj.a;