Vue
易风有点疯
我就是个小菜鸡,每天都要笑嘻嘻
展开
-
干货:Vue3 与 Vue2 的区别(详细)
vue2 的 options APIvue3 的 composition APIv-if 和 v-for 优先级的区别vue3 中 v-if 比 v-for 优先级更高,而 vue2 中 v-for 优先级更高由于 vue3 使用 typeScript 重构了,所以对 ts 的类型提示特别友好mixin 由于会导致变量来源不明确等问题,所以 vue3 借鉴了 react 中很强大的 hooks低情商:我们抄了 react 的 hooks高情商:我一部分的灵感来自于 react 中的 hooks...原创 2022-07-13 09:19:45 · 912 阅读 · 1 评论 -
vue3->调用子组件的属性和方法
vue3->调用子组件的属性和方法原创 2022-04-08 23:36:38 · 4705 阅读 · 1 评论 -
给插槽(slot)绑定事件·
给插槽(slot)绑定事件背景: 现在有一个组件,它里面有一个插槽,需要实现不管往插槽里面添加什么,都要能让他点击之后可以让组件里面的数据的值+1实现思路 可以运用 vue 的作用域插槽先将需要点击之后运行的方法通过作用域插槽传递给调用该组件的页面<template> <div> <h1>{{ num }}</h1> <slot :add-num="addNum"> <button @click="原创 2022-02-14 12:00:48 · 6779 阅读 · 4 评论 -
柯里化的实现
柯里化的实现面试中经常会遇到这个题目:写一个函数,实现可多次调用,并且不限制参数个数add(1, 2, 3, 4); //10add(1, 2)(3)(4, 5, 6); //21add(1)(2)(3)(4)(5); //15最终代码:function curry(fn) { // 保存预置参数 const presetArgs = [].slice.call(arguments, 1); // 返回一个新函数 function curried() { // 新函数原创 2021-08-31 17:52:41 · 475 阅读 · 0 评论 -
技术点:uniapp,小程序:页面组件获取所在页面的实例,重写生命周期
使用带来的好处:不用一层层传递:页面组件可以直接获取到所在页面的实例上的数据,而不用通过prop一层层传下去,在页面组件所在的层级较深时极其好用解耦:页面组件实现某些功能需要借助所在页面的生命周期钩子来进行一些操作的时候,使用该方法可以不用将处理的代码写在所在页面的钩子里,而是直接将代码写在页面组件里。例如:视频组件在滑动到某个节点才开始自动播放,就需要所在页面的 onPageScroll钩子里面进行视频处理逻辑,这样复用性极低。而且耦合度比较高,而是用本技巧可以直接在本组件里写逻辑,而不用修改所在原创 2021-08-19 16:46:50 · 1733 阅读 · 0 评论 -
Nuxt学习总结
什么是nuxt?一个使用vue来开发web网站的脚手架为什么要使用nuxt?vue 由于会接管dom 元素,使得dom 元素都是通过script 里面的代码进行渲染的,爬虫爬不到,不利于SEO使用原生js 和jquery 写网站很麻烦,各种繁琐的dom操作,各种api,已经习惯了使用 vue 开发我们开发起来效率会很慢(当然,像那种一两个页面的网站还是用原生写比较好)nuxt为什么可以做SEO?nuxt项目虽然也是用vue写的,但是他会将在服务端将页面进行渲染(SSR),而不是在浏览器端通过原创 2021-08-03 09:35:27 · 514 阅读 · 3 评论 -
Vue:自定义指令
自定义指令解决了什么问题?可以自定义操作一些dom元素,使开发更便捷使用方法(常用)在 vue2.x中template**语法:**就是把注册好的组件前面加一个 v-,后面跟的是一个值<p v-highlight="'yellow'">高亮显示此文本亮黄色</p>script语法:常用的方法有bind(页面加载时触发),update(页面更新时触发),他们的参数都是三个值:el 是父dom元素,binding是在template里传过来的值,vnode是虚拟节点,原创 2021-04-02 11:15:52 · 268 阅读 · 0 评论 -
Vue:动态路由
动态路由1.什么是动态路由?const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User }, // 普通路由 { path: '/Login', component: Login }, ]})上面就是动态路由,根据其参数(比如这儿的id)的不同,可以让不同的路由指向同一个组件,组件又能根据它传过来的值渲染成不同的样子,组原创 2021-02-05 18:47:35 · 688 阅读 · 2 评论 -
踩坑:vue3路由跳转,数组对象重新赋值
最近学习Vue3的时候,利用业余时间做了一个简单的ToDoList来进行练习,效果如下:但是再完成这个小demo的时候遇到了一点常见的坑,所以分享出来,希望给刚刚学习vue3的小伙伴一点帮助1.路由跳转正常的路由跳转是需要进行以下几步的第一步: 引入 useRouterimport { useRouter } from 'vue-router'第二步: 实例化路由方法const router = useRouter()第三步: 使用跳转 router.push('/Login') /原创 2021-01-13 11:45:18 · 5487 阅读 · 3 评论 -
快速上手Vue3
快速上手Vue31.为什么使用Vue3?打包文件的大小更小内存消耗更少渲染速度更快总之一句话:性能提升了2.新增特性setup简单理解就是vue2.x原来分出来的一个个模块,比如 data,methods,conputed这些,统统放在了一个setup里面,然后把页面需要用到的进行return就行。3.从vue2.x的基础上快速上手vue3datavue2data:{ return:{ str:'啦啦啦', obj:{ name:'zs', age:18 }原创 2021-01-09 11:52:55 · 292 阅读 · 2 评论 -
JavaScript:Excel表格的内容用js进行输出
将Excel表格的内容用js进行输出问题:在vue项目中使用js获取Excel表格里面的数据解决方法:第一步:下载插件cnpm i xlsx第二步:新建一个js文件,将方法进行写入,并导出import XLSX from 'xlsx'function get_header_row (sheet) { const headers = [] const range = XLSX.utils.decode_range(sheet['!ref']) let C c原创 2021-01-05 17:46:11 · 1057 阅读 · 1 评论 -
Vue:一行代码解决eslint
在项目根目录里新建 vue.cogfig.js 文件把这一行复制到 vue.config.js 里面去,直接解决这一行代码既不会关闭eslint,又可以不阻止项目运行,两全其美module.exports = { lintOnSave: 'warning',}原理:lintOnSave: 设置是否在开发环境下每次保存代码时都启用 eslint验证。value:false:关闭每次保存都进行检测true:开启每次保存都进行检测,效果与warning一样'warning':开启原创 2020-12-29 09:40:16 · 322 阅读 · 2 评论 -
element-UI:el-table 表格排序
el-elment 表格排序elementUI虽然表格列本身就有 sortable 属性可以对表格的数据进行排列,但是为了提高网页性能,我们从后端一般拿到的只是当前页的数据,并不是直接拿到所有的数据都放在表格里,那这样的话我们如何对表格进行排序呢?以下是我对表格进行排序的详细步骤第一步:给el-table设置事件@sort-change="changeTableSort"sort-change:当表格的排序条件发生变化的时候会触发该事件第二步:给需要排序的表格列设置属性:sortable="'原创 2020-12-28 12:01:59 · 14210 阅读 · 9 评论 -
JavaScript:学习Vue3为什么要学习TypeScript?
TypeScript是什么如果有阅读过一些TypeScript相关内容的的朋友应该很熟悉一句话:TypeScript 是 JavaScript 的一个超集第一次看到这句话我心里就在想“这个超集又是什么???”通过一段时间的了解,其实换成通俗的话来讲就是:“js能做的事ts能做,js不能做的ts还是能做”学习TS的原因1.趋势从Vue3.0开始,前端三大主流框架已经全部支持ts,跟着大部队走肯定没问题。2.易维护由于js是一种弱类型的语言,在用来做大型的项目的时候,是会难受的,因为经常会出一些原创 2020-12-22 10:57:11 · 9265 阅读 · 1 评论