vue
文章平均质量分 73
专注前端研究二十年
谋事在人成事在天
展开
-
详解.env文件配置---全局环境变量
已经有很多人问过我关于.env环境配置的问题了,今天有空总结一下原创 2022-04-27 10:38:00 · 16772 阅读 · 4 评论 -
前端如何实现权限管理板块的流程和思想
一、什么是权限管理 权限管理是指一个角色(如vip和非vip)在一个系统中只能使用指定的功能并且只能访问指定的界面,权限管理是一个项目当中必不可少的部分。二、如何做到权限管理功能注意: 新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由。路由分为两块:不需要权限访问的路由,比如登录页面、404页面,有时首页也不需要。 需要权限访问的路由 用户登录后后端会返回一个当前用...原创 2021-12-07 16:20:02 · 6752 阅读 · 4 评论 -
Vue 中 $attrs 与 $listeners 的详解
介绍$attrs继承所有的父组件属性(没有通过 props 接收的属性还有 class 类名 和 style 样式 )。inheritAttrs:是否非 props 属性显示在标签最外层,默认值true ,就是继承所有的父组件属性(除了 props 特定绑定外)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性就设置 inheritAttrs: false ,但是 class 还是会继承。$listeners它是一个对象,能接收所有的方法绑定,里面包含..原创 2021-11-28 17:32:17 · 3153 阅读 · 1 评论 -
如何自动注册全局组件 (Vue.use正确使用)
在components中创建lib文件夹index.js:export default { // 通过Vue.use调用相应的方法对象,调用它的install方法 install(Vue, options) { // 自动全局注册组件 // 1.读取lib文件夹下的文件 // const req=require.context('路径','是否读取子文件夹','正则匹配') const req = require.context('./', true, /\原创 2021-11-25 15:35:42 · 1340 阅读 · 1 评论 -
vue实现二维码生成(qrcode)
安装:npm i qrcode作用:将文本生成二维码使用: 导入 import Qrcode from 'qrcode' 定义一个canvas画布标签来放置二维码 <canvas ref="canvas" /> 生成 Qrcode.toCanvas(需要放置二维码的canvas标签,文本内容,{配制项(样式),宽度,高度....}) ...原创 2021-11-24 20:13:40 · 1417 阅读 · 0 评论 -
总结JS继承的六种方式
1. 继承1.1语法//父类 classFather{ }//子类继承父类 classSonextendsFather{ }例如:classFather{ constructor(sonname){ this.sonname=sonname; } say(){ console.log('你的姓是'+this.sonname); ...原创 2021-10-15 14:28:50 · 13661 阅读 · 3 评论 -
webpack简单实用说明及应用
首先小huihui推荐使用 yarn 包管理器,与 npm 类似,可用于下载包,优点就是更快,安全可靠。详情见官网:Yarn 中文文档下载见:安装 | Yarn 中文文档==不要安到带中文的路径下, 建议在C盘/==一、webpack基本概念就是 node 的一个第三方模块包,用于打包代码。详见官网:webpackwebpack能做什么? 把很多个文件打包整合在一起,缩小项目的体积,提高加载速度。 功能支持所有类型文件的打包 支持less/sass=>css 支持..原创 2021-10-17 21:41:23 · 681 阅读 · 1 评论 -
Vue中diff算法详解
首先带大家了解一下虚拟DOM概念一、本质虚拟DOM本质就是一个js对象,用来保存DOM关键信息。二、概念后缀名为.vue文件中的 template 里写的标签,都是模板,都会被vue处理成虚拟DOM对象来渲染显示在浏览器(真实dom页面)上。内存中生成一样的虚拟DOM结构 项目中的DOM属性有很多个,我们无法很快知道什么属性改变,比如在template中的标签结构为: <template> <di...原创 2021-10-22 18:21:44 · 3144 阅读 · 0 评论 -
Vue生命周期详解
一、生命周期的概念生命周期,顾名思义就是一个vue组件从 创建 到 销毁 的过程。二、钩子函数 Vue中有许多内置函数,是随着组件生命周期阶段自动执行的。我们可以通过钩子函数来在特定的某个生命周期的阶段执行特定的操作,比如能够在 created 中发起 ajax 请求,从而能够初始化 data 数据渲染页面。 生命周期可以分为四个阶段:初始化阶段 挂载阶段 更新阶段 销毁阶段 每个阶段又有相对应的方法,分别为:...原创 2021-10-27 22:02:09 · 3146 阅读 · 0 评论 -
Vue指令介绍及使用
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式,实质上就是特殊的 html 标签属性,指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值,框架会进行相关DOM操作的绑定, 特点: v- 开头。二、插值表达式 在dom标签中直接插入内容,又叫声明式渲染/文本插值。语法:{{ 表达式 }} 注意:dom中插值表达式赋值, vue的变量必须在data里声明三、vue中常用 v-...原创 2021-11-06 16:50:36 · 2511 阅读 · 0 评论 -
Vue中render函数浅浅详解
render介绍 众所周知,仅限于我大前端,Vue中的核心就是虚拟DOM。 通常我们都会把我们的页面结构逻辑都写在 template 中,然后再通过vue将我们的代码转换成虚拟DOM,相比于真实DOM,虚拟DOM是通过js代码处理的,所以消耗的性能相对较小,当然大部分情况下使用 template 创建我们的HTML是可以的,但是在有些场景下,我们真的需要通过Javascript的完全编程的能力来完成时,就可以用到 render函数,比之 template 更接近编译器。........原创 2021-11-21 17:48:57 · 8177 阅读 · 4 评论