谈前端框架

VUE

概念：

• vue是构建用户界面的一套渐进式框架
• 渐进式：声明式渲染—组件系统—前端路由—状态管理—前端构建
• 特点：易用，灵活，高效

内容用法

声明式渲染

语法

• 模板语法
  1. 就是在模板里写的特殊语法，模板指的是html结构，特殊语法就是差值表达式和指令
  2. 差值表达式就是将内容写在{{ }}里面
  3. 指令包括属性/事件的绑定以及条件和循环的语法
• 指令
  1. 本质上是自定义属性，以v-开头，通过指令可以操作结构
  2. 一般指令，及可以解决的问题
     1⃣️v-cloak 解决闪动问题
     2⃣️v-text 用于数据填充
     3⃣️v-html 用于数据填充，并且可以解析html构建
     4⃣️v-pre 跳过编译阶段，不会进行数据替换
     5⃣️v-model 进行双向数据绑定
     6⃣️v-bind(可简写为:) 可以进行任意属性绑定
     7⃣️v-on(可简写为@) 注册事件/事件绑定
• 样式绑定
  1. 原始绑定方式
     绑定class属性后，给属性名，即（：class=“属性名”）
  2. 对象的形式
     绑定class属性后，以对象的形式展示，即（：class=“{类名：data中定义的数据（true/false）}”）
  3. 数组的形式
     绑定class属性后，以数组的形式展示，即（：class=“【data中定义的数据】”）
• 条件渲染
  1. 通过条件判断渲染到页面上，相当于if else，不过在vue中使用的是v-if指令，用的是自己的语法
  2. v-if和v-show都可以控制元素的显示隐藏
  3. v-if是通过操作dom元素的创建和销毁控制的；v-show是通过控制元素的display样式是否为none控制的
  4. 如果需要频繁操作元素显示隐藏的话就用v-show，节省性能
• 列表循环
  1. 和条件渲染一样，在vue中使用的是v-for指令
  2. 语法：v-for=“（item，index）in obj”
  3. 使用v-for语法，必须加上：key，可以提高列表循环渲染的性能
  4. 由于v-for的优先级比v-if高，所以两者尽量不要在一起使用，会造成性能浪费

数据属性

• 双向数据绑定

  1. 双向数据绑定也就是数据发生数据，页面也会发生相应的变化，页面变化，数据也会进行相应的更新
  2. 在vue中通过v-model实现双向数据绑定
  3. 主要原理是利用了object.defined.property 中的set和get函数实现的，利用set函数给属性复制时触发的原理，通过数据劫持实现属性值的更改，利用get函数获取属性时触发的原理，通过观察模式给页面上所有的属性值进行更改

• 自定义指令

  1. 自定义全局指令
     vue.directive(‘指令名称’，配置对象)
  2. 自定义局部指令
     在vue实例中，与data平级添加 directives 属性，directives: {指令名称，配置对象}
  3. 配置对象中有 bind 和 inserted 属性
     bind：表示dom元素已经被创建了，但是还没有被插入到页面上
     inserted：表示dom元素已经在页面上显示了
  4. 用法：和内置的指令一样，直接在dom节点上使用就可以了，v-指令名称

• 计算属性

• 侦听器

  1. 作用：监听某个数据的变化，即只要监听的数据发生变化就能被监听到，通常用于异步与发送请求
  2. 用法：在vue实例中，与data属性评级啊，添加一个watch属性，
     watch: {监听数据的名称：函数(新值，旧值)}

• 过滤器

  1. 作用：对展示出来的数据进行格式化处理，如时间格式化
  2. 用法：filter
     全局过滤器：vue.filter{过滤名，函数}
     局部过滤器：在vue实例中，filters：{过滤名，函数}

组件系统

• 组件的注册及使用
• 组件传值
• 插槽

前端路由

• 路由基本使用步骤
• 路由规则的一些配置
• 路由的重定向
• 嵌套路由
• 动态路由参数及匹配

状态管理
概念

• vuex，状态管理模式，帮助vue进行组件传值
• 定义了全局的data数据，方便组件间的数据共享（不需要再进行组件间的传值）

核心属性

• state
• mutations
• actions
• getters

前端构建
构建的意义
用的的工具

• webpack

1. 概念
   #是一个流行的项目构建工具（打包工具）
   #提供了友好的模块化支持，处理js代码压缩混淆及js兼容性问题
2. 作用
   #对代码进行打包，对高级js语法进行降级，让浏览器可以直接运行
3. 基本使用
   #配置打包入口与出口
   #loader加载器（webpack默认只能打包js文件，如果需要打包其他类型的文件，就需要对应的loader）

• vue脚手架
• 单文件组件

1. template 写html模板的地方
2. script 写所有数据定义及逻辑
3. style 写组件样式

React