07 2023 档案
摘要:创建Vue项目 使用npm安装webpack和vue-cli后,创建webpack打包的vue项目 vue init webpack myproject 本地debug 在项目路径下输入命令 npm run serve 打包部署 1、打包:在项目路径下输入打包命令,会打包成一个dist文件夹 npm
阅读全文
摘要:Element-plus 基于Vue3,Element-ui 基于Vue2,是一套前端页面组件库 安装和使用 安装 npm install element-plus --save 使用:按需导入,只打包使用到的组件 安装插件 unplugin-vue-components 和 unplugin-au
阅读全文
摘要:vue3六大亮点: 性能比Vue2强 可以将无用模块去掉,仅打包需要的 组合API 碎片(fragment),portal传送门(teleport),悬念(suspense) 更好的TS支持 暴露了自定义渲染API setup() 在setup函数中声明对象,代替data()。ref声明简单对象,r
阅读全文
摘要:安装和使用 Vuex是一个专门为vue.js应用程序开发的状态管理模式 + 库,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 简单说,状态管理可以理解成为了更方便的管理组件之间的数据交互,提供了一个集中式的管理方案,任何组件都可以按照指定的方式进行读取和
阅读全文
摘要:安装和使用 通过vue-router路由管理页面之间的关系,是Vue.js的官方路由 1、安装路由 npm install --save vue-router 2、配置路由文件 route/index.js // 导入路由库 import {createRouter,createWebHashHis
阅读全文
摘要:Axios Axios是一个基于promise的网络请求库,安装npm install --save axios 局部引入:组件中引入import axios from "axios" 全局引入:main.js中引入,并挂载 // 在main.js中全局引入 import axios from "a
阅读全文
摘要:Vue 具有三种样式化应用程序的方法: 外部 CSS 文件。 单文件组件(.vue 文件)中的全局样式。 单文件组件中组件范围的样式。 外部CSS 导入外部CSS文件 import "./assets/reset.css"; 单组件全局样式 <style> /* 全局样式 */ .btn { pad
阅读全文
摘要:Props Prop可以实现各组件间的数据传递(父组件传递数据给子组件),支持传递的数据类型可以是:基础数据类型、对象、函数。返回的数据类型是数组或对象时,默认值需要是函数。 使用方式如下: 1、在需传递的组件中(父组件),export需要传递的数据 2、在需传递的组件中(父组件),import 接
阅读全文
摘要:{{}} 数据绑定最常见的形式就是使用Mustache {{}}(双大括号)语法的文本插值 {{}} 还接受单个表达式,如加减运算、三元运算等。 一般配合js中的data()设置数据 <span>Message: {{msg}} </span> export default { name:"tom"
阅读全文
摘要:组件基础 单文件组件 在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候,Vue 却反其道行之。使用单文件组件,Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具(例如 Webpack)处理,这意味着你可以使用构建时工具。你可
阅读全文
摘要:安装 Vue npm install -g @vue/clivue --version 创建vue项目 vue create vue-demo 运行项目 cd vue-demonpm run serve 安装vue高亮插件:vscode安装 volar 项目结构 Vue的默认包管理器为 yarn。。
阅读全文
摘要:Node环境 安装nvm、npm、nrm nvm:管理多个版本的node环境,使用nvm安装nodejs npm:npm是node的包管理工具,使用nvm安装node后,就可以使用npm命令 nrm:管理npm的镜像源,使用npm命令安装 Babel转码器 可以将es6代码转成es5代码。从而可以在
阅读全文
摘要:常见的 HTML 事件 常见HTML事件 事件描述 onchange HTML 元素已被改变 onclick 用户点击了 HTML 元素 onmouseover 用户把鼠标移动到 HTML 元素上 onmouseout 用户把鼠标移开 HTML 元素 onkeydown 用户按下键盘按键 onloa
阅读全文
摘要:浏览器对象 window window对象不但充当全局作用域,而且表示浏览器窗口。 window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高。 navigator:navig
阅读全文
摘要:创建对象 prototype对象 JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。 当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象
阅读全文
摘要:map、reduce map:map()方法定义在JavaScript的Array中,接收一个函数对象作为参数,函数定义运算规则,对array中的每个元素进行运算,结果是一个新的array。 function pow(x) { return x * x; } var arr = [1, 2, 3,
阅读全文
摘要:函数定义 函数也存在提升,与变量提升相同 函数声明 function func_name(param1,param2){ ...; return {};} 声明不定长参数,使用... function foo(a, b, ...args) { console.log('a = ' + a); con
阅读全文
摘要:JS引入到文件 嵌入到html文件中,在<header> 或 <body> 中使用<script> <script> var i = 10; console.log(i);</script> 引入JS文件,在<header> 或 <body> 中使用<script> <script src="./i
阅读全文
摘要:经常会用到一些图片,但是我们在使用这些图片时,往往会遇到失真的情况,而且图片数量多的话,页面加载很慢,所以我们可以使用字体图标的方式来显示图标,既解决了失真的问题,也解决了图片占用资源的问题。常用资源 [阿里字体图标库][https://www.iconfont.cn/] 优点: 轻量,加载速度快,
阅读全文
摘要:圆角和阴影 圆角,使用 border-radius 可以给任何元素制作圆角 阴影,box-shadow 向框添加一个或多个阴影:box-shadow: h-shadow v-shadow blur color h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊距离 c
阅读全文
摘要:脱离文档流 标准文档流导致: 高矮不齐,底边对齐 空白折叠现象 很多空格,都会折叠会一个空格 img标签有缝隙 脱离文档流:使一个元素脱离标准文档流有三种方式: 浮动 绝对定位 固定定位 浮动 增加浮动 增加一个浮层来放置内容。可以理解为有两层页面,一层为原页面,一层为脱离文档流的浮层页面,所以会出
阅读全文
摘要:盒子模型box model CSS盒子模型本质上是一个盒子,封装周围的HTML元素。它包括: margin(外边距)、border(边框)、padding(内边距)、content(内容) 弹性盒子模型flex box felx box是CSS3的一种新的布局模式。是为了让页面适应不同的屏幕大小和设
阅读全文