前端
关注
分享
扫一扫
文章平均质量分 58
斌哥谈编程
笔记记录、干货分享、共同学习
展开
-
Vue3快速上手
Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy原创 2021-11-08 15:21:27 · 188 阅读 · 0 评论 -
vue2中Options API及vue3中Composition API 的区别对比
一、代码组织区别在vue2组织代码时，我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API。缺点： 一个功能需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含20多个方法，你往往分不清哪个方法对应着哪个功能，这个是深有体会在vue3 Composition API 中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有api会原创 2021-11-07 09:15:52 · 700 阅读 · 0 评论 -
Vue 在线演示编译结果
Vue 在线演示编译结果:Vue3: https://vue-next-template-explorer.netlify.app/Vue2: https://vue-template-explorer.netlify.app/原创 2021-11-07 09:07:39 · 675 阅读 · 0 评论 -
使用vite搭建vue3项目体验
Vite 需要 Node.js 版本 >= 12.0.0创建vite+vue3项目方法一：npm init @vitejs/app my-vue-app --template vue方法二：npm init @vitejs/app my-vue-app然后依次选择：vue->vue-ts 即可原创 2021-11-01 16:22:57 · 177 阅读 · 0 评论 -
vue3.x项目搭建初体验
一、环境准备（此处设备使用window10系统）1、node安装，安装地址为nodejs官网（http://nodejs.cn/download/）打开cmd，输入 node -v ，查看是否安装成功，比如下图：在这里插入图片描述2、全局安装vue-cli 4.0脚手架如果已经安装了旧版，运行 npm uninstall vue-cli -g 卸载查看3.x 和 4.x 的所有版本号： npm view @vue/cli versions --json我安装的是最新版本，全局安装命令如下原创 2021-11-01 15:34:54 · 119 阅读 · 0 评论 -
前端布局学习笔记（第一篇：入门）
文章目录一、知识点1、margin、padding有什么区别，不想再混乱了2、五种最常见的CSS页面布局3、box-sizing属性是什么作用？4、行内元素水平方向不对齐有哪些原因？5、块标签、行内标签、行内块标签有哪些？区别是什么？6、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？7、display有哪些值？说明他们的作用?8、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？9、CSS3有哪些新特性？10、display:none与visibility：hidden原创 2021-05-11 14:34:35 · 259 阅读 · 1 评论 -
行内元素高度对齐问题
文章目录1、什么是行内元素2、行内元素高度对齐问题3、行内块元素4、实例总结1、什么是行内元素行内元素也称为内联元素，行内元素的特点：总是和相邻的行内元素在同一行上（物以类聚）设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。默认宽度是他自身内容的宽度。行内元素只能容纳其他行内元素或者文本。2、行内元素高度对齐问题有这样一个场景，代码如下：<!DOCTYPE html><html lang="en"><head&g原创 2021-05-10 16:21:46 · 951 阅读 · 2 评论 -
box-sizing属性是什么作用？
文章目录1、场景说明2、未用box-sizing属性之前3、box-sizing属性的作用1、场景说明要实现界面主区域块100%显示2、未用box-sizing属性之前<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>box-sizing属性是什么作用？</title> <style>原创 2021-05-09 11:48:47 · 1029 阅读 · 0 评论