首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

发现了华点:vue规定普通函数定义方法,为什么react又要箭头函数!

大家好,是年年! 如果使用过react和vue,应该发现过一个问题:vue告诉我们不应该把方法、生命周期箭头函数去定义;而在react类组件中,把方法写成箭头函数形式却更方便。...:一个箭头函数实现,另一个普通函数。...在调用时分别打印this,结果如下: 箭头函数中this正确指向了组件实例,但普通函数中却指向了undefined,为什么?...vue中this丢失 把上面的组件vue来写一遍: const Demo = Vue.createApp({ data() { return { someState...结语 「为什么react中用箭头函数,vue中用普通函数」这是一个挺很有意思问题,简单来说,这种差异是由于我们写react是一个类,而vue是一个对象导致

74710
您找到你想要的搜索结果了吗?
是的
没有找到

44·灵魂前端工程师养成-前端框架Vue数据响应式

: 18 } console.log('需求二:' + obj2.姓名) // 总结:getter就是这样,不加括号函数,仅此而已 // 需求三,姓名可以被写 let obj3 = {... = xxx 触发set函数  我们把obj3打印出来,看看结果 console.log(obj3)  可以发现... 有个姓名:(...) 和刚才{n:(...)}是不是有点蛛丝马迹了。...这个姓名,不是真实姓名,浏览器,允许读写,所以模拟姓名操作。 所以{n:(...)}并不存在这样一个n,只是浏览器模拟n操作。 那么为什么要{n:(...)}这种方法呢?...age: 18 }; console.log("需求二:" + obj2.姓名); // 总结:getter就是这样,不加括号函数,仅此而已 // 需求三,姓名可以被写 let obj3...若一个物体能对外界刺激做出反应,它就是响应式 ---- Vuedata是响应式 const vm = new Vue({data:{n:0}}) 如果修改vm.n,那么UI中n就会来响应

82510

BuildAdmin16:边栏隐藏、页面全屏,vue是如何实现

tabFullScreen 如果想要多个组件同时隐藏/展示,在vue中只需要将多个元素v-if属性指向同一个boolean变量,当变量为true时都展示;为false都隐藏;如果有的隐藏有的展示,!...隐藏aside、header 去看aside.vue中菜单栏aside是如何隐藏。...其实在新建closeBoxTop时直接设置为-30px是一样效果.... 至于为什么是-30px,因为Icon大小为40px,想要保留多少可以自己决定,-29px和-31px都无所谓。...优化 当我取消全屏之后,会发现tab页白色滑动块没了。后来分析了一下原因,使用v-if来控制组件隐藏,实际上会触发组件销毁。...正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!

38000

图形编辑器开发:为什么选择 transform 矩阵表达图形变形?

大家好,是前端西瓜哥。 前段时间对自己图形编辑器项目做了一次改造。 改用 transform 表达图形变形,并废弃掉了原来 rotation、x、y 属性。...然后再补上了图形翻转支持,以及斜切支持。图形变形操作算是补完了。 这里简单说说这么做原因。...虽说貌似可以补上一个 skewX 和 skewY 属性,但和 rotation 有一些冲突,后面会说为什么。 下面是 Figma 缩放多个图形效果。...transform 矩阵 上面这些图形变形属性,其实都可以 transform 矩阵表示出来。或者叫模型矩阵。 变形矩阵 6 个数值表示。...基本没有什么。 transform 有很多好处,首先它是底层属性,所有渲染引擎(比如 SVG、Canvas 2D)都支持矩阵对图形表示形变。 其次也方便做多个形变复合运算。

10510

编程模拟疫情传播来告诉你: 为什么现在你还不能出门

看完视频你就明白为什么不能出门了,千万不要放松警惕!(@Ele实验室 ) 在家憋了一段时间的人们,耐心也在一点一点消磨中。很多人已经忍不住开始想蠢蠢欲动了。...他们总有一套自己理论:我们城市才一点确诊病人,而且在距离我们很远地方,就出去一会儿,哪有那么巧合,就感染上了。没事儿!大街上都没人,戴着口罩又没事。...疫情防控工作防控点或者是成功与否主要在于感染人员是否戴口罩、医院里隔离床位(或者是自我隔离位)、人口流动。...因此通过这一次疫情防控,为了你、、他,请以后感冒发烧生病之后,能够带个口罩,减少传染率。因为不知道你体内这一个病毒威力如何。 ?...因此一个疫情发生,必须依靠强大有力政府比如中国,和广大医院医生护士等伟大工作者们努力,所以平时请尽量尊重他们这个职业。 ?

2K10

为什么43%前端开发者想学Vue.js

根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学前端库。在这里说明一下为什么认为这也是和你一起通过使用Vue构建一个简单App应用程序原因。...不打算告诉你为什么一个比另一个更好,虽然在官方网站有一个详细比较。 Vue.js旨在成为一个平易近人,多功能,高性能,可维护性,可测试JavaScript框架。...Vue开始构建很简单。 ? 你可以看到在上面的图片我们包括Vue库,创建Vue实例,并插入到我们根元素通过AppID。EL代表元素。...我们也会将数据移到一个对象中,并将X转换为一个带有双花括号表达式。 如你所见,它有效: ? 没什么特别的,但数据开始变化时Vue就像魔术。...还有一些Vue响应,让我们看看在数组中删除2项会发生什么。正如你在下面看到,不仅是我们名单更新了,而且我们总数也是如此。 ? 接下来,将向您展示如何通过使用按钮来增加对该页面的交互性。

1.3K20

Vue笔记(2)

vue提供计算属性,注意这些属性都是固定名字,不可以随意修改 另外要注意,这里在使用时是不需要加括号 小例子: 关于methods和computed 事件监听 还是拿计数器做例子...: 参数问题 一:事件不需要参数 调用函数加上括号:正常执行 调用函数不加括号: 正常执行 二:事件需要参数,且要求打印形参 调用函数加上括号且传入参数: 正常执行函数 调用函数时加上括号但是未传参数...: 结果为undefined 调用函数时省略括号: vue会将浏览器产生event事件作为参数传到方法 这个应用场景就是有时候我们需要得到事件一些参数,比如screenX,我们就可以这样:...按照我们以前学习过知识,我们可知事件会冒泡,所以当我们点击了按钮时,会先打印出buttonClick,然后再打印出divClick 我们过去是stopPropagation()来阻止事件冒泡,但是...vue给我们提供了更加简便方法: 事件判断 直接打开网页效果: 在控制台修改isShow

20110

Vue2学习计划二:mustache与methods和computed等Vue实例参数

细心已经发现问题了,为什么它叫计算属性,但是在例子中确实一个方法???还有它到底是一个什么东西,如此难以理解。为什么要使用它,方法来替代不是更香吗?...**为什么需要计算属性:**小白语言解释官方标准话术就是,当模板中数据运算太多,就会难以维护,因此引入计算属性。再简化一下就是,计算属性就是为了把一些运算封装,然后引入。哪些运算呢?...使用计算属性优势:假设我们有一个性能开销比较大计算属性 A ,它需要遍历一个巨大数组并做大量计算。然后我们可能有其他计算属性依赖于 A 。...6次(这里打印一次,即为执行一次)。...而计算属性只打印了一次,所以只执行了一次。

34310

问导师,Vue3有没有对应工具来生成漂亮文档? Vitepress

首页 专栏 javascript 文章详情 3 问导师,Vue3有没有对应工具来生成漂亮文档? Vitepress ?...上已经收录,文章已分类,也整理了很多文档,和教程资料。 ? 最近有人在问:小智, Vue3 有没有对应制作文档工具。...于是,去查了一些资料,发现,Vue3和新Vite构建工具为我们提供了另一种快速开发静态站点方法,那就是 Vitepress。...对象,我们想将侧边栏更改为一个对象,其中属性名称是路径,值是侧边栏数组。...终身学习者 要先坚持分享20年,大家来一起见证吧。 关注专栏 ? 前端小智 前端开发工程师 不是什么大牛,其实想做就是一个传播者。

1.5K20

vue.js如何快速入门第1篇

目录 前言: 为什么Vue框架 基础准备 看视频 常用指令 vue生命周期 vue.png vue.js如何快速入门第1篇 前言: 在学校是学java后端,对前端很感兴趣于是自学了前端,...之前没有接触过任何前端知识,连基本HTML语法,css,js基础知识都不懂,现在不能说多么精通吧,但是可以轻松解决工作中需求任务。...作为自学派前端开发,聊聊如何快速上手vue.js吧 为什么Vue框架 vue.js是当下很火一个JavaScript MVVM库,它是以数据驱动和组件化思想构建。...相比于Angular.js,Vue.js提供了更加简洁、更易于理解API,使得我们能够快速地上手并使用Vue.js。就不比较vue,angular,react了,网上太多。...v-for: 数组和对象渲染 v-text: 渲染数据一种方式 v-html: 双大括号语法无法渲染HTML标签,我们需要使用v-html。 Mustache: 语法 (双大括号) 文本插值。

96584

Vue.js小白速成手册01

就是会把一个叫做appdiv全部解码,封装为一个js函数!听起来不可思议,但是它就是这样运作。有人可能会问,为什么要这样做呢?...3.1 插值语法 插值语法是最简单,就是像上面那样,双大括号括起来一个数据,同时让这个数据在vue里面的data中去定义就行了。...button是每次拿出单个元素,buttons就是定义在data中数组。注意,当你v-for去做数组遍历时候,一定要加上一个key属性,代表每一个项ID。...后面双引号里面的是JS表达式,这里对应vue对象中某一个方法。vue对象方法,我们需要一个methods区域,哎,也不会讲,直接看代码吧,相信聪明你一看就懂!...vue其他修饰符还有很多,这边就不多做介绍了,反正以后都是UI,正常情况下,也很少自己去写底层一些东西。无所谓啦。

1.8K10

Vue.use()

vue开发一定对Vue.use不陌生,在引入一些插件时候经常需要在main里面用到这个语法。 不知道有没有人想过为什么有些插件需要用Vue.use才能用,有些直接使用。...一般我们都是按照插件使用方法直接用了,很少去想为什么。今天参考简书学习了一下。...如果封装插件是靠这个对象去调用方法,比如axios,那么直接就是export default暴露出一个对象,那么就不需要使用Vue.use。...两者刚好让我们知道,如果一个插件是必须全部引入,那么使用暴露一整个对象,使用exportdefault或者是暴露一个install对象使用Vue.use。...而像UI库那么庞大插件,我们一般按需引入,那么就使用一个一个export方法,使用花括号{}按需引入。 (完)

41220
领券