前端学习记录 week 1
前端学习记录 week 1
基础知识
CSS盒模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容
- Margin - 清除边框外的区域,外边距是透明的。
- Border - 围绕在内边距和内容外的边框。
- Padding - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
- CSS3新增box-sizing;border-box:将padding、border的宽度计算在宽度width里面。
html5标签
- template: 通过 JavaScript 在运行时实例化内容的容器。
- header: 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
- footer: 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
- aside: 定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
- section: 定义文档中的一个章节。
- nav: 定义只包含导航链接的章节。
- audio:定义音频内容(属性:autoplay、controls、loop、muted、preload)
- video: 定义视频(属性同上)
- JavaScript数据类型及数据结构
JavaScript是一种弱类型语言
6种原始类型
- Bool
- Object
- String
- Null
- Undefined
- Number
*可以使用typeof 判断数据类型,数组以及null都属于Object
*Object属于引用类型,具有:constructor、hasOwnProperty、isPropertyOf、propertyIsEnumerable等方法。
对象的属性
- 数据属性:包含一个数据值的位置,可以读写包含Configurable、Enumerable、Writable、Value 4个特性
- 访问器属性: 不含数据值可以包含getter、setter函数,读取以及写入会分别触发这两个方法,包含Configurable、Enumerable、get、set特性
修改默认特性使用defineProperty(),访问器属性不能直接定义,只能调该用方法。
对象的创建
- 工厂模式
- 构造函数
- 原型模式
构造函数:
function Person(name, age ,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
console.log(this.name);
}
}
let person1 = new Person("name", 20, "job");
原型模式:
function Person(){
}
Person.prototype.name = "name";
Person.prototype.age = 20;
Person.prototype.job = "job";
Person.prototype.sayName = function(){
console.log(this.name);
}
let person1 = new Person();
JavaScript常用的字符串操作
- substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
- substr() - 返回字符串的一个子串。传入参数是起始位置和个数。
- replace() – 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
- slice() – 提取字符串的一部分,并返回一个新字符串。
- split() – 通过将字符串划分成子串,将一个字符串做成一个字符串数组。
- length – 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
- toLowerCase() – 将整个字符串转成小写字母。
- toUpperCase() – 将整个字符串转成大写字母。
- concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。
- indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。
- charAt() – 返回指定位置的字符。
- match() – 检查一个字符串是否匹配一个正则表达式
JavaScript常用的数组操作
- concat - 合并数组
- push、pop - 分别为添加、删除元素,堆栈形式
- unshift、shift - 添加、删除元素,队列形式
- reverse - 反转
- sort() - 排序, arr.sort(function(a,b){return a-b;} 输入比较函数
- slice、splice - 删除,参数为起始位置和个数,slice不改变原素组,返回新数组,splice会改变原素组,返回被删除的数组。
- substring、substr - 截取数组,类似于上面字符串中的这两个方法。
JavaScript模块化
为了不让分块的代码污染全局,以及更好地使用别人的代码所以产生了JavaScript模块化的需求
可以使用立即执行函数
var params = 'test';
var module = (function(params){
var mod = function(){
//...
};
return {mod: mod};
})(params);
外部不能直接访问模块内部的变量,传入外部变量后,在内部改变它的值也不影响全局。
- 闭包
CSS3部分新特性
- border-radius: 边框圆角
- box-sizing:border-box、content-box
- box-shadow: 阴影
- background-size
- background-origin:背景显示区域,content-box、padding-box 或 border-box
- text-shadow:文字阴影
- word-wrap:文本强制换行
- @font-face: 字体
- transform:2D,3D转换 ratate、translate、scale、skew
- transition:过度
- animation:动画
- @keyframes:创建动画规则
vue基础
常用指令
- v-if、v-else-if、v-else
- v-show
- v-on 缩写@
- v-bind
- v-model
- v-for
- v-html
- v-text
特性
- ref:在元素上添加该属性,替代原生JavaScript获取dom操作 this.$refs.name
绑定内联样式以及类
以下写法涉及到了所有样式以及类名的绑定方式,不详细说明了
- 样式
:style=“[item.a,item.b]”
:style="{width:item.value+'px'}"
:style="{color: activeColor, fontSize: fontSize + 'px' }"
:style="item.titlefont"
:style="a<0? 'color:red':'color:black'"
:style="item.choosetype==3?{width:ul_width+'px'}:''"
- 类
:class="{a:item.x==1}"
:class="[b ,{a:item.x==1}]"
:class="{a:item.x==1, b:item.x==2}"
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
实践
一、个人中心-生活馆页面
遇到的问题以及学习到的知识点
1. 内层div的margin-top属性转移到了外层div上
<div class="member-card">
<!--header外边距体现在外层div上-->
<header>{{constellation}}</header>
<footer>
<div>{{memberGrade}}</div>
<div>{{memberName}}</div>
</footer>
</div>
原因:
- 当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 当一个元素包含在另一个元素中时(如果没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
- 空元素,它有外边距,但是没有边框或填充,则上下边距会发生合并
解决方法
- 给外层元素加内边距边框
- 去掉内层元素的mqrgin改为直接设置外层元素padding
2.事件冒泡
<div class="root">
<div class="father">
<div class="child"></div>
</div>
</div>
let root = document.getElementsByClassName('root')[0];
let father = document.getElementsByClassName('father')[0];
let child = document.getElementsByClassName('child')[0];
root.onclick = function () {
console.log("root");
};
father.onclick = function () {
console.log("father");
};
child.onclick = function () {
console.log("child");
};
点击最内层div时控制台依次显示:child、father、root。按照DOM层次结构像至低向上直到顶端,这就是事件冒泡。
3. 阻止冒泡
实现弹窗,然后点击空其他任意地方隐藏弹窗
<!--html-->
<div class="father">
<div class="child"></div>
</div>
/*javascript*/
let father = document.getElementsByClassName('root')[0];
let child = document.getElementsByClassName('child')[0];
father.onclick = function () {
console.log("father");
};
child.onclick = function (e) {
let ev = e||window.event;
ev.stopPropagation();
};
<!--vue-->
<div class="father">
<div class="child" @click.stop=""></div>
</div>
二、根据现有项目学习编码规范以及项目结构并尝试编写
*模仿网易云音乐播放器页面
地址:https://gitee.com/zhangweiqin...
代码规范
- tab = 2Space
- 移动端使用rem布局
- 生命周期排列顺序:name、props、components、data、create、mounted、computed、watch、beforedestroy、methods
- 自定义组件使用小驼峰命名
目录结构
- 根组件App.vue
- 页面组件:src/view
- 页面模块:src/view/modules
- 路由:src/router
- 通用组件:src/components
rem自适应布局
先了解:rem、em、px
- px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em:是相对长度单位,是所在元素的字体大小,没设置则一层层往上直获取字体大小至浏览器默认字体大小。
- rem:相对长度大小,相对于根元素字体大小
因为rem大小只和根元素字体大小有关所以只要根据设备设置不同的根元素大小,然后以相同的rem作单位得到的实际大小是不同的,实现自适应。
document.documentElement.style.fontSize = document.documentElement/375*20 + 'px';
/*
这样 如果在宽度为375(iphone6/7/8)的环境下1rem = 20px.
也可以选择在宽度为360(大部分1080p屏幕)的环境下开发则相应的除以360,
根据设计稿的宽度不同选择方便计算的方式。
*/
项目路由
App.vue下目前只有主页面以及歌单页面,主界面下两个子路由:我的音乐、发现,两个组件:个人设置页面、播放控制条。
{path: "/", redirect: "/index/myMusic"}, //重定向
{//主界面
path: '/index',
name: 'index',
component: index,
children: [
{//我的音乐
path: '/index/myMusic',
name: 'myMusic',
component: myMusic
}, {//发现
path: '/index/findMusic',
name: 'findMusic',
component: findMusic
}
]
},
{//歌单页面
path: '/songList',
name: 'songList',
component: songList
}
路由的使用以及传参:(两种方式)
{
path: 'helloWorld',
name: helloWorld,
component: ···
}
this.$router.push({path: '/helloWorld',query: {msg: 'hello'}});
<router-link :to="{ name: 'helloWorld', query: { msg: 'hello!' }}"></router-link>
this.$router.push({ name: 'helloWorld', params: { msg: 'hello'}});
<router-link :to="{ name: 'helloWorld', params: { msg: 'hello' }}"></router-link>
console.log(this.$route.query); //{msg:hello},不同的是query传递参数会被附加到url地址上
console.log(this.$route.params); //{msg:hello}
组件的使用以及组件数据传递
- 引入组件,两种加载方式
1. import userSetting from '@/view/modules/userSetting.vue';
2. const userSetting = resolve => require(['@/view/modules/userSetting.vue'],resolve); //懒加载
异步加载,优点:最大化的实现随用随载,减少首页加载延迟;缺点:可能会造成网页显示过慢且渲染参差不齐的问题
- 组件注册
//单文件组件
components: {
userSetting
},
- 数据传递
父组件->子组件:
<!--发送-->
<userSetting :data="'msg from father'">
</userSetting>
//接收
export default {
name: "user-setting",
props:['data']
}
子组件->父组件:
<!--发送-->
<div class="set-item"
@click="$emit('msgFromSon','msg from son')">
高级设置
</div>
<!--接收-->
<userSetting
v-show="setting"
@msgFromSon="recive">
</userSetting>
methods: {
recive(msg) {
console.log(msg); //msg from son
}
}
Vue.extend()、$mount()
Vue.extend(): 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
let alertOptions = {
data:function(){
return {
title: title,
text: text,
}
},
methods:{
close() {
resolve('ok');
dialogClose(vm);
}
},
template: '<alert @close="close" :title="this.title" :text="this.text"></alert>',
components: {alert}
}
let creator = Vue.extend(alertOptions)
vm.$mount():手动地挂载一个未挂载的实例。
//挂在到#app下
new creator().$mount('#app')
//在文档之外渲染并且随后挂载
vm = new creator().$mount()
dialogContainer.appendChild(vm.$el)
前端学习记录 week 1的更多相关文章
- 前端学习记录之Javascript-DOM
简介 为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等.然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了 ...
- 前端学习记录(HTML篇)
HTML Hyper Text Markup Language,超文本标记语言,不是一种编程语言,而是一种标记语言 思想:网页中有很多数据,不同的数据可能需要不同的显示效果,一个标签相当于一个容器,想 ...
- 4.VUE前端框架学习记录四:Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三:Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- [前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre
vue的指令学习记录 vue-if | text | for | on | model - 目录 vue的指令学习记录 vue-if | text | for | on | model ... 预备 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
随机推荐
- Boostrap4 li列表橫向
Boostrap3 li元素橫向: <ul class="nav navbar-nav list-inline"> <li class="list-in ...
- Mybatis-学习笔记(6)Mybatis的事务管理机制
1.什么是事务. 多个数据库原子访问应该被绑定成一个整体,这就是事务.事务是一个最小的逻辑执行单元,整个事务不能分开执行,要么同时执行,要么同时放弃执行. 事务的4个特性:原子性.一致性.隔离性.持续 ...
- roslyn\csc.exe
vs2019调试运行时提示roslyn\csc.exe错误时在nuget包管理器控制台里输入: Update-Package Microsoft.CodeDom.Providers.DotNetCo ...
- Eureka 源码分析之 Eureka Server
文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/FfJrAGQuHyVrsedtbr0Ihw 简介 上一篇文章<Eureka 源码分析 ...
- “程序包com.sun.tools.javac.util不存在” 问题解决
最近工作中在编译打包项目的时候遇到了如标题所示的问题,报这个错误的类是 com.sun.tools.javac.util.Pair.问题很诡异,在Idea可以导入此类,项目启动运行也很正常,但就是在打 ...
- git error: failed to push some refs to 'git@github.com:xxx/xxx.git'
本地仓库中和远程仓库不一致,缺少readme.md文件 解决方式参见:https://blog.csdn.net/qq_37281252/article/details/79044798
- 百度网盘SVIP不限速Mac破解版(亲测可用)
百度网盘SVIP不限速Mac破解版(亲测可用),按照教程一步一步来就可以了,链接如下: https://mac.orsoon.com/Mac/166358.html?id=ODY0MDA2Jl8mMT ...
- CentOS上安装Git及配置远程仓库
首先登陆CentOS服务器,连接上服务器之后我们使用yum remove git 命令删除已安装的Git,若之前没安装过Git则不需要这一步.注意前提是你的CentOS服务器上安装了yum,这是Cen ...
- Java并发(基础知识)——显示锁和同步工具类
显示锁 Lock接口是Java ...
- 2019 计蒜之道 初赛 第二场 B. 百度AI小课堂-上升子序列(简单) ( 实现)
题目背景 91029102 年 99 月 22 日,百度在 X 市 XX 中学举办的第一场 AI 知识小课堂大获好评!同学们对矩阵的掌握非常棒. 今天的 AI 知识小课堂的第二场开讲啦.本场 AI ...