# vue_fuxi1 **Repository Path**: js-class/vue_fuxi1 ## Basic Information - **Project Name**: vue_fuxi1 - **Description**: wefwfwfwefw - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-01-30 - **Last Updated**: 2023-02-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 复习 1. 什么是 vue - 渐进式的前端 mvvm 的框架 处理数据 手动把数据渲染到页面上 当数据变了的时候 又要重新更新到页面操作 DOM 数据响应式 好处：代码量变少了 不用操作 DOM document.getElementById parentNode children 2. vue 的核心特点 - 数据响应式(mvvm) - 组件化 好维护 可复用 3. 内置指令 - v-text 不用 和插值表达式作用是一样的 但是用起来更麻烦 - v-html 当你发现 ajax 拿回来的数据不是纯文本，而是 html 的时候，就用这个 - v-model 唯一一个可以实现双向数据绑定 局限性只能用于表单控件 - v-bind 动态绑定属性 v-bind:msg="msg" :msg="msg" - v-on 绑定事件 v-on:click @click - $event 在 DOM 标签上的意思是事件对象 在组件上的意思是子组件向当前组件传递过来的数据 $event.target.value $event - 修饰符 - 事件修饰符 prevent stop - 按键修饰符 enter(确认) esc(删除写的东西) - 表单修饰符 lazy(默认 v-model 内部用的是 oninput 事件 执行太频繁了 比如做搜索的时候单词还没有输完就发一堆的 ajax 请求 用 lazy 就会把事件变成 onchange 事件) trim number - v-model 本质是语法糖 `` 原始写法 `` - 组件修饰符 - native 组件上的事件不管是叫什么哪怕你 click,keyup,input 也会被认为是自定义事件 只要加一个 native 就知道这是一个原生的事件，最终绑定给组件的根标签 - sync - v-model 在组件中可以实现双向数据绑定 但是有局限性 只能有一个 - sync 也是一个语法糖 `<组件 :msg.sync="msg" />` `<组件 :msg @update:msg="msg" />` - v-if 创建和删除元素来实现显示和隐藏 不频繁切换的时候 - v-show display 来实现显示和隐藏 哪怕是一开始的时候隐藏这个区域也要渲染好接下来隐藏 初始化开销比较大 频繁 - 共同点效果是一样的 - 不同点 - 原理 - 使用场景不一样 - v-else,v-else-if - v-for 遍历数组对象数字 在用 v-for 的时候必须用 key 起一个唯一的标识 有 id 用 id 没 id 用索引 - v-slot 插槽 v-slot:title #title 默认插槽 default 具名插槽 作用域插槽(子组件需要通过插槽的属性向父组件传递数据) - v-once 当渲染的地方不会再变的时候，用 v-once 提升性能 4. 组件之间通信 - 父子 props $emit 自定义事件 （用得最多的） - 父子 $parent $children $root $refs - 隔代(祖孙) 有时候需要某一个祖先组件需要把自己的数据传给其中的二个组件 都是这个组件的子代 子代的子代 provide inject 依赖注入 - 两个不相干的组件 event Bus 事件总线 - vuex - $listeners,$attrs 批量传一堆的属性的时候 props 要一个一个的传 - v-model,sync 父子双向数据通信 - vue3 中是 pinia 5. 自定义指令 - 当我们发现内置 v-开头的自定义指令不够用的时候就可以考虑自定义指令 自定义指令作用是把操作 DOM 代码封装起来 便于复用 - Vue.directive('focus',{bind,inserted}) - v-focus(页面进入输入框获取光标) v-imgerror（线上的图片地址出问题了，我们就避免图裂开了给一个默认图片）v-lazy(图片懒加载 提升性能) v-permission(权限) 6. 过滤器 filter - 用于数据的文本格式化 小写字母变大写 货币加单位 时间戳变成时间 1,234,568,777 - Vue.filter('过滤器名字',fn) {{abc | 过滤器名字 | 过滤器}} - moment.js 或 dayjs 第三方的插件 7. 组件 - data,props,methods,computed,watch (名字不能一样) - methods 和 computed 区别 （前面没有缓存 后面有缓存的） - computed 有完整写法和普通写法 - 当我们发现计算属性需要双向绑定的时候，需要用计算属性的完整的写法 - watch 侦听器 - 当我们发现我们需要在数据改变的时候来做一些事情的时候就可以用侦听器 - watch 和 computed 的区别 - computed 必须有 return,watch 是没有的 - computed 只能是同步的，watch 可以写异步的 - 使用场景 computed 全选反选 购物车总价总数量 watch 搜索框下拉提示 - scoped 的理解 - 加了 scoped 的效果：组件中写的样式默认会对其他组件造成污染，加了 scoped 只作用于当前组件和当前组件的子组件的第一层根元素 不能深入到子组件内部 - 深度选择器 ::v-deep 发现加了样式没效果哪怕加!important 还是没效果 - 生命周期 - 四个阶段八个钩子 - 创建 beforeCreate created - 挂载 beforeMount mounted - 更新 beforeUpdate updated - 销毁 beforeDestroy destroyed - 常用的钩子 - created 用于发送 ajax 请求 - 如果想在 created 中操作 DOM 必须把代码写在 this.$nextTick 的回调函数里面 - mounted 操作 dom 数据可视化 echarts,地图 - beforeDestory 清理工作 移除当前组件中的定时器 移除事件 - keep-alive 相关的 - keep-alive 缓存组件 - 只想缓存部分组件 或只想让某几个组件不缓存 include,exclude (组件必须有名字的) - 一个被缓存的组件的 created,mounted 只会执行一次 activated,deactivated 激活 失活 - activated 接管 created 和 mounted 的工作 - deactivated 接管了 beforeDestory 的工作 - 父子组件生命周期的顺序 - 341 121 121 - 初始化 父 beforeCreate created beforeMount 子 beforeCreate created beforeMount mounted 父 mounted - 更新 父 beforeUpdate 子 beforeUpdate updated 父 updated - 一个组件的基本组成部分 - 组件渲染必须有 template 或 render 函数 - 一般用 template，但是有时候用 render 可以让代码更加简洁和灵活 - https://v2.cn.vuejs.org/v2/guide/render-function.html 8. 路由 vue-router - 模式 hash history - 面试题 为什么项目打包之后页面访问都是 404 因为你开启了 history 模式但是后台没有配置的 - 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。 - router 和 route 的区别 * router 是路由实例对象，只有一个，用来实现路由的切换、返回 * route 代表的是当前这个路由规则 可以获取路由参数 this.$route.params this.$route.query * `url?id=100` `url/100` * 没有指定建议用 params 的写法而不是 query 的写法，因为这种写法可以简化代码 - 组件中这样写`

