这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 对vue项目来说,组件是构成项目的基本单元,为了方便理解,这里定义两类组件:页面组件,功能组件。为什么需要划分这两类组件是从组件复用来考虑的。 我们知道在复杂应用中,页面状态管理早已不是早期的简单的子父组件的传值,兄弟组件传值。而当我们寻 ...
自此整个项目前后台,全部搭建完毕。 今天是最后一天,内容很多,而且也比较常用,一个图标类数据可视化,一个后台的权限管理,都是很经典的类型。 一.数据可视化 1.简介 专门的一门学科,有专门研究这个的岗位,将数据以各种图形进行展示 Echarts只能2D,three.js可开发3D 2.canvas绘 ...
什么是单文件组件? 简言之,单文件组件就是一个文件扩展名为.vue的single-file-components(SFC)。是Vue.js自定义的一种文件格式,一个.vue文件,就是一个单独的组件,在文件内封装了组件的相关代码:HTML,CSS,JS。 浏览器本身并不支持.vue文件,所以必须对.v ...
了解响应式原理后对代码的一点小重构 在操作一个响应式变量的时候,可能会多次去取这个响应式变量的值,这就意味着会多次执行依赖收集中的get,可以用一个局部变量缓存下来,这样只需要一次get操作. // 比如商城业务中,根据价格筛选不同的商品 data: () => ({ goods: [] }), c ...
props传递数据 步骤: 首先,在子组件中声明props选项 其次,在子组件中使用v-bind指令动态绑定属性,通过插值表达式动态获取数据 最后,在父组件的template中调用子组件标签的使用传递数据 示例: 在子组件MovieItem.vue中 <template> <div class="s ...
一、什么是首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容,首屏加载可以说是用户体验中最重要的环节 二、加载慢的原因 在页面渲染的过程,导致加载速度慢的因素 ...
dll ? 动态链接库英文为DLL,是Dynamic Link Library的缩写。DLL是一个包含可由多个程序,同时使用的代码和数据的库。 起因 在查看hzero前端项目框架介绍时提到了dll,外加之前经常看见dll文件,于是有了兴趣了解一下 webpack dll。 webpack官网介绍 D ...
vue2中只能有一个根标签,但是在vue3中根组件已经可以有多个根节点了 在vue2中只所以这么做是因为vdom是一颗单根树形结构,patch方法在遍历的时候从根节点开始遍历,它要求只有一个根节点,组件也会转换为一个vdom,自然满足这个要求 vue3中值所以可以有多个节点,是因为引入了Fragme ...
今天继续是对后台管理部分的一个操作,但是快要结束了,今天结束,明天会进入一个从Vue以来,另外一个名声显著的东西了,一只耳闻从未见识,而且十分的炫酷 他就是 数据可视化Echarts,迫不及待了解了 11.销售属性添加 当我们点击添加就,应该把添加的放到table里面来,table里面每一行数据是一 ...
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 配置灵活,界面简洁,支持自定义插件。 TinyMCE中文手册:http://tinymc ...
一、前言 小编最近开始学习typescript,懂得人都知道,typescript是vue3的基础伴生,配合更加默契。就像vue2和js一样!typescript不像js那样浏览器直接可以解读,需要我们把ts文件编译成js文件,这样浏览器才可以解读。所以我们要安装一下ts的环境和自动编译,方便我们后 ...
路由懒加载:有效拆分App尺寸,访问时才异步加载 keep-alive组件缓存:避免重复创建组件实例,且能保留缓存组件状态 使用v-show复用DOM:避免重复创建组件 v-for遍历避免同时使用v-if 长列表性能优化:如果是大数据长列表,可采用虚拟滚动(不会将所有内容渲染,只是把可是区域渲染), ...
前言 : 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。 现在基于vue的UI组件库有很多,比如iview,element-ui等。但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写 ...
Vue 3.x基础 模版 <template> // html </template> <script setup> // setup API // ... </script> <style> // css </style> setup API 变量(响应式) // 基本数据类型 let refVa ...
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值。 ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变化。 import { ref } f ...
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、vue脚手架 1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 2.命令行操作步骤 npm install -g @vue/cli 安装3.x版本的vue脚手架 vue -V 测试是否安装成功 vue cr ...
从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试;慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是Vue3.2推出了setup语法糖后直呼真香。后面公司的新项目几乎全部采用了Vue3了。使用Vue3开 ...
组件的出现是为了实现以下两个目标: 降低整体复杂度,提升代码的可读性和可维护性 提升局部代码的可复用性 绝大部分情况下,一个组件就是页面中某个区域,组件包含该区域的: 功能(JS代码) 内容(模板代码) 样式(CSS代码) 要在组件中包含样式,需要构建工具的支撑 组件开发 创建组件 组件是根据一个普 ...
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 基于Vue.js 2.x系列 + Element UI 的后台系统权限控制 前言:关于vue权限路由的那些事儿…… 项目背景:现有一个后台管理系统,共存在两种类型的人员 ①超级管理员(称作admin),②普通用户(称作editor) 每种 ...
1、新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "vuecomponentdi", "version": "1.0.0", "description": "", "main": "i ...