随笔分类 - 前端
摘要：{{}} 数据绑定最常见的形式就是使用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的一种新的布局模式。是为了让页面适应不同的屏幕大小和设
阅读全文
摘要：HTML标签常用的属性 字体属性 color、font-size、font-weight（粗细）、font-style（正体斜体）、font-family（字体） 背景属性 background-color、background-image、background-position（背景图起始位置）、
阅读全文
摘要：声明语法 由选择器和声明组成：选择器 {属性1:值1; 属性2:值2; ...}，如 h1 { color:blue; font-size:12px;} 选择器类型 全局选择器，优先级最低，一般做初始化，以通配符 * 匹配所有标签：* {声明1;声明2}， * {color:red;} 元素选择器，
阅读全文
摘要：内联样式 在html标签内使用属性style，style属性可以包含任何css属性。直观但不利于维护，不推荐 <p style=" font-size: medium;"> css内联样式</p> 内部样式 在html文件头部声明样式，是这个HTML文件都可以使用，但是不能作用于其他HTML文件 <
阅读全文
摘要：块元素内联元素（行内元素） 在页面中独占一行，自上向下排列 不独占一行，只占自身大小 可以设置width, height属性 设置width, height属性无效 包含内联元素和其他块元素 包含其他内联元素，不包含块元素 常见块元素：div, form, h1~h6, hr, p, table,
阅读全文
摘要：H5之前，使用div容器元素进行页面定义布局 ``` <div id="header"></div><div id="nav"></div><div id="article"><div id="section"></div></div><div id="aside"></div><div id="f
阅读全文
摘要：常用基础标签 标题 <h></h> 段落 <p></p> 换行 <br/> 水平线 <hr width="" size="" align="" color=""/> 图片 <img src="" alt="" title="" width="" height=""/> alt：替代图片的文本 tit
阅读全文