{{ $route.params.id }}

`失去了灵活性，只能在地址栏 必须有 id 的时候才有用 - 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 - props:true 这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试 - 路由守卫 - 前置全局路由守卫 beforeEach(from,to,next) - next() - next('/login') - 后置全局路由守卫 afterEach(from,to) - a 路由 跳转到到 b 路由就会先执行 beforeEach，如果跳成功了会执行 afterEach - to.path - meta 元信息 * 我们可以用 meta 来实现不同的路由地址浏览器标签上的标题不一样 * 由于人资项目中主页的侧边栏和动态路由有关系 * 命名路由 this.$router.push('/a/b/c/d/e') - redirect 9. vuex - 什么是 vuex:集中式的状态管理的仓库 - 核心概念 state getters mutations actions modules - 辅助函数 mapState mapMutations mapActions mapGetters - 缺点 页面刷新就没了 结合本地存储数据持久 实际上班的时候我们公司用的是一个第三方插件 vuex-persist 10. 自己定义一个插件 Vue.use - 插件的好处：我们导入很多公共组件、自定义指令、过滤器的时候一行代码就可以了 - 插件的语法 插件的本质就是一个普通的函数或者是一个普通的对象，但是对象必须有一个固定的方法叫 install 11. vue 一般是用来做两种项目 toc 移动端 tob 后台管理项目 oa 系统 只有公司内部才使用 oa 系统 办公自动化 无纸化办公 hrm 人力资源管理 crm 客户管理系统 UI 组件库 vant 移动端 element ui PC 端 vue2 element plus vue3 12. v-if 和 v-for 不能同时使用在同一个元素上 v-for 的优先级更高一点 1. 先把要渲染的数据用 computed 筛选一下，然后把筛选之后再用 v-for 1. v-if 是对所有的数据判断，比如长度大于 10 就全部渲染，小于 10 就全部不渲染，这个时候可以把 v-if 提到外面去 1. mixin 混入 - 多个组件有相同的一些选项（相同的 data,computed,filter)写在 mixin 14. 单向数据流 父组件通过 props 传递子组件的数据是只读，只能读不能改，反过来是不行 15. 数据有时候不是响应式的 - 数组通过索引修改或添加元素项 this.arr[3] = 'purple' - 对象后添加的属性 - 删除对象中的属性 - 解决办法 - `this.$set(this.arr, 3, 'purple')` - `this.$delete` - `this.$forceUpdate()` 16. 动态组件 component - 这块只有一个位置，但是有时候 ajax 拿回来的是文章，渲染一个文章，有时候拿回来是一组图片，渲染的是轮播图，有时候拿回来的是一个视频，用 video 标签渲染，得有 3 个组件 文章组件 图片组件 视频组件 - 思路一 <文章组件 v-if=""><视频组件 v-else-if><图片组件 v-else> - 思路二 动态组件 this.name = '视频组件' 依 is 的值，来决定哪个组件被渲染