前端VUE语言教学课件思维导图

1、减轻后端压力，用于解决前后端分离，提升性能，减少DOM操作；

2、组件化：封装提取代码，方便代码统一维护，便于多人协作开发等等，HTML可以导出导入

3、数据统一管理

很火的一个js库和框架，渐进式Javascript 框架 生态非常大 根据需求选用

引入vue库、创建vm对象，也就是vue实例就可以。有一个实参对象类型里面键就是固定的el、data、methods

因为后期所有的数据都会保存到模型中 所以得学会把模型在视图显示

{{data中的键}} 或 v-text=”data中的键 ”

v-bind：属性名=”data中的键” 简写直接把v-bind换成冒号

v-html=" data中的键 ”

v-for=”( item , i ) in data中的键”

v-if v-else-if v-else v-show

v-on:事件类型=”处理函数” 简写 把v-on换成@

@事件类型.stop/prevent=”处理函数” （.capture==> 谁加谁优先）

@keyup @ketup.enter/space/right/delet..

@事件类型.enter.ctrl/shift/alt=”处理函数”

1.MVC 是软件开发中常见的开发模式，主要应用于后端，将程序划分为M模型、V视图、C控制器从而便于团队协作开发，减少代码冗余。

2. MVVM 是Model-View-ViewModel缩写，也就是将MVC中的Controller演变成ViewModel。 a、 Model层代表数据模型、 b、View层代表UI组件、 c、ViewModel是Model、View层的桥梁，数据会绑定到ViewModel并自动将数据渲染到页面，视图变化会通知 ViewModel层更新数据。

相同点：都是软件开发常见的开发模式或者开发思想

不同点： ​ 1- MVC后端居多，MVVM前端 ​ 2- MVC单向通信 目的将M和V代码分离，MVVM则是双向通信，不需要手动操作DOM

以后写项目遇到表单必定是先用v-model保存到模型中，然后事件触发等情况再去取。

使用v-model步骤 1. 先写html标签 2. 给html标签增加v-model语法（仅支持input、textarea、select标签 3. 在data模型中定义即可

减少DOM操作，通过修改模型数据自动同步到视图来实现特效

就是class、style两个标签属性 使用模型数据

:class=”字符串/数组/对象” :class=”[‘类名’，data中的键？’类名’：’ ’ ]” :class=”{类名：data中的键 布尔，类名：data中的键===数据}” :style=”数组/对象” :style=”{css属性名：css属性值，css属性名：data中的键，css属性名：data中的键+‘px' }”

tab选项卡、切换主题色、后台菜单等需要动态切换class、或者style的场景

1、减少视图DOM操作 set 2、缓存 提升性能 get 3、减少代码冗余，在视图写过多的逻辑不利于后期维护

vue新技术，主要可以封装代码并且缓存； （就是用来封装代码，提升性能的 有缓存）

computed:{ 随意Cptd() {//后期调用直接函数名即可 ，有缓存} 或 随意Cptd： { get() {}, set(newData){}, } }

1.减少视图操作 一个数据依赖另一个数据计算的结果 Set 2.性能 复杂数据或者比较耗费性能的都可以用 get 3.项目中大量配置vuex使用

1.减少DOM操作 2.避免v-model 和事件一起写时优先级问题

vue新技术，主要监控模型数据变化； （就是用来监控模型数据变化的）

watch:{ data中的键(新数据，旧数据) { } 或 data中的键: { handler(newData,oldData){ } //就是上一层 deep：true 深度监听 immediate：true 首次调用 }

搜索、全选不全选、监控弹框显示二维码、模糊筛选、关键词筛选等需要监控模型数据变化的场景

较为语义化，减少视图操作。

过滤数据的技术

Vue.filter(过滤器名称, (待过滤的数据) => { return 待过滤的数据; })

性别、分类级别、商品分类、日期等过滤

将DOM代码封装起来，快速实现功能

就是官方提供了API，来自定义指令

Vue.directive(自定义指令名称, { inserted(el,自定义形参) {}, })

按钮鉴权、复制到剪切板、弹框拖拽、全屏

减少DOM查找产生的性能开销

Vue中操作DOM的技术

定义：<标签名 ref="标识"></标签名> 获取：this.$refs.标识

echarts 、editor编辑器、二维码、短信倒计时（可用可不用）等等

封装Vue代码，提高代码复用性，减少冗余

封装 Vue中冗余的代码

Vue.mixin({ data(){ return{} },methods:{}... })

删除确认框，跳转网站等等

HTML升级后的思想，增加到导出导入

通过独立的、或可复用的组件来构建网站，从而提高代码复用性，便于后期维护