Vue.js
文章平均质量分 78
sunwan19941023
这个作者很懒,什么都没留下…
展开
-
Vue3中proxy相比Vue2.0中object.defineProperty的优点
一、Object.defineProperty定义:Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象为什么能实现响应式通过defineProperty两个属性,get及set get 属性的 getter 函数,当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值 set 属性的...原创 2021-04-15 19:45:27 · 333 阅读 · 0 评论 -
Vuex的基本介绍及五个核心属性
一、创建button按钮1 HTML结构<div class="action"> <button data-speed="slow">慢速</button> <!-- 自定义属性 --> <button data-speed="normal" class="active">中速</button> <button data-speed="fast">快速</button>&l原创 2020-09-28 09:09:45 · 208 阅读 · 0 评论 -
Vue.js组件中data为什么必须是一个函数
柠檬UI之Grid网格布局网格布局什么是网格布局?就是把一个 div 分成 N 个部分(N = 12,16,24...),每个部分无空隙或者有空隙。制作雏形:一行分成24份,可以用span指定多少份增加gutter:每个column之间有间隙,但是两边无间隙实现思路:column设置 Padding,值为 gutter / 2,这样两个column之间的间隙值就是gutter 父元素row 设置负Margin,值为 - gutter / 2怎么通...原创 2020-09-10 22:51:12 · 73 阅读 · 0 评论 -
Vue.js复习笔记三(Sun)
五 Vue的双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,.原创 2020-11-25 10:03:23 · 96 阅读 · 0 评论 -
Vue.js复习笔记二(Sun)
背景在前端的整个学习生涯中,我们总是能一次次听到“性能”和“体验”这两个词。前端性能优化不仅是前端工程师工作中时刻需要关注的现实问题,也是前端面试中屡屡被问到的点。面试官之所以爱问,是因为偷懒。只需问这一个问题,就能在一定程度考察面试者的知识广度、知识深度、总结能力、表达能力,还能沿着这条线继续问其他问题。当被突然问到性能这个问题时,大部分人会突然一愣。总觉得有很多要说的东西,但又感觉杂乱无章一下子不知从何说起。经过一番思索,脑子里慢慢翻出早年面试刷题时看到的“雅虎性能优化N条军规”,抓耳挠腮说上七原创 2020-10-13 18:59:31 · 147 阅读 · 1 评论 -
Vue.js复习笔记一(Sun)
一 axios的底层什么实现的以及相关的ajax的问题Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。Ajax包含下列技术:基于web标准(standards-basedpresentation)XHTML+CSS的表示;使用 DOM(Document ObjectModel)进行动态显示及交互;使用 XML .原创 2020-10-12 19:36:39 · 95 阅读 · 0 评论 -
Vue.js中computed和watch的区别
计算属性computedcomputed的概念Vue的计算属性computed用于返回一个计算值,如果用于计算这个计算值的data的属性(即依赖的响应式 property )发生变化,计算值也会相应的发生变化。var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlu.原创 2020-09-17 22:49:46 · 129 阅读 · 0 评论 -
苹果记账之抽取公共组件
苹果记账反思:抽取公共组件在写代码时一直牢记:我与重复不共戴天在目前写的两个页面里,抽取了一些公共组件:TagTypeInputButton遇到的问题有:需要传的参数不同, 用props 父传子 用slot , 比如Input组件 在money页的placeholder是“写点备注吧”在editLabel页的placeholder是“限三个汉字”做法是用prop 传递 placeholder变量EdiltLabel<FormItem .原创 2020-09-14 22:37:57 · 81 阅读 · 0 评论 -
如何用Typescript写Vue组件
Toast首先我们做需求分析:难点1. 动态生成Vue实例第一个难点在于:我们需要动态生成Vue实例,作为弹窗,这就需要用到插件的知识另外,由于我用的是Typescript, 还需要额外指定类型首先我们准备一个Toast.vue<template> <div class="toast"> <slot></slot> </div></template><scri原创 2020-09-13 21:08:05 · 445 阅读 · 0 评论 -
巧用provide和inject方法完成精巧的Tab组件
巧用inject方法完成精巧的Tab组件目标:希望用户如下使用代码:<m-tabs> <m-tabs-nav> <m-tabs-item name="tab1"></m-tabs-item> <m-tabs-item name="tab2"></m-tabs-item> </m-tabs-nav> <m-tab原创 2020-09-09 21:17:51 · 219 阅读 · 0 评论 -
如何部署Vue项目到github上并实现在线预览
最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github问题1当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件我们先尝试在浏览器转载 2020-09-07 22:41:07 · 2579 阅读 · 1 评论 -
React和Vue的相同点与不同点
vue和react的区别 Vue最大的优势,就是实现了数据的双向绑定,而React的数据流动是单向的。 React中是把html和css全都写进js中。而Vue采用的是模板,就是在html中写css和js,最后再用webpack和vue-loader进行打包,这种编码方式对于初学者而言是很舒服的 在React中要想更新状态,必须调用setState方法,而在Vue中只需要通过this的某种方式去更新state中的数据,这种方式更加方便 Vue会跟踪每一个组件的依赖关系,不原创 2020-09-02 19:06:04 · 356 阅读 · 0 评论 -
Vue中mixins的用法
mixinsvue中提供了一种混合机制–mixins(混合),用来更高效的实现组件内容的复用。mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。mixins理解组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属转载 2020-09-01 19:32:01 · 658 阅读 · 0 评论 -
v-for中为什么要用key
1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。2.key主要用来做domdiff算法用的,diff算法是同级比较,比较当前标签上的key还有它当前的标签名,如果key和标签名都一样时只是做了一个移动的操作,不会重新创建元素和删除元素。3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变,Vue不是移动Dom元素来匹配数据项.原创 2020-08-31 19:29:23 · 437 阅读 · 0 评论