支持编辑事件 支持删除事件 支持清空所有事件 支持本地化存储 支持折叠面板 项目笔记 本项目是使用vue-cli脚手架生成的项目，项目代码可以到我的github上clone下来。...，实时地把事件在不同状态列表中显示出来 解决方法：利用vuex进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。...这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。 1）父组件可以使用 props 把数据传给子组件。 2）子组件可以使用 $emit 触发父组件的自定义事件。...和 关键词 进行筛选 知识点：在返回所有事件的计算属性上，使用过滤器( filter )，进行对 type 和 content 的筛选，返回符合条件的事件。...做这个记事本的初衷，是因为在工作中，我都会把最近要做的事情给记在本子上，完成之后就会打钩，所以想把这个给放到电脑上去实现。
$mount('#app') npm install weui --save 我们同样使用 npm 安装 weui 模块，然后在 main.js 中引入 weui的基础样式库，方便我们可以在全局使用微信基础样式构建项目页面...const state = reactive({ name: 'Eno Yao' }) props 在 Vue2.0 中我们可以使用 props 属性值完成父子通信，在这里我们需要定义 props 属性去定义接受值的类型...props 属性值 } }; 我们在 App.vue 里面就可以使用该头部组件，有了上面的 props 我们可以根据传进来的值，让这个头部组件呈现不同的状态。...context image.png setup 函数的第二个参数是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 Vue2.0 中需要通过 this 才能访问到，在 vue3.0...，还记得我们上一个组件 Search.vue 吗，我们可以结合用户在搜索框输入的检索值，配合 computed 计算属性来筛选对我们用户有用列表数据，所以我们首先从 store 的共享实例里面拿到 Search.vue
全局安装 vue-cl 在命令行输入：$ npm install --global vue-cli，全局安装vue-cli 默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器，通过config命令设置默认下载路径...(4). v-bind 绑定属性，缩写的形式： v-bind:src可以写成 :src 在vue中 绑定html属性，必须使用v-bind ? 最终解析如下： ?...7. computed 计算属性 计算属性其实是一个方法，定义在computed属性中的方法，计算属性的优势： (1)....计算属性的方法和methods中的方法实现的功能是一样的，正常情况，在methods定义方法也是可以的，但是由于方法所依赖的数据，性能开销比较大，就适合用计算属性， 计算属性是有计算缓存的，可以让更新更高效...有时候，我们需要对state的数据进行筛选或过滤，这些操作都是在组件的计算属性进行的， 如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入
vue-circles.jpg 在 Vue.js 中，v-for 循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。 在最基本的用法中，它们的用法如下。...1.始终在v-for循环中使用key 首先，我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性，它可以确保组件以您期望的方式工作。..._id' v-if='product.price < 50' > {{ product.name }} 4.使用计算属性或方法代替 为避免上述问题，我们应该在遍历模板中的数据之前对其进行过滤...有两种非常相似的方法： 使用计算属性 使用过滤方法 让我们快速地介绍一下这两种方法。 首先，我们只需要设置一个计算属性，为了获得与之前的v-if相同的功能，代码应如下所示。...，如果我们希望能够将变量传递给筛选器，那么方法是最好的选择。
1.简单说一下Vue2.x响应式数据原理 Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher...当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。 Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。...❝面试官：(这小子基础还可以，接下来我得上上难度了) ❞ 12.Vue模版编译原理知道吗，能简单说一下吗？ 简单说，Vue的编译过程就是将template转化为render函数的过程。...(看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力) ❝面试官：(可以可以，看来是个苗子，不过自我介绍属实有些无聊，下一题) ❞ (基操，勿6) 14.再说一下虚拟Dom以及key属性的作用 由于在浏览器中操作...15.keep-alive了解吗 keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。 常用的两个属性include/exclude，允许组件有条件的进行缓存。
在 3.x 中，只观察用于渲染应用程序最初可见部分的数据。更精确的变更通知。在 2.x 中，通过 Vue.set 强制添加新属性将导致依赖于该对象的 watcher 收到变更通知。...在 3.x 中，只有依赖于特定属性的 watcher 才会收到通知。不可变的 observable：我们可以创建值的“不可变”版本（即使是嵌套属性），除非系统在内部暂时将其“解禁”。...更好的调试功能：我们可以使用新的 renderTracked 和 renderTriggered 钩子精确地跟踪组件在什么时候以及为什么重新渲染。...v-model 可以被用在自定义组件上吗？如果可以，如何使用？可以。...keep-alive 使用场景和原理keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
树上显示还是隐藏； 最终解析如下： 4. v-bind 绑定属性v-bind:src，缩写可以写成 :src； 在vue中 绑定html属性，必须使用v-bind。...使用，依然是管道符号，只有传参方式变了：{{ price | currency('￥','@')}}； 7. computed 计算属性 计算属性其实是一个方法，定义在computed属性中的方法，计算属性的优势...计算属性的方法和methods中的方法实现的功能是一样的，正常情况，在methods定义方法也是可以的，但是由于方法所依赖的数据，性能开销比较大，就适合用计算属性， 计算属性是有计算缓存的，可以让更新更高效...在store.js里声明getters，有点类似于计算属性，改变state里的数据的时候会触发getters里的方法,获取新数据； 有时候，我们需要对state的数据进行筛选或过滤，这些操作都是在组件的计算属性进行的...， 如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 ，这两种方法都不太理想，但是如果把数据筛选完在传到计算属性里就不用那么麻烦了
fetchData(); // 删除成功重新请求列表 } else { console.log("产品删除失败"); } } 案例验证下实现效果 在气泡确认组件使用建议中...2.1 组件构成 参考办公软件Excel在做数据表的时候（表头、行、列）格式，对应一个展示Table便有如下构成： 表头 ：说明这一列的信息类别，也可以在表头放置一些排序、筛选等操作按钮。...需要对数据进行复杂操作时：当需要对数据进行排序、搜索、筛选等操作时，可以使用表格组件，利于对数据进行操作。...2.4 属性API 表格Table可以看作是一个综合且相对负责的组件，因此会有更多的功能、属性、方法等供我们组合使用来达到不同需求，如下图左侧列出了很多参考，在使用时候可以以基本模版为地基，逐项增加配置项...表格在WEB的系统中对数据的展示和操作有着很重要的使用占比，因此有着更多更复杂的使用方法，此篇是最常用的基础需要熟练掌握，当然后续随着测试需求平台更多的需求被实现会更多的讲解Table的知识点。
然后将计算出来的路由数组通过router.addRouters动态挂载 还要注意的一点就是需要将我们筛选出来的路由配置渲染到我们的前端页面上去一一相对应 3.拦截器：请求拦截 响应拦截 请求拦截：...（重点） 1 父子通信 在嵌套组件中,父组件中的[子组件标签] 绑定自定义属性; 在子组件中 props: { 子组件标签自定义的属性名: { type: , default} } 2 子父通信 在嵌套组件中...但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 26.vue项目中你做的优化？...这样防止子组件意外改变父组件的状态 34.vue中有没有用过组件通信方式 (必背) 父传子:父组件中,子组件上通过属性绑定的方式向子中传递,子中用props接收即可 子传父:通过 e m i t 其中有两个参数第一个作为父中的事件函数...第一个作为父中的事件函数,第二个是要传递的数据,父中在触发函数的形参中拿到 乱传/兄弟传:在main.js中先给vue原型上挂载一个vue实例,在组建中用 emit其中有两个参数第一个作为父中的事件函数
直接写属性就可以 但是上面的方法还是很麻烦的,我们可以在一开始就把想要用的数据定义为响应式的,就不用那么麻烦了 ref ref函数一般用于简单类型数据 在模板中使用ref声明的响应式数据,可以省略value...高级用法:假如我们计算属性的值想要和v-model双向绑定,实现响应式,就不能按照上面的方法写,而要使用get函数 watch函数 watch函数,是用来定义侦听器的 第一个参数为监听目标,第二个参数就是改变后触发的函数...这是最基本的使用 监听多组数据就用数组包裹起来 如果我们想监听对象中某一个属性的变化,例如obj.name,还能用上面的方法吗 可见是会报错的 此时需要写成一个函数,其实也就相当于计算属性...DOM或者组件 但是这种情况不多,第一种情况较多 父子通信 之前我们的父传子就是用props,但是在vue3.0中,假如我们在获取到父组件传过来的数据时想要先进行处理该怎么做呢,在setup中怎么拿到...,都想要共享父组件的数据,此时可以使用依赖注入,虽然以前的事件总线$bus也可以实现,但是还是比较麻烦的 provide&inject 现在我在父组件定义了100元 现在我有一个子组件,子组件里还有个子组件
简单说一下Vue2.x响应式数据原理 Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher...当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。 Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。...组件中的data为什么是一个函数？ 这个问题 确实问的我错不及防 ，但是这还是个事吗？ 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。...Vue模版编译原理知道吗，能简单说一下吗？...虚拟Dom以及key属性的作用 这个问题在 某友 面试时问的 ， 记忆犹新，面试官非说我错了 ，不上辩解的我只能屈服 由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。
keep-alive 中的生命周期哪些keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。...(当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。)了解nextTick吗？...它可以通过 v-on="$listeners"传入内部组件（5）provide / inject适用于 隔代组件通信 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject来注入变量...dep，一个属性可以对应多个watcher（一个属性可以在任何组件中使用、在多个组件中使用）// 一个dep 对应多个watcher // 一个watcher 对应多个dep （一个视图对应多个属性）/.../ dep 和 watcher是多对多的关系Vue.mixin的使用场景和原理在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过 Vue
()实例中,data 可以直接是一个对象,为什么在 vue 组件中,data 必须是一个函数呢?...image.png 8.vue数据绑定是双向还是单向的 Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。 9.v-model双向绑定的原理?...active-class是vue-router模块的router-link组件中的属性，用来设置选中连接的样式. 23.为什么vue使用异步更新组件?...== 'production' }) 30.你了解双向绑定的计算属性的应用场景吗?...选择器额外添加一个对应的属性选择器来选择该组件中dom.
computed 是计算属性，是描述依赖响应式状态的复杂逻辑，也就是说，计算出来的值，是依赖vue中其他的响应式数据的。watch 是侦听器，用来监听数据的改变，并执行一些操作。...他们之间的不同除了应用场景外，计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。...；且避免同时使用 v-if，因为v-for的优先级比v-if高，每次都会先遍历整个数组；可以先把数据筛选好了在进行遍历，不要用 v-if 再进行判断了。...五、事件的销毁Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。...、使用 keep-alive 缓存组件通过组件强制被切换掉的组件仍然保持“存活”的状态。
vue 事件机制) 4.观察者模式 (响应式数据原理) 5.装饰模式: (@装饰器的用法) 6.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略 Vue...$set() 解决对象新增属性不能响应的问题 Vue使用了Object.defineProperty实现双向数据绑定 在初始化实例时对属性执行 getter/setter 转化 属性必须在data对象上存在才能让...v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。...它可以通过 v-on="$listeners" 传入内部组件 （5）provide / inject 适用于 隔代组件通信 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject...更准确 : 因为带 key 就不是就地复用了,在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。
12.写了2个标签，两个标签之间有空格的情况遇到过吗？ 13.form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？ 14.CSS选择器有哪些？哪些属性可以继承？...25.absolute的containing block计算方式跟正常流有什么不同？ 26.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？...90.你了解双向绑定的计算属性的应用场景吗? 91.vue中的指令v-on如何绑定多个属性? 92.vue中使用delete删除对象的属性,页面会更新吗?...123.有哪项方式可以对一个DOM设置它的CSS样式? 124.CSS都有哪些选择器？ 125.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？...131.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ 132.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ 133.描述一个”reset”的CSS文件并如何使用它。
computed:computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取...-> v-leave-from组件 watch 选项和实例方法 $watch不再支持点分隔字符串路径，请改用计算函数作为参数在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板...Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。...其实就是一个子类构造器 是 Vue 组件的核心 api 实现思路就是使用原型继承的方法返回了 Vue 的子类 并且利用 mergeOptions 把传入组件的 options 和父类的 options...immediate：在初始化时直接调用回调函数，可以通过在 created 阶段手动调用回调函数实现相同的效果Vue模版编译原理知道吗，能简单说一下吗？
电话拨通中，咳咳喂，听得到吗，听得到是吧 ?，那面试开始了，你先做个自我介绍吧 。。。在你自我介绍的时候呢，我就看看你做过的项目，技术栈什么的。...思考一下自己所说的那些点，自己都非常清楚明白吗？下面呢我就根据你对 vue 的理解，接着谈谈： 你刚刚说到了 MVVM，能详细说说吗？...刚刚如果你说了对象的检测，然后又没说清楚数组的处理的话，我就会问下面这个问题 那 vue 中是如何检测数组变化的呢？...可以的可以的，先问你个生命周期，我再想想怎么难住你 ? 说说 Vue 的生命周期吧 ❗ 答案 什么时候被调用？...单数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不支持 mounted 方法。什么时候使用 beforeDestroy？：当前页面使用 $on ，需要解绑事件。清楚定时器。
1.3 Vue组件介绍 了解完Vue的生命周期，我们再来看看Vue组件。什么是Vue组件？你可以理解为Java中的Class。之前咱们写的Vue实例就是Java中直接写main方法，不牵扯类和对象。...而Vue组件就是Class类，你可以在main方法中new出不同的Class实例。 来看看这段代码： 在线演示 <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
