# my2110 **Repository Path**: be-silent/my2110 ## Basic Information - **Project Name**: my2110 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-11-01 - **Last Updated**: 2022-01-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 三阶段 (9周) # 第一周 Vue 基础 11.5 # 第二周 Vue 进阶 11.12 # 第三周 Vue 项目 11.19 # 第四周 Node+Vue项目 11.26 (留级) # 第五周 React基础 12.4 # 第六周 React进阶 12.11 # 第七周 React项目 12.18 # 第八周 小程序项目 12.25 # 第九周 面试就业周 12.31 (找工作 一共4周) # 毕业 时间 (1.1) # 过年 (2.1) 面试截止时间 年前一周 # 拿高薪 offer (100分 满分) # 1. 学历毕业年限 20分 (本科计算机 20 15 10 5 0) # 2. 社交 (牛逼 VS 恐惧 20 10 0 沟通 语言组织 情商 说话技巧) # 3. 面试题 (20分 40-0 原生 Vue React 小程序 ES6 ) # 4. 技术 (40分 Vue项目10 Vue+Node项目10 React项目10 小程序项目20 ) # 1. 作息时间 早上 8:20 - 8:50 (大声多面试题) 第一节课 9:00 - 10:30 第二节课 10:40 - 12:10 下午 第三节课 1:50 - 3:50 第四节课 4:10 - 6:10 晚自习 7:00 - 10:00 (9:30) 不要迟到 8:20 (非常重要) 早退 (星期六下午) 课堂纪律 不准睡觉 不准看视频 不准吃东西 不准随意外出 (除非迫不得已) 不准玩手机 不准打游戏 # linux 指令 (电脑的操作指令) 查看版本 node -v node --version window+r cmd 控制台 D: 直接切换到硬盘 D cd /d ls 显示当前文件夹得所有的文件目录 tab 自动补全 cd 切换到对应的文件目录 cd .. 切换到上一级文件 touch 创建文件 echo test> mkdir 创建文件夹 pwd 显示文件目录路径 rm -rf 不询问强制删除文件 rimraf ctrl+c 强制退出 当前命令 上下箭头 读取之前的命令 mv a b 把 a 文件移动到 文件 b 里面去 vim vi ESC :wq! : 在线文本编辑 :"q!" :"wq!" # cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -v # 安装全局插件 cnpm i rimraf -g cnpm i @vue/cli -g # GIT # romte 远程主机仓库 # repostiory 本地仓库 # index 暂存区 # workspace 本地工作区 # git add ./ 添加代码到暂存区 # git commit -m "注释写清楚你的代码意义" 提交代码到本地仓库 # git push 推送代码到远程主机 # GIT pull 拉取代码到本地工作区 # git checkout "dev" 切换分支 # git fecth 拉取 拾取代码到本地仓库 # git status 查看文件状态 # git remote add origin https://gitee.com/zuozhaoxi/wh2110.git 把2个仓库链接一起 # git push origin master:master # git branch 查看分支 # git branch dev 创建分支 dev # git merge dev master 合并分支 # dev:dev # master : master # git pull origin dev:master (远程dev分支拉取到本地的master) # git push origin dev:master (dev=> 本地的dev分支 master=>远程的master分支 ) # git log 查看提交日志 git config --global user.name "xxxxName" git config --global user.email "xxxxx" # 公司的仓库操作 1. 克隆 (用户名和密码 私有仓库地址 ) git clone https://gitee.com/zuozhaoxi/wh2110.git 2. 拉取远程主机仓库的代码到本地仓库 (多人协作开发 ) git pull origin master 3. 添加到暂存区 git add ./ 4. 添加到本地仓库 git commit -m "ds" 5. 推送到远程主机仓库 git push origin master # vue https://cn.vuejs.org/v2/guide/ # 1.0 API文档 (别人 封装好的Vue.js 代码 教你怎么使用 ) 接口文档 测试文档 需求文档 开发文档 开发环境 针对于 开发者 development 测试环境 生产环境 针对于 客户 production Freamwork Vue = React + Angular Vue===> view(发音) 侧重视图层 Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 vm 得到的实例化对象 el 属性 document.querySelector(el); 说明Vue的作用范围 会将app 里面所有的 DOM 渲染 成 虚拟DOM(?) 存储在 内存中 data Vue 需要初始化的数据 最常见的属性 {{ }} 最普遍的模板标记标签 双大括号语法 插值表达式 核心功能 允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 声明式 直接在 html 书写 a 编程式 直接在 javascript 书写 location.href 响应式 reaction 数据被修改之后 页面里面随之跟着里面更新 (vue提供自动响应式系统) 强大的指令功能 v- 代替你进行DOM 操作 Attribute v-bind 绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title 绑定动态的属性 静态属性 永远不改变 不是变量 动态属性 接收是变量 (v-bind) 70% v-if/v-show 条件渲染 控制显示隐藏 90% v-on 绑定事件 v-on:click v-on:change v-on:keydown 100% v-for 循环 循环对象 或数组 90% v-model 只能绑定在输入框 实现数据双向绑定 (view 视图 + model 数据模型) 90% 当你修改 页面的时候 v-model 自动去更新数据层 当你修改 数据的时候 v-model 自动去更新视图层 v-text textContent 只接受文本 v-html innerHTML 文本和html标签 v-once read-only methods vue 属性 接收方法 组件化 组件系统是 Vue 的另一个重要概念 允许我们使用小型、独立和通常可复用的组件构建大型应用 封装 类似 Vue 实现数据的双向绑定 双大括号语法 # 2.0 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 设计模式 (工厂模式 单例模式 混合模式 观察者模式 发布订阅模式 ) 数据开发模式模型 MVVM M model 数据模型 V view 视图界面 VM viewmodel 视图和数据混淆在一起(数据视图系统) MVC M model 数据模型 V view 视图界面 C controller 控制器 (JS逻辑 方法和事件) MVP M model 数据模型 V view 视图界面 P Prestener 复杂逻辑 选项对象 {} 选项对象属性 (data el methods name watch computed filter component directive 10个生命周期钩子函数) vm 实例对象 vm Vue.prototype vm.__proto__ 实例属性 vm.$data vm.$el 实例方法 / 数据 vm.$4 vm.$set 实例方法 / 事件 vm.$emit vm.$on 实例方法 / 生命周期 vm.$nextTick vm.$mount() vm.$forceUpdate (强制刷新页面) el vue挂载元素 $mount("#app") data 对象 响应式系统 (只要检测到数据更新,就一定会去修改视图 ) 组件系统 1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中 2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式) vm 实例化后赋值 没有意义 没有被响应式视图系统监听 所有需要用到的数据都必须在data 里面初始化 否则没有响应式监听 借鉴 MVVM VM 实例对象 实例属性 vm.$el vm.$data 实例方法 vm.$watch 监听数据改变 vm.$set 修改对象和数据刷新视图 vm.$delete 删除对象和数组 刷新视图 ref 用来记录真实DOM this.$refs a. ref 用于标签 表示这个真实DOM 对象 b. ref 用于组件 表示这个组件对象 初始化操作 window.onLoad = function(){} document.ready = function(){} $(function(){ }) 实例生命周期钩子 每个 Vue 实例在被创建时都要经过一系列的过程 (实例创建 实例载入 实例更新 实例销毁 ) 这些过程称为 实例生命周期 Vue 会在这个每个周期设置对应的函数去监听 这些函数就叫 生命周期钩子函数 Vue 内置一些生命周期钩子函数(function ) 给了开发者在不同阶段添加自己的代码的机会 实例创建 beforeCreate created 1 实例初始化创建 实例载入 beforeMount mounted 1 初始化载入 实例更新 beforeUpdate updated n 实例 里面 data 数据改变 实例销毁 beforeDestroy destroyed 1 实例被移除 activated 激活 deactivated 失活 errorCaptured 错误捕获 真实DOM ref Vue 创建实例之前 DOM树 先读取根元素 解析 所有的dom数据标签 然后以 树形结构 把dom数据存储在内存 (模板存储DOM) 在内存中 描述 dom节点 的 数据信息 叫做 虚拟DOM 抽象定义 虚拟DOM Virtual DOM (性能优化) 优势 提升性能 提高加载速度 缺点 多了一次 虚拟DOM 初始化的计算 (尽量第一次不要加载过多的数据 ) 数据更新 patch diff算法 比较不同 如果每次data 改变 也就是数据更新 Vue (核心DIfferent 算法) 监测到数据改变 自动生成 新的虚拟DOM 会去和 旧的虚拟DOM 进行对比 得到变更的部分 patch 然后会把这 patch 放到一个队列 最终批量更新 渲染成真实DOM # 3.0 动态的class 和 style 切换 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强 除了字符串之外，还可以是对象或数组 v-bind v-bind:class :class = " " {} [] v-bind:style :style = {} [{}] :style="{display:current==i?'block':'none'} # 2.3 v-if 条件渲染 指令的表达式返回为真 才会真正的渲染 表达式的值 为 false 则什么都不做 不会渲染DOM template 包裹的空元素 没有任何效果 v-else 必须 与它最近的 v-if 匹配 v-show 指令通过 display 来控制显示和隐藏 带有 v-show的元素 会始终渲染到DOM 只是简单的样式切换 v-if vs v-show v-if 是“真正”的条件渲染 v-if 也是惰性的 如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 v-show 不管条件为真为假 都会去渲染DOM 简单地基于 CSS 进行切换 使用场景 (使用频率) v-if 有更高的切换开销 在切换条件很少改变的情况下 推荐使用 v-if v-if 现实初始化内部的数据变量 v-show 有更高的初始渲染开销 需要频繁的切换的情况下 推荐使用 v-show v-if 与 v-for 一起使用 (不推荐) 如果一定要用 v-for 比 v-if 有更高的优先级 v-if 写在 v-for(循环) 的外面 异步数据 错误 Cannot read property 'xxxxxx' of null" 变量的属性为 null TypeError: Cannot read property 'username' of null # 2.4 v-for v-for 列表渲染 指令可以渲染数组和对象 v-for="(item,index) in items" v-bind:key="index" v-for="(value,key,index) in object" 遍历对象 虚拟DOM 性能优化 key 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素 你需要为每项提供一个唯一 key 属性 Vue 识别节点的一个通用机制 一个组件添加 key key值更改 组件强制刷新 深浅拷贝 ... 展开运算 JOSN.parse 递归 深浅复制 object.assign 深浅监听 数据类型 基本数据类型 String Number Boolean null undefined (不可变对象 深拷贝 ) 引用数据类型 对象 数组 (可变对象 浅拷贝) 不可变对象 基本数据类型 immutable 修改不可变对象 响应式系统一定检测到数据更新 可变对象 引用数据类型 mutable 修改可变对象 可能 响应式系统无法检测到数据更新 Vue 响应式视图 可以检测 不可变对象的数据修改 可变对象 有的时候监测不到 (响应式视图系统会监测可变对象第一层的数据改变) 修改 基本数据类型 会触发视图更新 修改 引用数据类型 可能触发视图更新 数组方法 push pop shift unshift splice 增删改 sort reverse map 映射 return reduce forEach filter find 查找某一个 some 有一个满足就行 every 所有的都必须满足 concat 拼接 slice 截取 Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新 变异数组方法 这些方法直接修改原来的数组 push pop shift unshift splice sort reverse 非变异数组方法 这些方法不能改变原始数组 但可以返回一个新的数组 map reduce forEach filter find some every concat slice 实例方法 全局方法 vm.$set(array,index,newItem) Vue.set 设置 vm.$delete(arr, index) Vue.delete 删除 # 2.5 用特殊变量 $event 函数调用时候的参数 是 实参 函数定义时候的参数 是 形参 $event vue 提供的事件对象 参数 事件修饰符 event.preventDefault() 阻止浏览器的默认事件 event.stopPropagation() 阻止事件冒泡 v-on 提供了事件修饰符 .stop 阻止单击事件继续传播 .prevent 阻止浏览器的默认事件 .capture .self .once 这个事件只能触发一次 .passive 按键修饰符 键盘事件 (键盘码) enter 13 right 37 left space 32 up down v-on:click @click input change click dbclick keyup keydown keypress mousemove mousedown mouseup mouseenter mouserleave touchstart 后面再讲 手机端的触摸事件 touchmove touchend 原生绑定事件 (DOMO级事件 DOM2级 事件 ) onclick="do()" DOM0 document.getElementyById("box").onclick = fn; addEventListener("click",fn,false/true) 默认 false false 冒泡 true 捕获 DOM2 removeEventListener("click") jquery 绑定事件 on / off $('.box').on('click') bind / unbind $('.box').bind('click') click() 事件委托 ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去) $(parent).on('click',child,fn); $(parent).delegate(child,'click',fn); // 委托 过滤器 filter Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化 (日期格式 货币格式) 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 “管道”符号指示 | Vue.filter 全局过滤器 filters 局部过滤器 # 2.6 v-model 用于绑定 input 和 textarea 的 value 输入框 语法糖 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理 v-model 实现数据双向绑定 view 视图层 修改视图(input 事件) v-model 会自动去更新对应的 数据(model) model 数据层 修改数据 通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view) Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点 设计模式 MVC angularJS M model 数据层 V view 视图层 C controller 控制器层 MVVM M model 数据层 V views 视图层 VM viewmodel 数据视图对象 MVP M model 数据层 V views 视图层 P presenter 逻辑层 (js逻辑处理代码+方法) v-model 的底层原理 语法糖 Object.defineProperty() 进行数据劫持 (监听数据改变 从而触发修改视图的逻辑函数) (监听输入框输入事件 从而修改对应的数据) 它会根据控件类型自动选取正确的方法来更新元素 v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合) 负责监听用户的输入事件以更新数据 text 和 textarea 元素使用 value 属性和 input 事件 checkbox 和 radio 使用 checked 属性和 change 事件 select 字段将 value 作为 prop 并将 change 作为事件 $("#select").prop() v-model 也有修饰符 lazy input 变为 change 延迟触发 trim 去除首尾空格 number 用户的输入值转为数值类型 # 2.8 route 页面切换 进入和离开的动画 Vue 提供了 transition 的封装组件 任何元素和组件添加进入/离开过渡 v-if v-show 组件切换 (动态组件切换 子组件切换) 过渡 (0-1) 在进入/离开的过渡中，会有 6 个 class 切换 v-enter 进入之前 开始帧 过渡 v-enter-active 正在进入 animation v-enter-to 进入完成 结束帧 v-leave 离开之前 v-leave-active 正在离开 v-leave-to 离开完成 v- transition 没有name 默认 v- transition 添加 name = fade v 替换成 fade 初始化渲染 过渡 appear appear-active-class 动画 v-if / v-show # 3.0 Vue 也允许注册自定义指令 操作底层DOM 代码复用和抽象的主要形式是组件 (component 讲到这里再说) v-on v-if v-show v-for v-model v-bind v-else v-once v-text v-html 指令目的 作用 操作底层DOM 指令 directive v- 开头 驼峰命名 (单词之间 大写字母 变为小写字母 前面加 - ) newColor (W3C HTML 不准出现大写字母 ) 全局定义 Vue.directive(name,{钩子函数}) Vue.filter 局部定义 directives filters 指令钩子函数 一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 ) bind 指令第一次绑定到 元素时候调用 进行一些初始化操作 1 inserted 插入 被绑定元素插入父节点时调用 1 update 更新 数据或者DOM节点 更新 n unbind 只调用一次，指令与元素解绑时调用 1 钩子函数 有几个参数 (el binding ) el 绑定的DOM binding 指令携带的变量数据 name 指令名 value 指令的值 最重要 binding.value expression 指令对应的表达式 变量名称 argument 指令的参数 v-on:click click args 冒号声明的 modifiers 指令的修饰符 v-on.stop:click stop 修饰符 v-slot 分发 v-pre v-cloak 锁住DOM