前端框架之Vue介绍

库 vs 框架

1. 库只是一个工具，供我们使用
2. 框架是具有思维的，有它自己生态系统

前端框架发展历史

前端这个岗位是从后端慢慢分出来

1. jq -> 2010前
2. MVC思想 -> 软件架构

• 将一个软件分为了三个部分，每一个部分负责一部分功能
• M -> Model -> 模型 -> 软件中的数据
• V -> View -> 视图 -> 软件中的界面
• C -> Controller -> 控制器 -> 软件的大脑，用于处理逻辑

3. 为什么前端要从后端引入MVC这个思想？

   • jq开发、原生js开发时，我们发现所有业务逻辑和数据处理全部都压在了V上
   • MVC引入帮我们解决了这个问题
   • MVC引入带来模块化问题
     • AMD
       • require.js
         • 定义模块：define
         • 引入模块： require
         • 先引入模块，在去执行
     • CMD
       • sea.js 不更新
         • 定义模块： define
         • 引入模块： require
         • 执行结束之后才引入模块

4. MVC衍生架构

   • 前端业务增加，要求变高了
   • backbone.js MVP 2010年
   • angular.js MVC 2010年
   • React 仅仅可以认为是MVC中的V
     • 2011年开始创作
     • 2012应用于 ins
     • 2013年开源
   • Vue MVVM
     • Vue1.0 2014年
     • Vue2.0 2016年
     • Vue3.0 2019年
   • angular2.0 MVVM 2016年

框架的出现到底解决的是前端的什么问题？

1. 如何高效的将服务器数据渲染到前端界面
2. 如果高效的将用户输入的数据渲染到前端界面

Vue初始

Vue特点

1.Vue是一个MVVM框架

• M 模型 model 数据
• V 视图 view
• VM C -> P -> VM 视图模型 -> 处理逻辑

2. 单向数据流

   • 数据由父级传递给子级

3. Vue是一个js渐进式框架

   • 渐进式： 越学越难
   • 想学的容易：加强基础

4. Vue是使用了虚拟DOM技术

5. Vue拥有便利性的指令

   • 指令： 操作dom的一种方式

6. Vue拥有组件系统

   • 组件： 组件是一个html、css、js的一个聚合体

Vue - Hello World案例

1. 当我们以script标签引入Vue.js时，我们会得到一个全局变量Vue,它是一个构造函数
2. 这个构造函数需要实例化才能起作用
3. 我们需要一个已有dom作为vue实例作用范围
4. 我们说刚才的这个已有dom的内容为假，这个假指的是它是虚拟DOM,这个是从选项中分离出去的，所以我们才能使用this,但是这个在v中看起来很别扭，所以可以省略this
5. data选项中的数据，在app范围内相当于全局变量
6. 要想在dom结构中书写js，那么我们的需要一个插值表达式，也就是{{}}

查看vue.js

看的是已经经过处理后生成的代码
Vue通过原型继承方式来实现vue功能，Vue的实例通过原型访问定义的属性

1. 匿名函数好处
   • 大部分封装库都是这个函数
   • 自动执行
   • 解决了命名冲突
   • 独立作用域
   • 函数内变量使用结束之后会被GC【 垃圾回收机制 】消除
   • 符合函数式编程思维
2. vue使用有两种
   • vue可以模块化使用，可以使用npm安装，因为它使用了amd的define来定义模块
   • vue可以以标签化引入