随笔分类 - Vue
oh!Vue.
摘要：1. v-if：在符合条件时，渲染DOM；在条件不符合时，不会渲染DOM。 2. v-show：即使不符合条件，也会渲染DOM，只是当不符合条件时，会设置样式 display: none 将元素隐藏，符合条件时显示元素。 比较：（1）v-if 条件切换时是对DOM进行创建和销毁，频繁的修改DOM会有
阅读全文
摘要：1. Vue 的单向数据流：指数据一般从父组件传到子组件，子组件没有权利直接修改父组件传来的数据，即子组件从 props 中直接获取的数据，只能请求父组件修改数据再传给子组件。父级属性值的更新会下行流动到子组件中。 2. 为什么不能子组件直接修改父组件传来的值呢？父组件的值可能会不断发生变化，那么如
阅读全文
摘要：为了看的方便，在最后把所有的代码贴出来了，可拉到页面底部查看；【只有前几种方式的，其他方式暂时没贴出来，因为图太多了...】 1. 父组件传值给子组件：在子组件中 props 中定义接收父组件值的变量名称，在父组件调用子组件的标签时，给子组件对应变量名称传入值即可。 父组件中： 子组件中： 2. 子
阅读全文
摘要：1. 本篇随笔介绍当在 Vue 中，父子组件的生命周期函数。 2. 首先是父子组件执行顺序问题： 【1】加载渲染过程： （1）如果仅有一个子组件，那么执行顺序为 father.beforeCreate -> father.created -> father.beforeMount -> son.be
阅读全文
摘要：1. 在我们使用 Vue 写项目时，必须要了解 Vue 实例化过程中所经历的一些事件。Vue 实例从被创建到销毁的阶段被称作生命周期，在其中我们可以通过八大生命周期钩子函数在 Vue 实例化的不同阶段添加自己希望书写的代码。 （1）beforeCreate：vue 实例刚刚创建出来，data、met
阅读全文
摘要：1. css animation动画 2. css padding百分比会导致height失效的情况 3. vue created、mounted生命周期 4. 在vue实例中不可以使用普通函数，而要使用箭头函数，否则因为作用域问题无法通过this获取vue实例对象 5. javaScript sc
阅读全文
摘要：1. v-infinite-scroll 是饿了么团队开发的用于Vue项目开发的无限滚动插件，具体使用直接看GitHub即可： https://github.com/ElemeFE/vue-infinite-scroll 其他资料：https://www.jianshu.com/p/c4abab8c
阅读全文
摘要：1. 同源策略：https://www.cnblogs.com/twinkleG/p/15357210.html 2. CORS 跨域：https://www.cnblogs.com/twinkleG/p/15359409.html 3. 以上两个链接是个人对同源策略以及CORS跨域的一些浅薄理解，
阅读全文
摘要：Vue 数组和对象属性的响应式问题：接 https://www.cnblogs.com/twinkleG/p/15389823.html 由于 JavaScript 的限制，响应式原理无法追踪数组和对象中属性的变化【官方文档写的是无法追踪数组和对象的变化，我觉得不严谨，对象和数组改变了还是可以追踪到
阅读全文
摘要：1. 官方文档：https://cn.vuejs.org/v2/api/#data 2. 首先这里涉及到一个面试题：组件中的 data 为什么必须是函数形式，而不能是对象形式？ 原因在于，组件可能会被多次实例化使用，如果组件中的 data 仍然是对象形式，则所有的实例化组件共享引用同一个 data
阅读全文
摘要：1. 这里有一个简单的响应式原理 demo：https://juejin.cn/post/6844903597986037768【转载】 2. 如果说需要我手写出来那还是有一定难度，在这里总结一下： 首先，Vue 利用 Object.defineProperty 实现了数据劫持； 属性分为两种，一种
阅读全文
摘要：1. 事件循环可能是理解本篇文章的前置知识，不过也可以先看看无妨。 2. Vue 在修改数据后更新 DOM 时是异步的，这意味着，如果你在 Vue 中修改了被 watcher 依赖的数据，Vue 会开启一个任务队列，把所有修改数据的操作放入其中，【如果说同一个 watcher 依赖的数据被修改了多次
阅读全文
摘要：1. 偷懒，官方文档总结的太好了，我如果写的话也是照搬 Actions：https://vuex.vuejs.org/zh/guide/actions.html Modules：https://vuex.vuejs.org/zh/guide/modules.html 2. 比较重要的进阶： 项目结构
阅读全文
摘要：1. 有了 state 以及 getters 的基础，mutations 实际上也很容易理解，详解可以直接看官方文档，个人只总结一下重要知识点： 【1】改变 state 不能直接获取去改变，应该通过 mutations，只有这样才能够记录状态的变化 【2】mutations 只能执行同步操作，不可以
阅读全文
摘要：1. 问题提出：我们有时可能希望对 vuex 中 state 的属性进行一些操作，再展示或者被用于其他方法中，那么假如在多个组件中都需要这个属性，会导致重复性操作. 例如：一个存放数字0-50的数组，我们希望选出大于20的部分，那么在组件中，我们需要使用计算属性 computed 去选出相应的数，再
阅读全文
摘要：1. 通过在根组件挂载 store 对象，这样根组件以及所有子组件都可以使用 store 中的全局属性. 例如我们在 vuex store 全局管理一个 state 中的 count 属性， 那么在组件中，可以直接在 Mustache 语法【双大括号】中直接使用 $store.state.count
阅读全文
摘要：1. 有时我们会在模板中添加一些复杂的逻辑，或者是对于组件中 data 对象中的属性进行一些操作后，再将其展示在页面上。此时可以应用 computed. <div id="example"> {{ message.split('').reverse().join('') }} </div> 【这里我
阅读全文
摘要：我们知道，一个组件可能会被多处引用，那么如果直接使用对象形式，可以预想到所有引用此组件的实例，在对这个组件data中数据进行修改时，会影响到其他引用此组件的数据一起修改，造成数据混乱错误. 因此将其设置为一个方法返回的对象，避免了所有引用此组件的实例共享同一个data对象. ————————————
阅读全文
摘要：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效。 const Foo = () => import('./Foo.vue') const router = new VueRo
阅读全文
摘要：这个知识点比较容易理解，没有什么好讲的，直接看官网也可以. 官网没有讲解其具体用途，比如说跳转到一个页面后，这个页面在浏览器顶栏显示的标题 title，可以记录在 meta 中，利用beforeEach导航守卫，每次路由跳转到一个页面，都执行： document.title = to.matched
阅读全文
浙公网安备 33010602011771号